智慧海洋空间可视化系统建设研究
1、研究背景及意义
中国国土幅员辽阔，不仅陆地国土有着接近千万平方公里，而且海洋国土还有300万平方公里左右，而且中国南海占据了中国海洋国土的三分之二。中国人民和中华民族经济发展的物质基础离不开南海，中国人民和中华民族将来生活和发展也离不开南海。近年来，南海由多方势力造成争端不断，如“2012年中菲黄岩岛事件”[1]，然而在对岛屿的监控方面中国监控的手段和经验略显不足，缺乏及时有效的技术手段和平台系统的支撑。在许许多多的领域，WebGIS技术都有着很多的广泛应用，比如城市乡村土地的规制和利用安排，各种灾难的预报查询和防止，在农业和畜牧业也都有很多的利用，交通枢纽的协调和管制，基础设施管理，城市规划建设等领域。随着用户体量的不断增大和用户需求的不断增多，在各个领域的系统开发和应用会越来越多的出现WebGIS的身影。
当前WebGIS的发展为南海问题提供了合适的技术手段。WebGIS技术是将Web技术和GIS技术相结合的一种现代化技术，它在互联网技术的基础之上架构地理信息，形成地理信息的可视化。并使其拥有浏览器/服务器（B/S）体系[2]的网络结构，让用户可以直观远程控制使用GIS。使用WebGIS技术，可以对南海的环境如风向，天气，海洋流场流向流速起到实施有效的监测。对南海的资源如矿产，渔业资源等进行适当有效的控制，同时若出现突发紧急状况，有关部门也可以运用WebGIS技术进行有效应急掌控。WebGIS即网络地理信息系统[2]，这种空间信息系统建立在一种特殊的环境下，就是Web的环境下是。通过网络地理信息系统，在宽广的因特网空间中，用户们可以各自寻找所需要的空间信息和文本信息以及数据信息，可以进行各种空间分析，在网络地理信息系统技术支持下，在全社会的范围中，人们可以实现全社会范围下各领域各部门之间的空间数据交换，网络地理信息系统技术大大提高了信息查询的效率以及维护的效率。
2、系统总体架构设计
本系统基于3层B/S （浏览器/服务器）架构，3层分别为用户层，中间层,数据层，平台各部分之间相互依赖，又可以独立运行，有效的降低了各功能模块之间的耦合度[3]，有利于整体系统的升级管理与维护。用户层包括地图功能模块（地图显示、图层管理）、流场可视化模块、查询模块、鹰眼图模块、时间轴控制模块、时间间隔选择器模块[4]，中间层为Leaflet API和ArcGIS API提供的开源web服务，数据层为一天24小时的南海海洋流场流向流速数据。用户层由程序文件和窗体组成，用户可以通过交互式操作来获取内容。中间层是系统的基础，根据LeafletAPI提供的开源项目，做出自己需要的可视化效果。数据层主要是将处理好的json数据打包写入程序。通过简洁的系统结构，实现了可交互的流场可视化系统，最终达到用户一键获取想要的内容，直观快捷的获取南海流场数据。
3、系统功能设计
3.1基本地图操作功能
系统设计调用Leaflet API的地图，设置显示中心点为中国南海，默认显示图层为卫星地图图层。异步加载地图使得用户可以进行地图的放大、缩小和平移操作。当用户移动鼠标滚轮时，图像会放大和缩小。当用户鼠标点住移动，地图会有平移操作显示。
3.2 系统地图图层控制
南海环境精细化预报查询系统图层分为卫星地图图层，灰度Canvas图层，南海海洋流场可视化图层。卫星地图图层和灰度Canvas图层包含了基本的地图地理信息，南海海洋流场可视化图层包含了可视化及查询地理信息。默认显示图层为卫星地图图层，用户可以通过图层控制按键控制添加、删除其中一个或多个图层，达到直观的获取南海海洋流场可视化信息的目的。
3.3 鹰眼图功能
鹰眼图是一个常见的GIS功能组件，顾名思义，鹰眼图就是一种可以像从高空中俯瞰整个地图的小地图框。调用Leaflet的功能方法，先定义一个新的图层，再在新图层上面放入鹰眼图，默认中心点为卫星地图图层中心点即为南海附近。用户通过控制鹰眼图可以更加宏观整体的观察和操作其他功能。
3.4 可视化及流向流速查询功能
用户能够通过这个功能，获取精确的南海流场流向流速数据。用户鼠标移过流场某个动态粒子矢量短线时，屏幕左下角会显示出该粒子矢量短线的流向和流速信息，用户可以根据这个功能方便的得到南海流场流向流速信息。
3.5 时间轴功能
时间轴功能是一款非常方便的WebGIS功能，先在HTML页面加入时间轴的模块，再写入时间轴功能函数，调用特定时段的Json数据，这样就实现了一个简单粗糙的时间轴。通过时间轴功能控件，进度条快速的划过每个时段，用户可以快捷的看到某个时段的南海海洋流场粒子可视化效果，用户也可以点击暂停按钮，获取某一时间段的南海海洋流场流向流速数据。通过时间轴功能，实现了用时间轴的播放来操作海洋流场可视化图层的展示，更加方便快捷。
3.6 时间间隔选择器功能
时间间隔选择器功能是为了调节自动播放时数据跳转速率的，需求是按照用户自己需要调节数据自动跳转速率，默认是每隔1小时跳转一次数据，可以根据用户的输入，并点击确定，将用户输入参数传入到后台，控制Json数据的跳转。
4、系统的实现
4.1 开发运行环境
系统以VScode为开发平台，安装HTML CSS Support和Debugger for Chrome，随后用npm全局安装（npm install live server），安装完成之后重新启动VScode就可以写HTML，CSS，Java代码并进行网页调试了。右键HTML页面点击Open with Live Server就可以显示界面了。
4.2基本地图操作功能的实现
直接调用已有的Leaflet API中的基本地图，先在HTML文件里用<link href>语句调用在线API，再写入<src=”demo.js”></>调用JS文件，在JS文件里写具体的函数。通过L.tilelayer方法调用地图并设置样式和基本地图功能，主要代码和实现效果如下图4-1和图4-2所示。
图4-1 基本地图操作功能代码
图4-2 基本地图操作功能效果
4.3 系统地图图层控制实现
在之前的JS文件中用Leaflet API中的L.control.layers方法，加入图层控制控件，用来控制卫星地图图层和灰度Canvas图层，代码和实现效果如下图4-3和图4-4所示。
图4-3 地图图层控制代码
图4-4 地图图层控制效果
4.4 鹰眼图功能实现
在HTML文件中通过<link href>语句调用此功能所用的在线API，在JS文件中通过L.TileLayer方法添加新的图层并设置样式，再用L.Control.MiniMap方法写入鹰眼图控件。代码和实现效果如下图4-5和图4-6所示。
图4-5 鹰眼图功能代码
图4-6 鹰眼图功能效果
4.5 可视化及流向流速查询功能实现
在JS文件中写入读取Json文件的函数，通过$.getJSON方法实现。再通过L.velocityLayer方法写入海洋流场可视化图层的显示，代码和实现效果如下图4-7和图4-8所示。
图4-7 可视化及流向流速查询代码
图4-8 可视化及流向流速查询效果
4.6 时间轴功能实现
HTML文件中通过<div></div>标签写入整个时间条框架，其中包括12个时间节点表示一天24小时中偶数时间节点，JS文件中与数据读取函数结合，将时间条按照按照不同的时间段对应不同的Json数据文件。代码和实现效果如下图4-9，图4-10所示。
图4-9 时间轴功能HTML代码
图4-10 时间轴功能效果
4.7 时间控制选择器功能的实现
在HTML页面中<div></div>标签包装整个时间控制选择器的模型，里面有行内文本“时间间隔”，输入框和确定按钮。在JS页面中通过document.getElementById.value获取到输入框中的用户输入数字，再把获取到的值放到指定函数中执行，功能效果和代码如下图4-11、4-12所示。
图4-11 时间控制选择器功能效果
图4-12 时间控制选择器HTML代码
5、结论与展望
本系统基于B/S架构设计，收集并处理了空间地理数据，南海流场监测数据。利用现在成熟的WebGIS技术并结合学习现在公开的开源可视化项目，以南海为背景，做了南海的海洋流场可视化查询预报系统。通过基本地图功能（放大，缩小，平移），鹰眼图功能，流向流速查询功能，南海海洋流场动态可视化功能，时间轴控制条功能以及时间间隔选择器功能。本系统对以往的静态可视化显示和标量可视化显示做出了创新，做出了动态矢量可视化效果。
基于WebGIS的南海环境精细化预报查询系统已经基本做好，但由于本人时间和能力有限，只用前端HTML，CSS，Java编程语言做出了网页客户端的效果和系统的几个功能，但是没有学会用后端算法与系统结合，这样能够更好的管理数据以及维护系统。这也是本系统最大的不足，同时也是日后需要突破的一个技术方向。在前端方面，还有一些重要的功能没有实现，比如本系统只是围绕海洋流场为技术点进行实现，日后还会做出其他的可视化效果，如：热力图，风场，人口迁徙图等。日后会在后端与前端结合，更多可视化效果两方面完善本系统。
6、参考文献
[1] 邹伟,刘永学,李满春.基于WebGIS的南海历史地理情势分析系统设计与实现[J].南京:热带地理,2015.3.
[2] 张振涛,张海艳,苏贵波.关于WebGIS关键技术及发展趋势的探讨[J].科技信息.2011.1.
[3] 黄寿昌.基于WebGIS的森林资源的动态监测及预警系统[J].沈阳农业大学学报,2013.6.
[4] 储文苗,卜凡亮.WebGIS警用实有人口可视化管理平台设计与实现[J].软件导刊,2020.1.
作者简介
王福源，中国石油大学（华东）资源与环境2020级研究生
内容转载、商务活动、投稿 等合作请联系
微信号：huitiandi321
邮箱：geomaticshtd@163.com
欢迎关注慧天地同名新浪微博：
ID：慧天地_geomaticser
学生视角丨基于物联网无线传感的智慧家居
学生视角丨时空大数据为城市交通规划提供支持
学生视角｜基于Android手机定位的智慧旅游
《慧天地》敬告
《慧天地》公众号聚焦国内外时空信息科技前沿、行业发展动态、跨界融合趋势，探索企业核心竞争力，传播测绘地理信息文化，为测绘、地信、遥感等相关专业的同学提供日常学习、考研就业一站式服务，旨在打造政产学研用精准对接的平台。
《慧天地》高度重视版权，对于原创、委托发布的稿件，会烦请作者、委托方亲自审核通过后才正式推发；对于来自网站、期刊、书籍、微博、微信公众号等媒介的稿件，会在作者栏或者文章开头显著标明出处，以表达对作者和推文引用平台版权的充分尊重和感谢；对于来源于网络作者不明的优质作品，转载时如出现侵权，请后台留言，我们会及时删除。感谢大家一直以来对《慧天地》的关注和支持！
——《慧天地》运营团队
编辑：郭祥浩审核：安有硕
指导：万剑华教授