軌跡系列12——單軌跡展現效果的進一步優化（流動箭頭）

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：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/

                                                                      　　　　    若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^