Leaflet的插件在WebGIS中作用

Myth丶恋晨 2022-09-22 11:47 192阅读 0赞

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

![1240][]

leaflet

打开[OpenCDN服务][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.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][brandonxiang_vue-leaflet]，如果感兴趣的话可以contribute一下。

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

*  [简单插件编写leaflet-pip-v2][leaflet-pip-v2] \- [ github][github]
 *  [进阶插件编写geojsonFilter][geojsonFilter] \- [ github][github 1]
 *  [Vue-leaflet][] \- [ github][brandonxiang_vue-leaflet]

[Leaflet]: http://leafletjs.com
[Openlayer]: http://openlayers.org/
[1240]: /images/20220721/8c623ddcd1b74af2af3e05e6dd86de01.png
[OpenCDN]: http://www.bootcdn.cn/
[leaflet]: http://www.bootcdn.cn/leaflet/
[leaflet.markercluster]: http://www.bootcdn.cn/leaflet.markercluster/
[angular-leaflet-directive]: http://www.bootcdn.cn/angular-leaflet-directive/
[leaflet.draw]: http://www.bootcdn.cn/leaflet.draw/
[Leaflet.awesome-markers]: http://www.bootcdn.cn/Leaflet.awesome-markers/
[leaflet-providers]: http://www.bootcdn.cn/leaflet-providers/
[leaflet-dvf]: http://www.bootcdn.cn/leaflet-dvf/
[leaflet-hash]: http://www.bootcdn.cn/leaflet-hash/
[leaflet.fullscreen]: http://www.bootcdn.cn/leaflet.fullscreen/
[leaflet-editable]: http://www.bootcdn.cn/leaflet-editable/
[leaflet-geocoder-mapzen]: http://www.bootcdn.cn/leaflet-geocoder-mapzen/
[Leaflet.ChineseTmsProviders]: https://github.com/htoooth/Leaflet.ChineseTmsProviders
[marker style]: http://leafletjs.com/plugins.html
[react-leaflet]: https://github.com/PaulLeCam/react-leaflet
[brandonxiang_vue-leaflet]: https://github.com/brandonxiang/vue-leaflet
[leaflet-pip-v2]: http://www.jianshu.com/p/2ab5290fd66b
[github]: https://github.com/brandonxiang/leaflet-pip-v2
[geojsonFilter]: http://www.jianshu.com/p/46001b6eb0a4
[github 1]: https://github.com/brandonxiang/leaflet.geoJsonFilter
[Vue-leaflet]: http://www.jianshu.com/p/03b7893bc007