前面寫了篇文章，mapboxgl實現(xiàn)帶箭頭軌跡線涩盾，介紹了如何基于mapboxgl實現(xiàn)類似高德地圖導(dǎo)航軌跡效果画畅。
近期有基于Leaflet實現(xiàn)軌跡回放的需求，于是研究了下如何基于leaflet來實現(xiàn)仑乌。
下圖是我基于leaflet實現(xiàn)的效果。
接下來分享一下在我基于leaflet實現(xiàn)該效果時一些思路以及踩到的坑。
軌跡線添加箭頭效果
leaflet無法像mapboxgl似的直接通過樣式實現(xiàn)軌跡箭頭效果缩焦，需要通過引用L.polylineDecorator擴展實現(xiàn)。核心代碼如下责静。
注意：此處添加箭頭圖層應(yīng)在軌跡線和實時軌跡線之后袁滥，不然箭頭會被覆蓋。
沿軌跡線帶方向動態(tài)marker
實現(xiàn)該效果首先想到的是類似之前在用mapboxgl 實現(xiàn)的思路灾螃，將線打斷题翻，然后通過requestAnimationFrame循環(huán)更新marker的位置和角度實現(xiàn)；這種方式最終可以實現(xiàn)動態(tài)效果腰鬼，但是流暢度差了一些嵌赠，會有卡頓的現(xiàn)象塑荒。
為了得到更流暢的效果，又翻看Leaflet Plugins姜挺，搜索animate關(guān)鍵字齿税，發(fā)現(xiàn)了Leaflet.AnimatedMarker，動畫效果挺流暢的炊豪，于是拉取代碼研究了一下偎窘。
該插件主要是使用CSS3動畫來實現(xiàn)marker在線段間的移動，所以效果比較流暢溜在。
但是該插件并未考慮marker角度的問題陌知，而且在做地圖縮放的時候會有marker偏移軌跡的問題。查找相關(guān)資料時掖肋，發(fā)現(xiàn)有人也嘗試解決此問題leaflet-moving-marker仆葡。
但這里對于軌跡線的動態(tài)繪制并未考慮。
參考Leaflet.AnimatedMarker志笼、leaflet-moving-marker中核心代碼并考慮我們要實現(xiàn)的效果沿盅，最終解決了角度問題以及軌跡線動態(tài)繪制問題。
另外纫溃，在播放過程中當(dāng)前后兩個點位角度變化超過180度時腰涧，會出現(xiàn)marker旋轉(zhuǎn)的問題。
通過如下代碼我們解決了此問題紊浩。
我們把代碼重新封裝窖铡，簡單調(diào)用即可實現(xiàn)了文章開頭的軌跡帶箭頭以及沿軌跡線帶方向的動態(tài)marker。
注意：在動態(tài)播放的過程中縮放地圖坊谁，標(biāo)記點由于播放延遲费彼，有時仍然會出現(xiàn)偏離軌跡線的問題，目前該問題暫未解決口芍，后續(xù)解決后更新箍铲。
總結(jié)
- 使用用
L.polylineDecorator插件可以實現(xiàn)軌跡帶箭頭效果。 -
Leaflet.AnimatedMarker插件可以更流暢的實現(xiàn)marker沿線播放鬓椭，但是沒有考慮marker角度和軌跡線的動態(tài)繪制颠猴。 - 參考
Leaflet.AnimatedMarker、leaflet-moving-marker中核心代碼小染，解決角度問題以及軌跡線動態(tài)繪制等問題翘瓮。 - 將代碼重新封裝成插件，方便調(diào)用氧映。
在線示例
在線示例：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春畔。
關(guān)注《GIS兵器庫》， 第一時間獲得更多高質(zhì)量GIS文章。
本文章采用 知識共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議 進行許可律姨。歡迎轉(zhuǎn)載振峻、使用、重新發(fā)布择份，但務(wù)必保留文章署名《GIS兵器庫》（包含鏈接： http://gisarmory.xyz/blog/）扣孟，不得用于商業(yè)目的，基于本文修改后的作品務(wù)必以相同的許可發(fā)布荣赶。
