南海艦船數據可視化分析系統設計與實現

王桃蘋 王加勝* 王 健 劉宇晨

1(云南師范大學信息學院 云南 昆明 650500)2(西部資源環境地理信息技術教育部工程研究中心 云南 昆明 650500)

0 引 言

南海作為一道我國通向世界的海上大門，憑借得天獨厚的位置優勢、資源優勢，在我國經濟貿易、對外交流中起著舉足輕重的作用。近年來，南海漁船事故、海上沖突爭端、海盜活動時有發生，軍事活動愈加頻繁，研究南海艦船的分布特點及軌跡規律對改善艦船運行環境、提升南海航道的安全可以起到分析參考作用，為相關政策、法規的制定提供決策支持依據，對維護祖國領土完整和保障地區和平有著重大意義。

目前，基于地圖服務的船舶數據可視化分析系統在學術方面的研究呈現出國內多國外少的趨勢。國內比較典型的有：采用B/S架構，基于OpenLayers(開源地圖引擎)開發了基于AIS的船舶軌跡分析與應用系統[1]；采用MapInfo MapXtreme提供地圖服務，設計并實現了基于WebGIS的港口船舶動態可視化系統[2]；基于ArcGIS Server開發了B/S架構的AIS動態船舶管理系統，實現了地圖信息瀏覽、AIS數據解析、AIS船舶對象的顯示、查詢、跟蹤、統計、回放等功能[3]；采用B/S和C/S相結合的混合架構，基于Geomedia組件技術，使用C#和ASP.Net開發了基于GIS的船舶監控系統，實現數字地圖的顯示及操作、報警處理、航行軌跡回放及歷史數據調閱等功能[4]；使用高德地圖作為基礎底圖，采用B/S架構，使用Node.js、MongoDB與WebGL等相關技術開發了基于WebGL的船舶大數據可視化原型系統[5]；采用C/S架構，使用百度地圖作為基礎底圖，以Android客戶端+服務器+數據庫的模式開發了基于Android船舶動態實時監控系統，實現了以船舶實時監控、船舶信息查詢、船舶到岸提醒等為主要功能的手機應用[6]等。國外方面使用MAPServer作為分析平臺，基于OpenLead和ExtJS實現了集地圖操作、船只定位、軌跡回放、船舶檢測報警等為一體的船舶監控系統[7]。

綜上所述，國內外研究多數采用B/S架構、C/S架構，結合OpenLayers、Arcgis Server、Geomedia、百度地圖、高德地圖等，呈現出多樣性，鮮有采用WebGL等其他技術對船舶數據分析結果進行展示。因此探索可視化、圖表等技術在有關艦船問題上的應用也顯得有意義。本文基于百度地圖、南海艦船數據，結合可視化相關技術，設計了南海艦船可視化分析系統，給出了可視化技術、圖表技術等在艦船數據中應用的解決方案，探索了大數量下如何保證系統穩定運行的方法。

1 研究區與數據

南海位于中國大陸南方，南北介于赤道與北回歸線之間(3°N～23°37′N)，西起東經99°10′，東至東經122°10′，資源物產豐富，是中國近海中面積最大、水最深的區域。在政治上因為其是我國通往歐洲、非洲、東南亞等國家的咽喉要道，自古以來便是兵家必爭之地，戰略地位十分重要。南海海上貿易往來頻繁，37條世界交通航線在此經過，同時也是我國通向東南亞、新加坡等國的交通要道，扮演著經濟發展與對外開放的紐帶。

本文系統使用到的數據有地圖數據、南海艦船數據。地圖數據來自百度地圖(在線)，其提供了包括道路圖層、興趣點圖層、行政區劃圖層在內的主要數據以及河流、海域等數據。艦船數據來自船訊網所購買AIS數據，數據涵蓋了2015年11月30日-2015年12月2日三天共159萬多條關于南海艦船的詳細信息，其中包括了船名、艦船編號、呼號、船舶吃水深度、船舶長寬、航向、經緯、度、時間等信息。

2 總體設計

2.1 架構設計

系統采用B/S架構，按四層模型，即數據服務層、地圖服務層、業務邏輯層、客戶層來構建系統，如圖1所示。

客戶層中用戶通過瀏覽器瀏覽查看艦船點數據、熱力圖、艦船軌跡等經由服務器對數據進行處理的結果。業務邏輯層主要是服務器端對瀏覽器端所請求的數據和操作進行分析處理，包括對艦船數據的統計分析、熱力圖、精確軌跡查詢、全部軌跡、艦船搜索等。數據服務層包含一個總體數據庫(南海艦船數據可視化與分析系統數據庫)和三張表(艦船信息表、用戶信息表、艦船軌跡表)。

2.2 數據庫設計

該系統的數據庫由一個總體數據庫構成，其中包含三張表，如圖2所示。設計時綜合考慮性能、需求等因素,為系統提供穩定可靠的數據服務。

圖2 數據庫設計

2.3 軟硬件配置

南海艦船數據可視化與分析系統主要功能包括：艦船數據顯示、艦船數據詳細信息展示、搜索功能、熱力圖功能、詳細軌跡查詢功能、艦船各類信息統計分析功能、軌跡可視化等，如圖3所示。系統對軟件硬件的性能要求具體見表1。

圖3 系統功能模塊圖

接口軟件環境操作系統Windows 10處理器Intel(R) Core(TM) i7-4710HQ CPU @ 2.50GHz主板聯想 KL6(英特爾 HM65 芯片組 )內存8 GB數據庫管理系統MySQL開發環境WebStorm服務器WAMPSERVER 3.1.3(集成服務器)開發語言HTML、CSS、JavaScript、PHP主要類庫Echarts、Jquery、百度地圖熱力圖庫、百度地圖大數據可視化庫地圖服務百度地圖JS API瀏覽器Chrome 66.0.3359.139、Firefox 59.0.3

2.4 詳細設計

以南海艦船軌跡可視化分析系統中幾個主要功能設計為例說明該系統功能模塊的詳細設計情況。

1) 基礎功能模塊。主要是針對底圖的一些操作和輔助功能，利用百度地圖API提供的方法可以快速實現地圖的基礎功能。該系統中添加的基礎功能主要有：鼠標縮放、衛星/普通地圖切換、鷹眼、比例尺。

2) 時間軸功能模塊。時間軸使用Echarts繪制，將24小時以每5分鐘的間隔分割，用戶點擊時間軸上的時間點后會加載對應時間點前后3分鐘內的數據。時間軸功能的主要目的是控制數據量的多少。采用時間軸功能從時間點上將數據分離開，既保證了的系統的穩定性，也能更加清楚地呈現數據。除此之外，如果用戶先進行了熱力圖等操作，隨后使用時間軸改變時間，則會因為數據的改變從而使熱力圖也動態改變。

3) 搜索功能模塊。由搜索建議和定位到目標組成。搜索建議：當用戶在搜索框中鍵入少量的字符串或文字時，根據用戶鍵入的信息提供現有船名以列表的形式供用戶選擇。定位到目標：當用戶點擊搜索時根據用戶選擇的結果將地圖縮放到對應目標。

4) 熱力圖模塊。熱力圖使用百度地圖開源庫“熱力圖庫”來實現，其基于HTML5新特性canvas。基本原理是：為每個離散點創建mask(一個圓形區域)，mask的半徑表示該點影響的范圍，半徑可取區間(1～10米)。為中心點賦予權重1，從中心點沿半徑向外按某種規律(線性、二次曲線)減小，邊緣區域權重為0。最終為每個離散點創建mask，如果有重疊區域則將該重疊區域的權重累加。權重越高，該區域越密集，表現在圖像上就越亮。流程圖如圖4所示。

圖4 熱力圖流程圖

熱力圖直觀反映了船舶集中分布的情況，發現“冷區”與“熱區”，從而針對不同地區采取不同措施提升航道安全。繪制熱力圖需要用到的數據有經度、緯度、權重(均為1)，用戶點擊熱力圖功能后會清空當前地圖上的信息并向服務器請求數據。服務器返回數據后通過構造數據使其變成百度熱力圖庫支持的數據類型后通過heatmapOverlay.setDataSet()方法創建熱力圖。如果用戶切換了熱力圖半徑，則會清除當前熱力圖，然后再次請求數據并根據所選半徑進行繪制。

5) 軌跡可視化模塊。軌跡可視化展現了當天(用戶設置的時間)的全部艦船軌跡，軌跡反映了艦船的流向狀態，顏色越亮的地方表示軌跡越密集。軌跡可視化分為空間和時間兩個部分，空間上繪制軌跡效果，時間上繪制動畫效果，其具體流程如圖5所示。軌跡可視化需要獲取艦船軌跡點經緯度坐標、船名、時間戳等信息，然后使用AJAX將該時間發送給服務器，服務器連接數據庫后，以該時間為條件查詢符合條件的數據并返回，前端接收返回數據后將數據構造成為百度大數據可視化庫所支持的數據結構，最后通過mapv.baiduMapLayer()方法實現。

圖5 軌跡可視化流程圖

6) 軌跡查詢模塊。軌跡查詢可以精確查詢一艘船指定時間段內的軌跡，并計算出軌跡長度，具體流程如圖6所示。

圖6 軌跡查詢流程圖

具體過程如下：用戶確定船名，設置起始時間后通過AJAX發送至服務器。服務器接收后并將其作為查詢條件連接數據庫進行查詢，查詢結果為一系列經緯度點(已按時間進行升序排列)，并返回。前端接收處理返回數據，使用經緯度點坐標集通過polyline折線繪制軌跡線段，計算軌跡線相鄰兩點間的距離累加后得到整個軌跡的長度，最后使用secCenter()方法將地圖縮放至軌跡起點。

7) 統計分析模塊。統計分析使用數據可視化圖表庫Echarts，通過該功能可以直觀地看出有關艦船的各類信息(船速、吃水深度、長寬、航向等)。該功能主要體現在多種圖表的應用上，具體涉及直方圖、折線圖、扇形圖、雷達圖的應用。不同的圖表有不同的配置項(具體請參閱Echarts開發文檔)，分析每種圖表x軸和y軸分別對應什么數據更為合適后就可以對數據進行處理了，然后通過Echarts.setOption()實現。直方圖的關鍵在于對數據(船速)的排序工作。船速升序直方圖和吃水深度圖均采用該方法對數據進行排序處理。扇形圖需要對相應的頻數進行統計，雷達圖則按配置指定數據即可。

8) 其他功能。包括設置地圖樣式和注冊登錄功能。地圖樣式提供了多種顏色方案，用戶可以隨意進行切換從而改變地圖背景顏色。

3 系統實現

3.1 數據庫建庫

系統的數據庫由百度地圖數據庫和本地數據庫兩部分組成。前者直接調用百度地圖API獲取。本地數據庫中數據研究采用了 NOAA 國家氣候數據中心網站提供的VOSCLIM 數據。最后，將得到的數據以db格式導入MQL，數據庫建庫完成。

3.2 關鍵技術

1) AJAX。一種創建交互式網頁應用的網頁開發技術。通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新[8]。該系統中向服務器發出的請求均使用AJAX來完成。

2) 動態加載(艦船位置可視化)。受數據量大、計算機性能、內存、瀏覽器等多因素的影響，直接在地圖上加載當前時刻的全部數據，會造成系統卡頓和崩潰等情況。結合實際，該系統最終采取動態加載的方案，即通過地圖縮放級別和地圖可視范圍判斷應添加的數據類型和數據量，從而減輕瀏覽器、服務器的壓力，保證系統穩定高效運行。動態加載流程圖如圖7所示。

圖7 動態加載流程圖

(1) 根據地圖縮放級別加載。地圖縮放級別零界為14級(對應地圖比例尺1 km)。縮放級別小于14級：采用的是百度地圖提供的海量點(PointCollection)來替代marker。海量點和marker的區別在于，marker除了顯示點的位置還可以為marker添加諸如事件、信息窗口等具體內容，而海量點更多的是向用戶提供數據點的一種位置關系，并非具體內容，在數據較多時顯然性能要優于marker。大于14級：因比例尺增大，地圖上顯示的內容較少、較詳細，可采用marker，在展示數據的同時為每個marker添加了具體信息，用戶可以查看其具體內容。根據地圖縮放級別確定加載何種類型數據后大大提升了運行效率。

(2) 根據地圖可視范圍加載。獲得地圖區域的左下角坐標(x1,y1)和地圖區域的右上角坐標(x2,y2)。x1≤x≤x2即為當前可視范圍內經度范圍區間，y1≤y≤y2即為當前可視范圍內緯度范圍區間。向服務器進行數據請求時，使用x1、x2、y1、y2作為查詢條件從數據庫中查詢該經緯度范圍內的數據實現動態加載。根據地圖可視范圍加載當前可視區域內的數據保證了系統的穩定性，減輕了數據壓力。

3.3 功能實現

根據詳細設計的過程，通過HTML、CSS、JavaScript、PHP語言和Web開發平臺實現了艦船數據顯示、艦船數據詳細信息展示、搜索功能、熱力圖功能、詳細軌跡查詢功能、艦船各類信息統計分析功能、軌跡可視化等功能。圖8為系統主界面的運行效果，圖9-圖13為各功能模塊運行效果。

圖8 系統主界面

圖9 統計分析

圖10 熱力圖

圖11 軌跡可視化

圖12 船舶詳細信息

圖13 軌跡查詢結果

4 結 語

針對南海海域復雜、艦船數量眾多、艦船信息不直觀等問題，利用可視化相關技術、圖表技術，設計了南海艦船數據可視化與分析系統，達到了直觀、高效、多角度展現、分析艦船數據的目的，對探索艦船規律、南海航道安全評價起到了參考作用。

南海在我國有著重要地位，對南海艦船的研究對于提升南海安全有積極作用。因對海量數據的存儲工作做得還不夠好，僅有百萬級數據，并沒有全部添加(千萬級)。另外在軌跡可視化方面還沒能處理好時間維長時間運行導致系統卡頓的問題。整個系統的優化工作做得還不夠好，不論是在瀏覽器兼容性還是頁面布局上都還有待提高。目前，在針對船舶數據分析挖掘的問題上，已有學者[9-15]從多方面進行了深入的研究，后續還可以考慮在該系統中加入軌跡聚類分析、船舶預警、船舶行為分析等功能，使之更加完善。