文章版權由作者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/
1. 背景
在PC端展示軌跡的探索中，我們分別針對軌跡糾正、單軌跡播放、多軌跡播放做了研究和實現。其核心抓手便是軌跡的美觀、數據的動態。而除了對監控點實現播放以達到數據的動態展示外，我們還可以從表示軌跡方向的箭頭入手，將其優化為流動的效果以實現軌跡的動態。這一點可以參考易到用車。
2.箭頭描繪的實現（字體方案）
以下為滴滴打車的軌跡描繪：
在前面的博客中《WebGIS中使用ZRender實現軌跡前端動態播放特效》（http://www.cnblogs.com/naaoveGIS/p/6718822.html），我提到了通過數學公式以固定距離構造箭頭的各坐標點以實現軌跡箭頭描繪的方案。
但是該方案對於數學要求相對較高，這里給出另外一種方案來實現箭頭的描繪。
a.在圖標網站上選擇需要的箭頭樣式。
b.將箭頭圖標導出生成為字體庫
c.前端將該字體庫引入
d.組織繪制箭頭對應的樣式
3.箭頭流動的實現
該效果需要完成如下幾個功能點：
a.無論線路方向如何，線段之間的箭頭是等距離
b.箭頭勻速移動
c.箭頭為循環播放
3.1 定時刷新要素重繪機制
目前采用的OpenLayers來進行H5地圖開發，OL中可以通過注冊地圖渲染事件，實現每一次渲染結束時觸發對應函數。
進入到對應的postCompose函數內部后，再通過timer來控制下一次繪制的觸發。
3.2箭頭重繪函數實現
其中涉及到一定的平面幾何，主要集中在箭頭等距的計算，箭頭移動的計算以及箭頭的循環播放計算上。這里直接貼出對應代碼：
4.效果展示
-----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/
如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^
