Wechat: yu389741| Email: gisdqy@163.com

Shop:https://www.giserdqy.com/shop

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上找对应的zyx。而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.jscarto.js(按访问量收费),数据的表现才用地图瓦片的形式。数据保存在CartoDB的数据库,包含了地图瓦片数据,以及每个球的数据详情。

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