文章版權由作者李曉暉和博客園共有，若轉載請於明顯處標明出處：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/
如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^
