在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学习的网站，有时间分享一下。