基于Flask和Vue的AIS數(shù)據(jù)分析系統(tǒng)設(shè)計(jì)與開發(fā)

任丹 侯英姿 王方雄 姜來

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

關(guān)鍵詞： AIS數(shù)據(jù);Flask;Vue;WebGIS

中圖分類號： TP311.52? ? 文獻(xiàn)標(biāo)識碼： A? ? DOI：10.3969/j.issn.1003-6970.2019.10.025

本文著錄格式：任丹，侯英姿，王方雄，等. 基于Flask和Vue的AIS數(shù)據(jù)分析系統(tǒng)設(shè)計(jì)與開發(fā)[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? 引言

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

無論是實(shí)時(shí)還是歷史的AIS數(shù)據(jù)都有很大的利用價(jià)值[3]。隨著計(jì)算機(jī)和網(wǎng)絡(luò)技術(shù)的快速發(fā)展[4]，目前已有使用各種解決方案設(shè)計(jì)和開發(fā)的AIS信息服

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

1? 系統(tǒng)架構(gòu)設(shè)計(jì)

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

1.1? 數(shù)據(jù)庫設(shè)計(jì)

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

1.2? 服務(wù)端設(shè)計(jì)

Flask是使用Python編寫的基于MVC設(shè)計(jì)模式的Web應(yīng)用框架，具有輕量，擴(kuò)展性強(qiáng)的特點(diǎn)。服務(wù)端程序通過ORM工具SQLAlchemy實(shí)現(xiàn)對數(shù)據(jù)庫的增刪改查，并通過NumPy、Scikit-learn等第三方庫對數(shù)據(jù)進(jìn)行處理和計(jì)算，并將結(jié)果整理成合適的json數(shù)據(jù)的格式通過Flask框架以URL的訪問形式發(fā)布為RESTful API服務(wù)來供前端程序調(diào)用。

1.3? Web前端設(shè)計(jì)

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

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

用于功能導(dǎo)航，點(diǎn)擊某一功能選項(xiàng)，會通過Vue- router跳轉(zhuǎn)到具體的功能頁面，功能頁面會顯示在主要區(qū)域容器中。主要區(qū)域右側(cè)有一個(gè)操作框，容納對具體功能操作的一些選項(xiàng)，并通過底側(cè)的按鈕控制顯示和隱藏。

2? 系統(tǒng)實(shí)現(xiàn)

2.1? 功能實(shí)現(xiàn)

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

2.1.1? 地圖顯示

地圖功能主要使用封裝自百度地圖JavaScript API的開源地圖組件庫Vue Baidu Map。組件庫提供的地圖和地圖覆蓋物組件能夠?qū)崿F(xiàn)位置信息在地圖上以點(diǎn)、線、面以及信息窗體的形式顯示。地圖的其它功能如縮放、鷹眼、比例尺等則通過調(diào)用相應(yīng)控件并設(shè)置適當(dāng)?shù)膶傩詫?shí)現(xiàn)。另外針對國內(nèi)地理坐標(biāo)系位置偏移的問題，通過程序來判斷位置坐標(biāo)是否位于國內(nèi)，若是則將數(shù)據(jù)默認(rèn)的WGS-84坐標(biāo)轉(zhuǎn)換為BD坐標(biāo)系坐標(biāo)。

2.1.2? 數(shù)據(jù)查詢

基于AIS數(shù)據(jù)庫中的字段設(shè)計(jì)基本的按時(shí)間（UpdateTime、InsertTime）和位置（Lat、Lon）的查詢功能。輸入框輸入要查詢信息的時(shí)間范圍，或經(jīng)緯度范圍，通過axios的get請求，將請求參數(shù)發(fā)送到服務(wù)端程序中，服務(wù)端根據(jù)參數(shù)使用SQLAlchemy從數(shù)據(jù)庫中的Pos表中查詢并取出mmsi號碼、航行狀態(tài)等動態(tài)信息，或者從ShipInfo表中查詢?nèi)〕龃?，船舶類型等靜態(tài)信息組織成json格式，再通過響應(yīng)返回到客戶端?？蛻舳私邮蘸髮?shù)據(jù)在地圖或者表格中顯示。

2.1.3? 統(tǒng)計(jì)和可視化

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

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

2.1.4? 聚類分析功能

系統(tǒng)的聚類分析功能是針對某一區(qū)域一天內(nèi)所有的船舶航行位置數(shù)據(jù)進(jìn)行聚類計(jì)算，從得到的結(jié)果中，判斷此時(shí)空范圍內(nèi)主要的船舶航行區(qū)域，來為航線規(guī)劃等提供參考[11]。聚類功能是在服務(wù)端調(diào)用Scikit-learn庫來計(jì)算實(shí)現(xiàn)的，Scikit-learn是專門面向機(jī)器學(xué)習(xí)的Python開源庫，實(shí)現(xiàn)了很多成熟的算法，包括各種聚類算法。本系統(tǒng)中使用DBSCAN算法進(jìn)行聚類計(jì)算。

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

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

2.2? 系統(tǒng)部署

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

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

3? 結(jié)語

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

參考文獻(xiàn)

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

[2]劉暢. 船舶自動識別系統(tǒng)（AIS）關(guān)鍵技術(shù)研究[D]. 大連： 大連海事大學(xué)， 2013.

[3]葉仁道， 姜玲， 張瑜. 大數(shù)據(jù)背景下全球船舶停泊點(diǎn)的數(shù)據(jù)挖掘分析[J]. 杭州電子科技大學(xué)學(xué)報(bào)： 社會科學(xué)版， 2018.

[4]耿直. 大數(shù)據(jù)時(shí)代統(tǒng)計(jì)學(xué)面臨的機(jī)遇與挑戰(zhàn)[J]. 統(tǒng)計(jì)研究， 2014， 31（1） ： 5-9.

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

[6]王鶴， 王方雄， 徐惠民. 管網(wǎng)巡檢WebGIS設(shè)計(jì)與開發(fā)[J]. 軟件， 2017， 38（07）： 126-129.

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

[8]孫娉娉， 李新， 史廣軍. 基于前后端分離的內(nèi)容管理系統(tǒng)[J]. 科研信息化技術(shù)與應(yīng)用， 2016（4）.

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

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

[11]趙梁濱， 史國友， 楊家軒. 基于DBSCAN算法的船舶軌跡自適應(yīng)層次聚類[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.