在mapbox-gl过程中,当现有的图层效果不能满足实现效果时,可以使用自定义图层,关于CustomLayer  API的官方说明:

​https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface​

​mapbox-gl开发:deck.gl轨迹图效果​​,deck.gl叠加在mapbox-gl上的图层也是通过CustomLayer实现的。

CustomLayer上可以以webgl的方式实现,也能够以html5 canvas形式去实现,官方分别提供了两个示例:

canvas的渲染方式

​https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/​

webgl的渲染方式

​https://docs.mapbox.com/mapbox-gl-js/example/custom-style-layer/​

少量数据的使用canvas方式即可,数据多的时候,建议使用webgl的渲染方式。

webgl中输入的点数据是墨卡托坐标系的,在onAdd通过

mapboxgl.MercatorCoordinate.fromLngLat转换;在render中通过传入matrix,实现图层中的数据和地图位置进行同步。

点、线、面的数据都能进行勾画,一个圆环的简单图标:

mapbox-gl开发:自定义图层CustomLayer_图层

map.triggerRepaint();实现连续刷新图层,如不写,只会在地图移动时,对图层进行刷新。

加载的自定义图层,默认是不能响应鼠标点击事件的,对于图层的查询,可以借助mapbox api查询的方式。

为了在mapbox-gl实现良好的展示效果,可以借助先有开源的deck.gl、echarts等进行叠加,或者使用以上的webgl方式,最近整理了一些webgl学习的网站,有时间分享一下。