南海舰船数据可视化分析系统设计与实现

王桃苹 王加胜* 王 健 刘宇晨

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]从多方面进行了深入的研究，后续还可以考虑在该系统中加入轨迹聚类分析、船舶预警、船舶行为分析等功能，使之更加完善。