基于WebGIS的三维水库信息可视化系统设计与实现

史金昊，张晓涵，宋沛林

(山东科技大学测绘与空间信息学院，山东 青岛 266590)

我国现有水库9.8万多座，这些水库在防洪、供水、灌溉和发电等方面发挥着重要作用。如何实现水库的科学、安全、信息化管理成为当前的迫切需求。互联网、地理信息系统、计算机等技术的不断发展，使其在工程领域的应用也逐渐普及，水库信息可视化系统成为解决水库信息科学管理及展示的新途径[1]。水利工程管理信息化是国家水利信息化建设的重要组成部分，水库信息化的建设中与GIS相结合[2]，构建水库信息可视化管理系统，是水库管理信息化的重要举措，是提升水库现代信息化管理水平的必然趋势[3]。

王淑伟[4]设计了辽宁省大中型水库移民管理信息系统，实现水库移民信息“一张图”管理。陈述平等[5]结合GIS技术、数据挖掘技术设计了大坝运行安全监测管理信息系统，实现安全监测数据的采集、评价等统一管理。左文娜等[6]通过ArcGIS Server设计了水利信息管理与服务系统，实现了水利专题地理数据“一张图”管理，提高了空间数据的可利用性。但这些水库管理系统绝大多数是针对数据的管理，往往只是采用C/S端模式开发，采用二维地图引擎，可视化程度不够，无法直观表达水库真实情况。虽然现阶段已有学者结合GIS研发水库相关的管理系统，但是应用多基于商业GIS平台，存在体系庞大、启动速度慢、部署复杂且成本高昂的不足，不适用于轻量级行业的发展需要。随着科技的进步，基于Web的三维GIS技术逐渐兴起并迅速成为研究热点[7]。Cesium是开源三维地图引擎的JavaScript库，具有跨平台、跨浏览器等特点，有效降低了成本、提高开发效率，适用于轻量级应用场景[8- 10]。本文针对以往水库信息化系统存在的问题，设计开发了三维水库信息可视化系统，结合WebGIS、倾斜摄影模型和多种物联设备统计数据，采用Cesium作为三维地图引擎，以SpringBoot+Vue为框架，将系统的诸要素网络化和可视化，用模型评价、分析、预测水库的运行[11]，构建一个轻量级、功能强大的三维水库信息可视化系统，实现了水库设施和水库信息的可视化管理。

1 系统设计

1.1 系统总体架构

水库设施和水库信息的可视化管理系统包含三维可视化平台和数据监控中心两个子系统。整体系统采用B/S架构模式进行研发，总体架构采用数据层、服务层和应用层架构体系，如图1所示。系统以统一设计、分层式架构、前后端分离思路进行程序开发和部署。在系统开发中，采用相关的技术规范和标准来支持系统的安全、运行和维护，并且具有良好的可扩展性和兼容性的设计理念。

图1 系统总体架构

由于水库管理的多样性、流域地理位置和水资源项目管理模式的差异，需要系统架构来满足业务的多样化需求。系统综合运用GIS、三维场景及现代网络技术，对水库基础信息、水质水情数据、空间地理信息数据和多种物联监测设备的实时数据等多样性信息进行存储、动态可视化展示、综合监管，构建基于WebGIS三维水库信息可视化系统，通过构建针对不同业务部门的相关数据库，实现水库各类属性信息及空间数据在三维场景中的可视化查阅、分析和决策。

1.2 功能设计

根据三维水库信息可视化系统的建设目标和设计理念，系统分为三维可视化和数据监控中心两个子系统。三维可视化子系统包含三维数据的加载展示、基本GIS功能、查询功能、分析功能四个功能模块。数据监测中心用于多种监测设备实时数据的可视化与统计分析，如水位计监控、摄像头监控、洪涝趋势分析、设备运行状态监控等，具体功能如图2所示。

图2 功能模块

(1)三维可视化子系统

三维可视化子系统主要用于水库三维效果及基本信息的可视化展示，具体功能模块如下：

①三维数据加载模块主要包含三维场景搭建和倾斜摄影模型加载。通过场景搭建和倾斜摄影模型的结合可以还原真实水库的三维外貌。

②基本GIS功能模块主要包含基本的底图切换、图层控制、三维坐标信息查询、空间量测等功能。其不同于二维地图的量测功能，三维地图在搭建三维场景后，三维的量测可以贴合真实地形进行量测，会极大提升量测功能的准确性。

③查询功能模块主要包含空间信息查询和属性信息查询。采用地图获取和手动输入两种方式查询，并显示系统所有的水库地理位置信息和其内的基本信息和详细信息。

④分析功能模块主要包含淹没分析和水闸仿真模拟。通过三维水库信息可视化系统真实模拟洪水淹没过程和水闸放水过程，可以有效的解决现阶段水库存在的防汛问题，为规划下一步决策方案提供有效依据。

(2)数据监管中心子系统

数据监管中心子系统主要包含水库内部的业务管理可视化展示和实时监测，将物联监测设备的数据通过数据库的访问以可视化的形式展现出来，如水库的水质监测情况、水位监测情况、视频监控情况、设备运行状态、巡检任务完成信息和值班排班情况等。方便水库业务上的管理和信息展示，提升水库整体的信息化和数据化。

1.3 开发工具及环境

为了提高整体的开发效率和便于后期的运行维护，系统整体采用前后端分离的开发模式。前端基于WebGIS三维引擎Cesium和二维地图Leaflet两种开源JavaScript库作为本系统的地图开发技术引擎，并且采用组件化开发的思路[12]，使用Vue框架，WebStorm进行编码，采用Tomcat作为Web服务器，网页采用HTML5+CSS3进行编写，使用JavaScript脚本语言，结合LayUI和BootStrap两种UI组件库，使用Echarts实现油样信息的查询与统计绘图的功能。后端采用当下流行的Spring Boot框架，并应用JSON格式对前后端交互的数据进行封装，应用Redis进行数据缓存。数据库方面采用PostGIS空间数据引擎将空间数据和属性数据统一存储至关系数据库PostgreSQL中。

2 系统实现思路及关键技术

2.1 地形及影像加载实现

系统支持多种地形格式和服务，根据Cesium提供的两种加载地形数据的方式，一个为STK World Terrain，是一种基于mesh的高分辨率地形数据；另一个为Small Terrain，是一种基于heightmap的中等高分辨率地形数据，该方式的地形渲染效果不及第一种，多用于小区域范围内地形制作需求。本研究方案采用STK World Terrain地形数据，这种地形数据多用于大面积区域。

通过三维地形建模可以清晰地看出影像叠加DEM高程数据而产生地形的起伏变化。考虑到地图服务的稳定性，系统采用离线地图的方式加载地形数据和影像地图。通过地理空间数据云网站获取影像数据和DEM数据，进一步将获取的数据处理成数据切片，并将切片发布到tomcat服务器，分别利用CesiumTerrainProvider函数和UrlTemplateImageryProvider函数调用并加载地形数据和影像地图，形成带有起伏的三维地形。

2.2 倾斜摄影模型加载

倾斜摄影相片[13]是指由一定倾斜角的航摄像机所获取的影像数据，在同一个飞行平台涉及多个传感器，从垂直方向、倾斜度等多种不同角度采集图像时，可以获得更完整、准确的地面目标空间信息。然后，通过几何校正、平差计算和多角度图像匹配，最终可以获得嵌入精确地理坐标且具有真实空间地理信息的三维空间模型。

Cesium支持加载3D Tiles格式的模型。该格式是目前三维数据模型的一种格式标准，主要优势在于具有高效的Web传输和解析特点，提升了运行效率和可视化效果。3DTiles格式将大量倾斜的3D数据以分块、分级渲染的形式组织起来，可以大大减轻服务器和GPU的负担，是一种格式公开、设计优秀的WebGIS平台三维数据展示格式[14]。再将模型数据发布至服务器端以供Cesium的调用。倾斜摄影模型加载效果如图3所示。

图3 倾斜摄影模型加载

2.3 淹没分析方法实现

由于洪水的流向具有不可控性，淹没分析的计算过程中要涉及到地表径流、空间连通性等诸多因素，计算过程较为复杂。本文采取种子点蔓延算法，该算法是先通过确立分析范围内的种子点，然后以种子点作为水域蔓延的中心区域，是一种基于空间特征的扩散探测算法[15]。如图4所示，水流将会从种子点向周围的4面(四项连通)或8面(八项连通)方向进行扩张，如果水位的高度值高于蔓延位置的高程值则该蔓延位置将处于淹没区，反之，该位置将处于非淹没区，功能效果如图5所示。

图4 种子点蔓延算法示意图

图5 淹没分析实现

种子点蔓延算法优势在于可结合三维地形数据，以实际的地域地形自动计算并提取淹没的分析范围。但是该方法并不适用于数据量过大的计算过程，原因在于该算法在过程中包含大量的递归操作，降低了算法的执行效率和运行速度，并且易出现内存泄漏或堆栈溢出等问题。所以本文先规划设计淹没区域，这样可以有效的避免出现大量的递归过程，大大增加了分析的效率。

同时倾斜摄影模型完全架构于系统平台上，将倾斜模型、三维场景和空间信息数据无缝衔接，在系统平台上动态展示不同时刻、区域、水深、流速等的淹没可视化结果。通过淹没动态仿真展示，可获取淹没分析过程中的水位变化、流速、流向等重要信息，为防汛规划提供直观、准确的决策依据。

2.4 水闸放水模拟实现

系统的动态水闸放水模拟模块是采用粒子系统实现。粒子系统是一种图形技术，可以用来模拟复杂的物理效果。粒子系统是由许多很小的图片集合而成，这些图形结合会形成一个更复杂的“模糊”物体，就像火焰、天气、水等。这些复杂效果则是通过控制每一个独立粒子的开始位置、速度、生命周期等属性来完成。

通过Cesium创建 ParticleSystem类的对象，调整每个粒子的样式、大小、方向等参数，并根据水闸模型的位置计算出粒子系统的三维坐标和放置角度并加载到三维地图中，结合时间线控制粒子的生命周期实现水闸放水动态模拟的过程，效果如图6所示。

图6 水闸放水模拟实现

2.5 数据监控中心实现

数据监控中心子系统包含对水库基本信息、水质水情信息和多种物联设备的监测信息等进行数据可视化展示，如图7所示。前端页面间数据交互采用VueX，使用Axios进行后端的数据通信和微服务调用，服务器接收请求后根据请求的逻辑查询数据库，并将查询后的数据返回至前端页面。

图7 水闸放水模拟实现

2.5.1动态图表信息

系统采用Echarts进行动态图表信息的可视化展示。Echarts是一个开源的数据可视化工具，能够与多种数据源集成，根据需求定制各种的可视化图表，同时有良好的兼容性，现阶段绝大部分浏览器都完美兼容Echarts，也是当下各种图表数据可视化工具中非常主流的数据可视化工具。通过前端向后端发送请求，将获取的请求数据信息以可视化图表的形式渲染在页面中进行可视化操作。

2.5.2地图区域概览

数据监控中心子系统的地图区域概览模块利用Leaflet实现二维地图的可视化。Leaflet是一个轻量级的开源JS地图组件，具有上手容易、性能优越等优势[16]。地图区域概览模块提供了二维地图的视角预览水库的位置信息及设备信息。

2.5.3实时视频监控

数据监控中心子系统的视频实时监控模块采用HLS(HTTP Live Streaming)协议加载视频流媒体。随着通信技术的发展，设备硬件及通讯专线建设的成本也大幅降低，实时监控对于水库信息化建设尤为重要。

现阶段实时监控主流的视频传输协议是RTSP协议，国内多数摄像头硬件厂商，如海康、大华等，均使用该协议。但是RTSP协议是无法直接通过浏览器显示，需要安装浏览器插件播放，这也带来了极大的不便。为解决上述问题，本研究通过将实时监控的视频流上传至流媒体服务器的方式处理监控视频，通过流媒体服务器的处理可将RTSP协议转换成HLS协议，方便了网页直接播放视频监控。

3 结语

本文利用水库流域GIS模型、倾斜摄影模型和多种物联设备统计数据，从系统体系架构、框架设计等方面详细阐述了基于WebGIS的三维水库信息可视化系统的设计与实现。系统综合运用WebGIS、空间数据库、Internet及三维仿真模拟等高新技术，整合并利用水利信息资源，实现了三维展示、多源物联设备的数据监视、洪涝预警和仿真模拟等功能，为水利工程各类信息资源的共享与统一管理提供有力的支撑。系统可快速移植并应用到各个水库，为水库信息化管理、水库流域防洪决策等方面提供有效的决策依据。