mapboxgl實現帶箭頭軌跡線

最近在使用mapboxgl實現軌跡展現時，想實現相似高德地圖導航軌跡效果，然而並未在網上找到相似示例。經一番研究與嘗試，最終解決，效果以下。

添加箭頭核心代碼以下，只需在配置layout中添加symbol-placement和symbol-spacing屬性便可：

// 添加箭頭圖層
function addArrowlayer() {
    map.addLayer({
        'id': 'arrowLayer',
        'type': 'symbol',
        'source': {
            'type': 'geojson',
            'data': routeGeoJson //軌跡geojson格式數據
        },
        'layout': {
            'symbol-placement': 'line',
            'symbol-spacing': 50, // 圖標間隔，默認爲250
            'icon-image': 'arrowIcon', //箭頭圖標
            'icon-size': 0.5
        }
    });
}

然而，爲實現上述效果，確走了很多彎路。曾嘗試集成Leaflet.PolylineDecorator插件核心算法，經過對線的處理，計算每一個箭頭所在位置以及角度，也能實現上述效果。不過該方案在地圖傾斜旋轉後，有時會有箭頭偏移的bug。

在解決此bug過程當中，不經意間看到道路標註都是沿道路線方向，忽然有了新的靈感。

從新查看mapboxgl API，發現將layout中的symbol-placement設置爲line，便可實現沿着線的方向繪製箭頭。

注意：

1. 我所用圖標爲右側方向箭頭，結果與實際方向相符，若是圖標爲向上箭頭，需修改icon-rotate爲90。
2. 只把symbol-placement設置爲line，箭頭間距過於稀疏；須要設置下symbol-spacing參數，symbol-spacing默認值爲250，修改成50便可實現文章首頁圖片效果。

在線示例

在線示例：http://gisarmory.xyz/blog/index.html?demo=MapboxGLPolylineDecorator

代碼地址：http://gisarmory.xyz/blog/index.html?source=MapboxGLPolylineDecorator

---

原文地址：http://gisarmory.xyz/blog/index.html?blog=MapboxGLPolylineDecorator。

關注《GIS兵器庫》公衆號， 第一時間得到更多高質量GIS文章。

本文章採用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。歡迎轉載、使用、從新發布，但務必保留文章署名《GIS兵器庫》（包含連接：  http://gisarmory.xyz/blog/），不得用於商業目的，基於本文修改後的做品務必以相同的許可發佈。