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