mapbox-gl開發(fā):自定義圖層CustomLayer
在mapbox-gl過程中,當現(xiàn)有的圖層效果不能滿足實現(xiàn)效果時,可以使用自定義圖層,關(guān)于CustomLayer ?API的官方說明:
https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface
mapbox-gl開發(fā):deck.gl軌跡圖效果,deck.gl疊加在mapbox-gl上的圖層也是通過CustomLayer實現(xiàn)的。
CustomLayer上可以以webgl的方式實現(xiàn),也能夠以html5 canvas形式去實現(xiàn),官方分別提供了兩個示例:canvas的渲染方式
https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/webgl的渲染方式https://docs.mapbox.com/mapbox-gl-js/example/custom-style-layer/少量數(shù)據(jù)的使用canvas方式即可,數(shù)據(jù)多的時候,建議使用webgl的渲染方式。
webgl中輸入的點數(shù)據(jù)是墨卡托坐標系的,在onAdd通過
mapboxgl.MercatorCoordinate.fromLngLat轉(zhuǎn)換;在render中通過傳入matrix,實現(xiàn)圖層中的數(shù)據(jù)和地圖位置進行同步。
點、線、面的數(shù)據(jù)都能進行勾畫,一個圓環(huán)的簡單圖標:

map.triggerRepaint();實現(xiàn)連續(xù)刷新圖層,如不寫,只會在地圖移動時,對圖層進行刷新。加載的自定義圖層,默認是不能響應(yīng)鼠標點擊事件的,對于圖層的查詢,可以借助mapbox api查詢的方式。
為了在mapbox-gl實現(xiàn)良好的展示效果,可以借助先有開源的deck.gl、echarts等進行疊加,或者使用以上的webgl方式,最近整理了一些webgl學習的網(wǎng)站,有時間分享一下。