最近在使用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

線上示例

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

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

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

到此這篇關於mapboxgl實現帶箭頭軌跡線的文章就介紹到這了,更多相關mapboxgl實現帶箭頭軌跡線內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！