前面寫了篇文章，[mapboxgl實現帶箭頭軌跡線](http://gisarmory.xyz/blog/index.html?blog=MapboxGLPolylineDecorator)，介紹瞭如何基於mapboxgl實現類似高德地圖導航軌跡效果。 近期有基於Leaflet實現軌跡回放的需求，於是研究了下如何基於leaflet來實現。 下圖是我基於leaflet實現的效果。  接下來分享一下在我基於leaflet實現該效果時一些思路以及踩到的坑。 ### 軌跡線新增箭頭效果 leaflet無法像`mapboxgl`似的直接通過樣式實現軌跡箭頭效果，需要通過引用[L.polylineDecorator](https://github.com/bbecquet/Leaflet.PolylineDecorator)擴充套件實現。核心程式碼如下。 注意：此處新增箭頭圖層應在軌跡線和實時軌跡線之後，不然箭頭會被覆蓋。  ### 沿軌跡線帶方向動態marker 實現該效果首先想到的是類似之前在用mapboxgl 實現的思路，將線打斷，然後通過[requestAnimationFrame](https://blog.csdn.net/vhwfr2u02q/article/details/79492303)迴圈更新marker的位置和角度實現；這種方式最終可以實現動態效果，但是流暢度差了一些，會有卡頓的現象。 為了得到更流暢的效果，又翻看[Leaflet Plugins](https://leafletjs.com/plugins.html)，搜尋`animate`關鍵字，發現了[Leaflet.AnimatedMarker](https://github.com/openplans/Leaflet.AnimatedMarker)，動畫效果挺流暢的，於是拉取程式碼研究了一下。 該外掛主要是使用CSS3動畫來實現marker線上段間的移動，所以效果比較流暢。 但是該外掛並未考慮marker角度的問題，而且在做地圖縮放的時候會有`marker`偏移軌跡的問題。查詢相關資料時，發現有人也嘗試解決此問題[leaflet-moving-marker](https://github.com/mohsen1/leaflet-moving-marker)。 但這裡對於軌跡線的動態繪製並未考慮。 參考`Leaflet.AnimatedMarker`、`leaflet-moving-marker`中核心程式碼並考慮我們要實現的效果，最終解決了角度問題以及軌跡線動態繪製問題。  另外，在播放過程中當前後兩個點位角度變化超過180度時，會出現`marker`旋轉的問題。  通過如下程式碼我們解決了此問題。  我們把程式碼重新封裝，簡單呼叫即可實現了文章開頭的軌跡帶箭頭以及沿軌跡線帶方向的動態`marker`。  注意：在動態播放的過程中縮放地圖，標記點由於播放延遲，有時仍然會出現偏離軌跡線的問題，目前該問題暫未解決，後續解決後更新。 ## 總結 1. 使用用`L.polylineDecorator`外掛可以實現軌跡帶箭頭效果。 2. `Leaflet.AnimatedMarker`外掛可以更流暢的實現marker沿線播放，但是沒有考慮`marker`角度和軌跡線的動態繪製。 5. 參考`Leaflet.AnimatedMarker`、`leaflet-moving-marker`中核心程式碼，解決角度問題以及軌跡線動態繪製等問題。 6. 將程式碼重新封裝成外掛，方便呼叫。 ## 線上示例 線上示例：[http://gisarmory.xyz/blog/index.html?demo=LeafletRouteAnimate](http://gisarmory.xyz/blog/index.html?demo=LeafletRouteAnimate) 示例程式碼地址：[http://gisarmory.xyz/blog/index.html?source=LeafletRouteAnimate](http://gisarmory.xyz/blog/index.html?source=LeafletRouteAnimate) 外掛地址：[http://gisarmory.xyz/blog/index.html?source=LeafletAnimatedMarker](http://gisarmory.xyz/blog/index.html?source=LeafletAnimatedMarker) * * * 原文地址：[http://gisarmory.xyz/blog/index.html?blog=LeafletRouteAnimate](http://gisarmory.xyz/blog/index.html?blog=LeafletRouteAnimate)。 關注《[GIS兵器庫](http://gisarmory.xyz/blog/index.html?blog=wechat)》， 第一時間獲得更多高質量GIS文章。  本文章採用 [知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 ](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh)進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名《GIS兵器庫》（包含連結：  [http://gisarmory.xyz/blog/](http://gisarmory.xyz/blog/)），不得用於商業目的，基於本文修改後的作品務必以相同的許可