mapbox-gl开发:自定义图层CustomLayer
在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,实现图层中的数据和地图位置进行同步。
点、线、面的数据都能进行勾画,一个圆环的简单图标:

map.triggerRepaint();实现连续刷新图层,如不写,只会在地图移动时,对图层进行刷新。加载的自定义图层,默认是不能响应鼠标点击事件的,对于图层的查询,可以借助mapbox api查询的方式。
为了在mapbox-gl实现良好的展示效果,可以借助先有开源的deck.gl、echarts等进行叠加,或者使用以上的webgl方式,最近整理了一些webgl学习的网站,有时间分享一下。