文章版權由作者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/
1. 背景
在之前的軌跡系列中，我們詳細的對單個軌跡展示進行了研究，涉及到GPS對接協議、軌跡存儲、軌跡糾正算法、前端軌跡展示。
但是，實際項目中還會有另一類需求：假設武漢市洪山區有300輛警車，在大廳的大屏幕上需要知道所有警車的實時軌跡。這個需求用我們之前的單軌跡展示架構是沒法支撐的。
此時，我們需要對我們的架構以及前端展示方式進行重構。
2.架構設計的幾點思考
a.采用websocket方案重構：傳統的前端定時拉取信息方式不足以支撐實時的數據獲取，並且向后台不斷發送請求獲取所有車輛實時軌跡會對服務器造成十分巨大的壓力。
b.GPS接收后直接通過socket推送：避免先入庫再讀取方式。
c.GPS進行實時的坐標轉換和基於路網的糾正：多軌跡展示中，如果GPS在道路上偏移，會使展示效果格外混亂，所以這里必須進行軌跡的實時糾正。而如何高效的進行軌跡糾正也是一個十分重要的步驟，后篇我們再一起討論。
d.前端多軌跡展示的編寫：目前百度地圖在echarts3中有一個北京公交軌跡展示示例。但是實際項目中，我們是內網的本地地圖。這里需要對echarts3中引用百度地圖bMap的源碼部分進行修改，然后集成至前端框架中。
3.具體實現
3.1WebSocket架構
3.1.1后台
引入javax.websocket-api-1.1.jar，在tomcat7以后，lib中自帶websocketapi.jar。
編寫通信類，比較重要的方法為：
a. Session 與某個客戶端的連接會話，需要通過它來給客戶端發送數據
b. onOpen連接建立成功調用的方法
c.onClose 連接關閉調用的方法
d. onMessage 收到客戶端消息后調用的方法
e. onError 發生錯誤時調用
f.sendMessage 發送消息
3.1.2前端
在HTML5中內置有一些API，用於響應應用程序發起的請求。類似於后台的方法，其基本API語句如下：
創建對象，var ws = new WebSocket(url,name); url為WebSocket服務器的地址，name為發起握手的協議名稱，為可選擇項。
發送文本消息，ws.send(msg);msg為文本消息，對於其他類型的可以通過二進制形式發送。
接收消息，ws.onmessage = (function(){...})();
錯誤處理，ws.onerror = (function(){...})();
關閉連接，ws.close();
3.2echarts3改寫
針對bMap.js的改寫為最重要的改寫
改寫后，在設置參數的options中引入對應改寫的地圖即可：
4.成果展示
-----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/
如果您覺得本文確實幫助了您，可以微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^
