軌跡系列4——WebGIS中使用ZRender實現軌跡前端動態播放特效

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

1.背景

項目中須要在地圖上以時間軸方式播放人員、車輛在地圖上的歷史行進軌跡。在以前的博客中咱們談到了如何對軌跡數據進行濾波、平滑、聚類等，均是爲讓軌跡線變得簡化優美，這裏咱們將和你們一塊兒探討如何將軌跡以播放的效果在前端地圖上展現。

2.技術選型

2.1選型結論

GIS的前端框架咱們選用的是AGS JS（3.18）。選這個前端框架主要是基於瀏覽器的支持狀況，咱們要求IE9及以上瀏覽器等均能支持（僅二維場景），可是目前最新的4.0及以上版本等因爲使用上了WebGL技術來支持三維場景，致使瀏覽器需是IE11以上。如下是目前各瀏覽器版本對WebGL的支持狀況，其中紅色是不支持，綠色是徹底支持，其餘顏色是部分支持：

 

在AGSJS3.18這個版本中，瓦片展現依然是基於DIV，而全部的前端要素展現依然是基於SVG，而咱們將要實現的軌跡播放特效則在canvas上實現則是更加好的方案，因此這裏咱們首先要進行兩個技術的預研：

a.如何在AGSJS環境中自定義一個基於Canvas的圖層。

b.是否基於Canvas的前端框架實現繪製。

2.2預研結論

a.繼承AGS的layer模塊，重寫部分核心方法。具體如何完成自定義圖層，你們能夠參考個人以前的一篇博客：基於AGS JS開發自定義貼圖圖層 （http://www.cnblogs.com/naaoveGIS/p/6576420.html）。

b.爲便於一些描繪特效的實現，採用基於Canvas的框架（ZRender）來進行繪製。ZRender（Zlevel Render） 是一個輕量級的Canvas類庫(http://ecomfe.github.io/zrender/)，相似的類庫有Kinetic.JS、EaselJS，可是國內使用用戶沒有Zrender用戶多。百度強大的圖表工具eCharts就是在ZRender基礎上創建。其特色如自身的口號所宣傳：

            

3.初步實現

這裏咱們首先須要完成一個專門進行軌跡描繪的基於Canvas的自定義圖層。

a.繼承Layer，重寫_setMap和_unsetMap函數，在該函數中使用ZRender完成Canvas的建立:

        

b.獲取到軌跡點集，使用ZRender進行點和線的描繪：

        

c.監聽地圖的平移、縮放、地圖外框變化事件，在這些事件被觸發時使用ZRender進行重繪（這裏須要重點注意的是每次重繪時要將地理座標轉換成對應的平面座標）：

    

完成以上步驟後，已經能夠在地圖上看到一個靜態的、可隨地圖變化而重繪的軌跡：

                 

4.展現效果初步優化

目前有如下幾個問題：

a.若是將每一個軌跡點都描繪出來，地圖級別很小時會彙集在一處致使軌跡線不可見。

b.有些軌跡點之間時間跨度太大，鏈接起來會致使軌跡線出現穿牆的問題。

針對以上兩個問題，首先採用熱力圖來取代軌跡點的展現。對於兩點時間間隔超過閾值的軌跡點，不進行鏈接，以信號丟失來提示：

                       

5.動態播放效果的實現

5.1初步實現

所謂軌跡播放，其核心是指隨着時間軸的自動滑動，表明人員或車輛的圖標在軌跡線上進行移動展現。咱們總結播放須要實現的功能有：播放、暫停、重置、進度拖拽、快進。

以播放爲例來描述便是：經過setInterval函數的觸發，在該函數中進行對應圖標隨座標變化的展現。

可是僅僅是一個圖標的移動，將是特別單調的效果。

5.2播放效果的優化

a.實現平滑移動的效果，將兩個相鄰的線段根據圖標像素寬度劃分切割，進行每次的移動。

b.對每種圖標作出16向圖，每次平移時計算出方位角度，從而使用對應的圖標方位圖。

c.對於已經走過的軌跡，用不一樣顏色的軌跡線進行標識。

5.3播放效果展現

                                  

6.結合信息挖掘的展現

信息挖掘中，咱們能夠知道軌跡的停留點、相關事件結合點、信號丟失點、里程數和排名等等信息，結合軌跡能夠進行綜合展現：

                               

7.軌跡展現的進一步優化

目前展現方式中，當軌跡爲靜態時沒法看出軌跡的方向，這裏咱們將對軌跡附上箭頭來表示方向。設計爲，外框來表示軌跡線，內中填充箭頭線。其中箭頭的寬展、長度、兩點間填充的箭頭數目等均需進行考慮。這其中，對於箭頭的各個方向時的點座標，須要不斷以箭頭頂端點和線方向進行聯和換算最爲麻煩。這裏咱們給出換算公式和部分代碼：

      

最後的效果圖爲：

                   

8.總結

以上全部步驟的完成，都是基於最原始的歷史軌跡，如下爲本次實驗的原始軌跡（用Arcmap加載）:

                      

這其中優化涉及到的算法層優化頗多，最核心部分爲基於卡爾曼濾波的優化算法以及基於時間和距離的聚類處理。後者我在博客——經過時間及距離維度進行軌跡聚類平滑的一種方案（http://www.cnblogs.com/naaoveGIS/p/6653907.html）中作了比較詳細的描述，後面我將跟你們一塊兒探討如何基於卡爾曼濾波進行軌跡優化。

 

                               

                                                                   -----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

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