针对前端而言,地图上覆盖物的优化主要有2种思路, 一种是利用geoServer等gis服务器返回wms图层等图片数据,可以极大地优化前端地图展示效率。 一种是前端自行优化绘制方式。
传统的marker绘制都采用dom元素绘制,这样的好处是方便控制marker层级,由于能借用原生dom的事件触发机制,注册事件时也能方便控制触发。
好用的东西往往都有缺点,因为采用dom渲染,在地图拖动时,由于需要频繁计算position,浏览器渲染进程处理异常,极容易造成卡顿。 类似蓝湖画布里拖动逻辑,蓝湖后来改版为canvas画布效率就好多了。
以下总结了多种地图框架的解决方案
百度地图
mapv 需要自行实现图片资源加载逻辑,建议使用base64嵌入到业务文件中
高德地图
PointSimplifier, 官方插件,对于图标加载比较友好
天地图(利用leaflet作为底图工具)
https://github.com/eJuke/Leaflet.Canvas-Markers
使用canvas绘制markers,不过该插件存在bug,且最后更新时间为两年前。
所以我基于此插件封装了leaflet-canvas-marker插件,演示地址:
http://jackshen.top/gis/#/differ/muiltmarkerscode
插件源码:
https://github.com/jackShen993/leaflet-canvas-marker