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

更多文章请关注公众号查看！