基于Flask和Vue的AIS數據分析系統設計與開發

任丹 侯英姿 王方雄 姜來

摘? 要： 為了更好的利用AIS數據，使用前后端分離的方法設計和開發了AIS數據分析系統，在本文中著重對此系統的整體架構和技術路線進行介紹。系統基于Python語言的Flask框架搭建后端數據和計算服務，前端基于Vue.js框架搭建頁面，最終實現了基礎信息展示、數據統計和可視化及聚類分析分析等功能。

關鍵詞： AIS數據;Flask;Vue;WebGIS

中圖分類號： TP311.52? ? 文獻標識碼： A? ? DOI：10.3969/j.issn.1003-6970.2019.10.025

本文著錄格式：任丹，侯英姿，王方雄，等. 基于Flask和Vue的AIS數據分析系統設計與開發[J]. 軟件，2019，40（10）：111114+120

The Design and Development of AIS Data Analysis System Based on Flask and Vue

REN Dan1，2， HOU Ying-zi1，2， WANG Fang-xiong1，2， JIANG Lai1，2

（1. Liaoning Key Lab of Physical Geography and Geomatics， Liaoning Normal University， Dalian 116029， China;

2. School of Urban and Environmental Sciences， Liaoning Normal University， Dalian 116029， China）

【Abstract】： In order to make better use of AIS data， we designed and developed AIS data analysis system by using the method of front-back stage decoupling， and introduced the architecture and technical route of this system in this paper. The backend data and computing service is based on the Flask web framework， the frontend page is based on Vue.js Framework， at last we realized some functions like basic information display、data statistics and visualization、clustering analysis and so on.

【Key words】： AIS data; Flask; Vue; WebGIS

0? 引言

在貿易全球化的今天，河運與海運作為傳統的運輸方式，憑借著運量大、運費低的優勢仍然是各種長途物流的重要選擇，船舶交通日益繁忙。而AIS（船舶自動識別系統）通過各種船載、星載及岸基設施間相互鏈接實現信息交換，極大方便了海上交通實況識別和監管，有利于海上船舶交通安全和實施交通規劃[1，2]。

無論是實時還是歷史的AIS數據都有很大的利用價值[3]。隨著計算機和網絡技術的快速發展[4]，目前已有使用各種解決方案設計和開發的AIS信息服

務平臺，但這些平臺功能局限于基本的數據查詢，未能進一步對AIS數據進行分析挖掘。在本文中介紹了使用Flask、Vue.js等技術框架構建一款WebGIS系統[5-7]——AIS數據分析系統，通過實現各種可視化分析功能來挖掘更多AIS數據的時空信息，實現AIS數據更大的利用潛力。

1? 系統架構設計

AIS數據分析系統是采用B/S模式（瀏覽器/服務器）的Web應用，用戶通過瀏覽器來訪問。技術結構如圖1所示，系統采用前后端分離的設計思想[8]，AIS數據存儲在PostgreSQL數據庫中。前端工程與后端工程分離開發，后端部分采用Python語言的Flask框架搭建，前端頁面則使用Vue.js框架搭建，然后通過RESTful API接口使用json進行數據交互。前后端應用開發完成后再分別部署在Nginx服務器上。

1.1? 數據庫設計

AIS數據量大而雜，為保障系統對數據的訪問速度和效率，選擇PostgreSQL作為存儲數據庫。PostgreSQL是一個功能強大，開源對象關系型數據庫系統，與其它關系型數據庫相比具有更好的數據一致性和可靠性[9]。選取2017年某一天時間段內全球范圍的AIS數據預處理后作為示例數據，存儲在數據庫中，數據庫內包含兩張表--Pos表存儲船舶動態信息，Shipinfo表存儲船舶靜態信息。兩張表中各字段的類型和說明如下表所示。

1.2? 服務端設計

Flask是使用Python編寫的基于MVC設計模式的Web應用框架，具有輕量，擴展性強的特點。服務端程序通過ORM工具SQLAlchemy實現對數據庫的增刪改查，并通過NumPy、Scikit-learn等第三方庫對數據進行處理和計算，并將結果整理成合適的json數據的格式通過Flask框架以URL的訪問形式發布為RESTful API服務來供前端程序調用。

1.3? Web前端設計

前端應用工程是基于Vue.js的腳手架工具Vue- cli構建的SPA（單頁面應用程序）項目。Vue.js是一個輕巧、高性能的用于構建用戶web界面的漸進式框架，其數據綁定和組件化的特點可以幫助開發人員更方便快速的創建Web應用[10]。通過Vue-cli快速搭建項目，然后通過NPM包管理工具來下載和管理使用到的JavaScript包，并配合Webpack來打包整個前端程序。使用Element-UI框架中的組件來搭建整體頁面，使用經過組件化后的Echarts和百度地圖等開源JavaScript庫來實現地圖和圖表的顯示。

Element-UI是一套基于Vue2.0的桌面端組件庫，提供了許多用于適用于構建桌面端web應用的組件。系統主界面使用Container布局容器將整體布局分為三部分：頂欄，側邊欄和主要區域。側邊欄

用于功能導航，點擊某一功能選項，會通過Vue- router跳轉到具體的功能頁面，功能頁面會顯示在主要區域容器中。主要區域右側有一個操作框，容納對具體功能操作的一些選項，并通過底側的按鈕控制顯示和隱藏。

2? 系統實現

2.1? 功能實現

系統除了基本的地圖顯示功能和數據查詢之外，還將利用AIS數據中的地理位置信息、時間信息以及各類型靜態屬性信息實現各種統計和可視化功能，并通過聚類算法對AIS點數據進行分析。

2.1.1? 地圖顯示

地圖功能主要使用封裝自百度地圖JavaScript API的開源地圖組件庫Vue Baidu Map。組件庫提供的地圖和地圖覆蓋物組件能夠實現位置信息在地圖上以點、線、面以及信息窗體的形式顯示。地圖的其它功能如縮放、鷹眼、比例尺等則通過調用相應控件并設置適當的屬性實現。另外針對國內地理坐標系位置偏移的問題，通過程序來判斷位置坐標是否位于國內，若是則將數據默認的WGS-84坐標轉換為BD坐標系坐標。

2.1.2? 數據查詢

基于AIS數據庫中的字段設計基本的按時間（UpdateTime、InsertTime）和位置（Lat、Lon）的查詢功能。輸入框輸入要查詢信息的時間范圍，或經緯度范圍，通過axios的get請求，將請求參數發送到服務端程序中，服務端根據參數使用SQLAlchemy從數據庫中的Pos表中查詢并取出mmsi號碼、航行狀態等動態信息，或者從ShipInfo表中查詢取出船名，船舶類型等靜態信息組織成json格式，再通過響應返回到客戶端。客戶端接收后將數據在地圖或者表格中顯示。

2.1.3? 統計和可視化

統計功能分為按時間或位置的船舶通行數量統計等。通過編寫服務端算法，根據發送的各種條件參數計算并返回結果值，前端使用封裝自數據庫可視化工具Echarts.js的組件庫Vcharts中的折線圖、柱狀圖和餅狀圖等來展示。

可視化功能分為熱力圖和聚散點，分別通過將含有位置信息的點數據作為屬性賦值給地圖組件庫中的熱力圖和點聚合組件實現。熱力圖以特殊高亮的形式在地圖上顯示AIS數據密集程度，根據密度程度的不同顯示不同顏色，以直觀形式展現數據密度分布。聚散點通過點聚合的方式在地圖上加載大量點標記，將一定范圍內的所有點聚合為一個點，可以反應這些點的數量和大體位置。

2.1.4? 聚類分析功能

系統的聚類分析功能是針對某一區域一天內所有的船舶航行位置數據進行聚類計算，從得到的結果中，判斷此時空范圍內主要的船舶航行區域，來為航線規劃等提供參考[11]。聚類功能是在服務端調用Scikit-learn庫來計算實現的，Scikit-learn是專門面向機器學習的Python開源庫，實現了很多成熟的算法，包括各種聚類算法。本系統中使用DBSCAN算法進行聚類計算。

DBSCAN算法是一種基于密度的聚類算法，預先設定兩個鄰域參數：（1）eps：在一個點周圍鄰近區域的半徑;（2）minPts：鄰近區域內至少包含點的個數。算法通過檢查數據集中每個點的eps鄰域來搜索簇，若點的領域包含的點的個數多余minPts，則創建一個以此點為核心對象的簇;然后，重復上述方法遍歷此鄰域內其它點，直到建立一個類，當沒有新的點添加到任何簇時結束，不屬于任何簇的點定義為噪聲點。輸出的結果是各個簇的集合。

調用sklearn.cluster模塊中的DBSCAN函數[12]，此函數需要四個參數，分別是搜索半徑，最小點，距離函數以及原數據集。搜索半徑可以通過繪制K-Dist.圖的形式來確定，找出圖上線段突變的距離。然后定義距離函數，對傳入的兩個數組類型坐標點參數進行計算，返回兩點間的距離。輸出值整理成以按簇的值為鍵，點數據的數組集合為值的json字符串。在地圖頁面上以不同的顏色來顯示不同的簇，白色代表噪聲點。

2.2? 系統部署

本系統的前后端項目工程通過Nginx在Linux上分別部署，使用不同的端口號。Nginx是一款高性能的HTTP服務器和反向代理服務器。前端工程使用Webpack進行打包，Webpack是一個前端資源加載/打包工具，可以管理第三方模塊，合并代碼，優化減少代碼體積等。運行打包命令后，整個項目會輸出到一個html文件和js文件，最后將輸出文件以靜態資源的方式在Nginx上部署，通過8080端口訪問。

服務端Flask應用的生產環境則需要uWSGI中間件才能部署到Nginx上。uWSGI實現了WSGI（服務器網關接口）協議，可以將Python程序或框架與Web服務器之間建立接口傳輸。在服務器Python環境中安裝uWSGI，將參數寫入配置文件并啟動程序。然后在Nginx配置文件中啟用HttpUwsgiModule模塊對uWSGI程序進行反向代理并通過3000端口供前端應用訪問api。這樣便可借助Nginx實現服務端的高并發、高性能，大大提高應用程序的訪問? ?效率。

3? 結語

AIS數據展示和分析系統利用地圖可視化形式和地理空間統計分析的方法，對AIS數據的利用價值進行了深度挖掘，從而為船舶航行及航線規劃等提供更多的參考信息。該系統還有許多需要完善的地方，如可以添加更多地理分析功能，以及分析方法的算法方面仍有優化改進的空間，這些都有待進一步的探索。

參考文獻

[1]楊倩. 我國應用星載基站AIS系統研究[J]. 中國海事，2011， 1： 53-55.

[2]劉暢. 船舶自動識別系統（AIS）關鍵技術研究[D]. 大連： 大連海事大學， 2013.

[3]葉仁道， 姜玲， 張瑜. 大數據背景下全球船舶停泊點的數據挖掘分析[J]. 杭州電子科技大學學報： 社會科學版， 2018.

[4]耿直. 大數據時代統計學面臨的機遇與挑戰[J]. 統計研究， 2014， 31（1） ： 5-9.

[5]屈欣宇， 侯英姿， 王方雄.城市管網WebGIS客戶端的設計與開發[J]. 國土與自然資源研究， 2016（05）： 42-43.

[6]王鶴， 王方雄， 徐惠民. 管網巡檢WebGIS設計與開發[J]. 軟件， 2017， 38（07）： 126-129.

[7]徐子惠， 王方雄， 顧雙飛， 等. 城市交通警情WebGIS設計與開發[J]. 軟件， 2018， 39（9）： 166-169.

[8]孫娉娉， 李新， 史廣軍. 基于前后端分離的內容管理系統[J]. 科研信息化技術與應用， 2016（4）.

[9]曾侃. 基于開源數據庫PostgreSQL的地理空間數據管理方法研究[D]. 浙江大學， 2007.

[10]麥冬， 陳濤， 梁宗灣. 輕量級響應式框架Vue.js應用分析[J]. 信息與電腦（理論版）， 2017（7）： 58-59.

[11]趙梁濱， 史國友， 楊家軒. 基于DBSCAN算法的船舶軌跡自適應層次聚類[J]. 中國航海， 2018， 41（03）： 56-61.

[12]Documentation of Scikit-learn 0.21.2/2.3.7 DBSCAN[OL]. （2019）[2019-06-30] https：//scikit-learn.org/stable/modules/ clustering.html#dbscan.