軌跡系列11——多車輛實時跡展現方案

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

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