Leaflet 笔记一：简单入门

Leaflet 笔记一：简单入门

---

Leaflet可以说在我的博客当中应该出现了很多次，它首先是空间数据可视化的“佼佼者”，也是Mapbox.js的“父亲”。不同的是，Mapbox是个发展快速的商业公司，有些服务是需要看访问量收费的，而Leaflet是免费开源的组织，开放，开源，生态好，插件多。虽然插件是可以通用，文档资料大部分通用，但是我个人建议还是先学Leaflet后学Mapbox。

而且现在Mapbox貌似把重点放在Mapbox GL，而不是Mapbox.js上。Mapbox GL并非一般的瓦片地图，很新颖前卫，但是不符合中国市场。

Leaflet: an open-source JavaScript library for mobile-friendly interactive maps

Leaflet: 一款用于兼容移动端交互地图的开源JS库

言归正传，Leaflet本身是一个简单易用，体积极小，适合小项目的库。我们看看官网。

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map) 
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();

看看这几行代码，L.map('map')就是捕获一个<div id="map"></div>，把它当作一个地图观察器，将地图数据赋予上面。setView设置地图中心点的经纬度和比例尺，作为用户的视图区域。

L.tileLayer就是矢量瓦片底图，用对应的URL上找对应的z，y，x。而s是分布式服务器快速选取，一般都是1-4，天地图做到了1-8。最后，tileLayer图层要addTo(map)加载在地图观察器上。例子当中瓦片底图使用的是openstreetmap，当然也可以使用天地图的瓦片数据作为一个家庭作业留给你们，参考htoooth/Leaflet.ChineseTmsProviders。

L.marker就是图标，首先需设置的是图标的坐标，bindPopup是绑定的冒泡提示，里面可以包装任意的innerHTML元素，openPopup是开启提示的方法。

总结

Leaflet简单易用，学习成本较低，文档参考。与之相比，国内的百度高德连WMS，WFS都没有，真的有点汗颜。希望真正的GISer应该选择真正的地图前段工具，如leaflet和openlayer。

案例

最近看到一个有趣的项目--科比投出的30699个球。科比退役让整个互联网的焦点都在他身上。LATime做了一个项目可视化所有科比投出的球，我一开始以为是用D3.js等高级的数据可视化工具，结果并非如此。仔细研读了一下源码发现，这项目采用的是leaflet.js和carto.js（按访问量收费），数据的表现才用地图瓦片的形式。数据保存在CartoDB的数据库，包含了地图瓦片数据，以及每个球的数据详情。

这是一个很典型的空间数据可视化项目。将对应的点数据转换成为矢量瓦片作为底图。当鼠标在地图位置滑动，对应的数据详情将会通过tooltip形式表现，和Leaflet 笔记一：简单入门的步骤相似。再者，结合了小地图和图例的用法，让数据的展示流畅生动。篮筐篮板的表示不过是使用了L.Polyline等画线画圆工具。

科比投出的30699个球 动图

转载，请表明出处。总目录Awesome GIS