乱谈Leaflet的插件在WebGIS中作用

乱谈Leaflet的插件在WebGIS中作用

姐妹篇 从Mapbox的插件看Web GIS的发展

前言

Leaflet和Openlayer都是两个主要的开源前端库。开放的程度都很高，但是考虑到移动端和小巧轻便易扩展，我大部分情况还是选择leaflet。兼容移动端似乎是必不可少的事情，放大缩小平移，都是一些必备的功能。小巧才可以在移动端内存受限的情况下，有效运行。而扩展性就是又一个重要的特征。

leaflet

插件

打开OpenCDN服务，leaflet常用的插件包括：

• leaflet - 移动端友好的交互地图JavaScript库
• leaflet.markercluster - 为Leaflet提供漂亮动态聚类功能
• angular-leaflet-directive - 用AngularJS directive完成更容易的交互地图
• leaflet.draw - 矢量画图工具
• Leaflet.awesome-markers - 漂亮的高清图片markers基于Glyphicons / Font-Awesome icons
• leaflet-providers - 底图免费提供设置
• leaflet-dvf - leaflet数据可视化
• leaflet-hash 位置哈希表
• leaflet.fullscreen 全屏功能
• leaflet-editable 几何可编辑工具
• leaflet-geocoder-mapzen 查找地理编码通过Pelias Geocoder API
• leaflet-plugins 插件综合
• Leaflet.heat 简单的热力图
• leaflet-routing-machine 路径计算工具
• leaflet-omnivore 常用的数据格式转换工具
• proj4leaflet 投影转换
• leaflet.freedraw 画图工具
• leaflet-vector-layers加载Arcgis server,geoIQ, Arc2Earth, CartoDB, GIS Cloud
• leaflet-realtime 实时更新数据
• leaflet-tilelayer-geojson geojson分瓦片加载
• leaflet-ajax 异步加载数据，不用jquery时用
• leaflet-gpx 加载gpx的数据
• leaflet-polylinedecorator 线段的装饰
• Leaflet.Spin

其中，不乏非常常用的工具，包括leaflet.markercluster ，leaflet-providers，leaflet.fullscreen。底图设置是每个GISer必须掌握。而中国的提供商有类似的工具如Leaflet.ChineseTmsProviders，包含了天地图，高德，图吧等瓦片提供商数据，让底图加载和切换更加简单。marker的聚类分析和全屏功能非常有用。而编辑几何要素，如leaflet.draw 和leaflet-editable，是很重要的一个方面，在一些项目上大有建树。这两个库就像一套组合拳，分别对应的是矢量空间数据的创建和修改。

Leaflet.awesome-markers则是除了mapbox的marker style外的又一个精美图标图标的选择，帮我们定义了很多marker的样式。就流行的前端工具而言，angular-leaflet-directive和react-leaflet则是结合了现在当前流行的前端工具angular和react等mvvm工具。这也激发起我的一个idea，将Vue双向绑定框架和leaflet相结合，整个组件化的设计会更加简单，github地址brandonxiang/vue-leaflet，如果感兴趣的话可以contribute一下。

leaflet-plugins是一个常用插件的集合，可解析gpx，kml，topojson，并且支持国外多家地图供应商底图。Leaflet.heat是超常用的简易热力图，比heatmap.js更加简单好用，原理类似，但是在效果上会根据缩放级别分层计算其热力值。leaflet-omnivore是超级常用的数据转换工具。方便各类数据在leafletjs的加载。

总结

leaflet各个插件将数据内容和地图这平台有机结合在一起，完成带交互的数据可视化。好的生态带动更多用户，成为良性循环。相比之下，Flex和Silverlight确实十分过时了，现在更多是聚焦于Javascript这样的轻量级和跨浏览器跨平台的语言。整个成熟的生态圈满足你各种各样的项目需要。希望我写的插件也可以发挥它应有的作用。

• 简单插件编写leaflet-pip-v2 - github
• 进阶插件编写geojsonFilter - github
• Vue-leaflet - github

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

微信公众号