[原创]webGIS地图动态绘制编辑控件的选择(openlayers、leaflet、mapbox.gl)

admin[原创]webGIS地图动态绘制编辑控件的选择(openlayers、leaflet、mapbox.gl)已关闭评论条评论 421 次浏览

前言:对于一个GISer在日常开发中来说,可能会遇到这样一个需求,对一个图层数据(geojson、shp)进行动态绘制修改其内部数据。不巧,我又一次遇到了这样的需求,对于这样的需求,其实有许技术栈可以去实现它, 但是这当中该如何选择? 我进行了一次技术调研, 本文就此问题对主流JS库做一个简单的比较。

一.Openlayers

首页,是openlayers技术栈,openlayers是一套比较老牌和体系比较成熟的二维GIS的JS库。功能非常稳定和丰富。但由于自身较为重的原因,难于扩展,社区生态插件比较少,主要还是依赖官方的库实现绘制编辑功能。

总结:由于官方只是提供基础的绘制功能模块。没有好的用户体验,需要开发者进行二次开发,难度较高,但是稳定性好,在数据量大的编辑效果下也有不错的性能。



二 .Leaflet

然后是Leaflet,leaflet也是一个比较成熟的二维GIS的JS库,自身非常轻量,体验也非常好,官方库功能比较基础,社区较为活跃,有大量的用户群体和扩展插件。实现绘制编辑可以依靠社区的插件。

主要有 Leaflet.draw 、Leaflet.geoman(前身为Leaflet.pm)、Leaflet.Editable,说下这几个插件, Leaflet.draw 是一个比较老牌的绘制插件。但是已经多年没有维护,在绘制大数据的编辑修改时浏览器会崩溃。(主要原因是大数据编辑的时候添加了大量的控制点) Leaflet.geoman 是目前比较活跃的leaflet绘制插件,同样在绘制大数据的编辑修改时浏览器会崩溃,不过是作者出了一个pro收费版专门处理针对大数据的问题。有兴趣的可以了解下。 Leaflet.Editable 与 Leaflet.draw 情况基本一致。

总结:采用社区提供的绘制插件。拥有较好的用户体验,一般不需要开发者进行深度的二次开发,只需了解插件API即可,难度适中,数据量大的编辑效果下体验较差,可能会有浏览器崩溃的情况,虽然有解决方案 Leaflet.geoman .pro,但需要收费且价格不菲。小场景下可以使用此方案


三.maobox.gl.js

最后,是maobox.gl.js, maobox.gl.js不同于maobox.js,maobox.gl 底层采用webGL实现,性能和体验显著的提升,mabox.js则是采用leaflet。 maobox.gl.js在用户体验和性能上个人觉得都是最优的,gl版本起步较晚。社区生态插件也不是很多,但是官方也提供了相应的绘制插件。

官方提供了插件 mapbox-gl-draw ,总体来看,该库封装得较为成熟,最重要的是它在大数据量下的编辑一点都不卡(仅编辑点击的时候添加控制点)。这使我颇感意外。

总结:采用官方的扩展插件。拥有较好的用户体验, 不需要开发者进行深度的二次开发,只需了解插件API即可,难度适中性能非常好, 大小场景下都可以使用此方案个人是认为最佳方案。