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

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

0 引 言

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

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

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

1 研究區(qū)與數(shù)據(jù)

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

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

2 總體設計

2.1 架構設計

系統(tǒng)采用B/S架構，按四層模型，即數(shù)據(jù)服務層、地圖服務層、業(yè)務邏輯層、客戶層來構建系統(tǒng)，如圖1所示。

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

2.2 數(shù)據(jù)庫設計

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

圖2 數(shù)據(jù)庫設計

2.3 軟硬件配置

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

圖3 系統(tǒng)功能模塊圖

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

2.4 詳細設計

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

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

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

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

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

圖4 熱力圖流程圖

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

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

圖5 軌跡可視化流程圖

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

圖6 軌跡查詢流程圖

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

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

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

3 系統(tǒng)實現(xiàn)

3.1 數(shù)據(jù)庫建庫

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

3.2 關鍵技術

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

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

圖7 動態(tài)加載流程圖

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

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

3.3 功能實現(xiàn)

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

圖8 系統(tǒng)主界面

圖9 統(tǒng)計分析

圖10 熱力圖

圖11 軌跡可視化

圖12 船舶詳細信息

圖13 軌跡查詢結果

4 結 語

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

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