基于WebGL的三维GIS平台快速构建方法

摘 要：随着WebGL技术和GIS技术的发展与应用，基于网络的三维地理信息可视化技术以其立体、直观的特点，迅速成为研究热点。为了快速构建功能完备、稳定可靠的三维GIS平台，本研究首先提出一种基于Cesium等技术设计的三维WebGIS可视化方案;然后从场景构建、系统功能设计与实现两方面展开探讨，详细介绍三维可视化的相关技术和系统主要功能的实现手段;最后对三维WebGIS快速构建方法进行总结。本研究所采用的技术可靠、交互设计友好，平台设计具有较强的通用性，可为多种应用场景的三维GIS平台设计提供参考。

关键词：网络地理信息系统;三维可视化;虚拟场景;空间测量

中图分类号：P208    文献标志码：A    文章编号：1003-5168（2022）7-0020-04

DOI：10.19968/j.cnki.hnkj.1003-5168.2022.07.004

Abstract： With the development and application of WebGL technology and GIS technology， the 3D geographic information visualization based on web has become a hot research quickly because of its stereoscopic and intuitive characteristics. In order to build a fully functional quickly， stable and reliable three-dimensional visualization platform of geographic information， a fast method to build 3D GIS platform based on WebGL was offered. Firstly， the architecture design of 3D GIS platform was introduced， and a 3D WebGIS visualization scheme based on Cesium and other technologies was proposed.Second， the 3D scene construction and system function design and implementation were discussed， and the relevant technologies of 3D visualization and the completion methods of system interactive functions were explained. Finally， the rapid construction method of 3D WebGIS was summarized， the results show that the technology adopted in this paper is reliable， the interaction design is friendly， and the platform design has strong universality.The research content of this paper can provide reference for the design and construction of 3D GIS platform of various topics.

Keywords： WebGIS; 3D visualization; virtual scene; spatial measurement

0 引言

當前，基于二维地图的网络地理信息可视化技术已经发展到相对成熟的阶段。针对不同的需求，二维GIS平台可以提供多元化、个性化和可交互的地理信息展示方式[1]，但其尚不能对地形、实体模型和三维实景等三维信息进行有效的表达。随着WebGL技术的兴起与发展，在浏览器上三维图形的渲染与交互可以不再借助额外插件，使得图形的展示效果和用户体验均得到增强[2]。在三维环境中能够展示更丰富的空间地理信息，基于网络的信息传输又能提高应用的便捷性和灵活性，因而基于WebGL的三维GIS技术在智慧景区建设、矿山和流域三维可视化、地下管网及铁路和列车虚拟仿真等应用场景被广泛应用[3]。面对日益增多的需求，结合当前主流技术，探讨具有可移植性、高拓展性、功能完备的三维GIS设计思路和基于WebGL平台的快速实现方法，并对其中关键技术展开研究。

1 总体架构设计

为了能够迅速构建适用于不同应用场景的地理信息系统，平台需要提供空间信息展示、交互查询等基础模块。其中，空间信息展示的主要功能包括影像地图的载入，高精度地形模型的使用，对矢量数据、三维模型、实景模型等数据在线浏览的支持;交互功能包括对图层的选择切换设置，对各类要素的空间和属性信息查询，在虚拟场景内进行图形绘制，对空间位置、距离和面积的计算等。面对由实景三维模型构建的应用，平台还应具有单体化功能，用于建筑物（如楼群）的分栋、分层、分户的可视化与交互查询。三维GIS平台功能设计如图1所示。

三维GIS平台是基于浏览器/服务器架构（Browser/Server Architecture）进行设计的。其中，浏览器端以Vue作为其前端基础框架，在此之上借助Cesium数据库开发相关三维功能。Vue是用于构建用户界面的渐进式框架，Vuex是其状态管理模块，Vue Router是其官方路由器，Element Plus是基于Vue 3的组件库，它们用于网站前端基本结构的技术实现;Axios是一个基于promise的HTTP库，用于对前端与后台的数据进行交互;Cesium是构建三维场景的核心库;Threejs用于Web端渲染三维模型;OpenLayers则辅助开发更丰富的二维地图功能;ECharts用于地理数据及其他数据的图表可视化。

服务器端以高性能的Nginx作为反向代理服务器，用于集群服务的拓展。在数据存储上，使用特性齐全的对象-关系型数据库管理系统PostgreSQL，PostGIS是其对空间数据存储与操作的扩展;GeoServer是OpenGIS Web服务器规范的J2EE实现，集成轻量级应用服务器Tomcat与GeoServer则用于GIS数据发布与交互操作;Redis是一個支持网络的Key-Value数据库，用于提高查询数据的效率;Django是一个基于Python的开源Web应用，功能健全、易维护且拓展性高。三维GIS平台的架构设计及相关技术如图2所示。除对空间数据进行相关操作外，平台还对用户、权限、任务等管理系统的功能进行设计，但在此不展开具体讨论。

2 三维场景构建

Cesium是基于WebGL技术的JS库，支持在二维、三维及哥伦布视图（2.5D）下进行操作，可接入多种地图数据源和数据交换格式[4]，是一种高效的三维GIS可视化平台。

2.1 影像地图和地形模型

影像地图可直观反映空间信息。Cesium可支持Cesium Ion、ArcGIS Server和符合OGC标准的WMS、WMTS等十余种影像服务类型，还提供UrlTemplateImagery Provider模板，用于如高德、腾讯等厂商自主实现影像服务。

数字地形模型的使用可有效增强三维场景可视化效果，Cesium Terrain、GoogleEarth Terrain和VRTheWorld Terrain等接口可为GIS平台接入不同数据源的地形瓦片数据。

2.2 地理要素图层

在三维场景中如何有效呈现点、线、面状地理要素至关重要。可将Shapefile文件转存为Cesium支持的GeoJSON格式[5]，或通过GeoServer发布并在后台解析后传送到前端使用[6]。此外，CZML也是常用的描述动态场景的数据格式，其可用于表达标识、模型等图元，也可用于描述与时间有关的动画场景;还可以通过直接实例化绘制的方式对地理数据进行展示。

2.3 三维模型

Cesium支持加载glTF（GL Transmission Format）格式和3D Tiles格式的三维模型。glTF是一个描述模型结构和组成等信息的JSON文件。由于Cesium不直接支持.obj格式，在使用前需要先将模型进行格式转换才能使用。glTF格式不具备分级加载的能力，因而在有复杂模型和大场景时，可以利用基于瓦片金字塔模型设计的3D Tiles格式，其能够随地图比例尺的放缩，针对性地加载不同层次的细节展示模型[7]。根据使用场景的不同，3D Tiles有Batched 3D Model（.b3dm） 、Instanced 3D Model（.i3dm） 和Point Cloud等类型。

3 交互查询功能实现

3.1 位置查询

通过监听鼠标移动、点击等操作，并分别做相应的响应处理，是实现位置查询功能的基础。Cesium定义的ScreenSpaceEventHandler类封装了用户输入事件的处理，其中setInputAction函数可设置触发的事件类型及触发时执行的功能。ScreenSpaceEventType类对鼠标的多种事件进行分类与定义。据此设计坐标查询交互，关键代码如图3所示。坐标拾取有以下三种方式：①Camera.pickEllipsoid（）：通过屏幕坐标获取椭球体上该点的三维笛卡尔坐标;②Globe.pick（）：找到射线与渲染的地球表面之间的交点的三维笛卡尔坐标;③Scene.pickPosition（）：返回从深度缓冲区和窗口位置重构的三维笛卡尔坐标。

3.2 空间测量

在三维场景中进行距离和面积的测量是三维GIS平台中一项必要且实用的功能。测量（以距离测量为例）流程如下。

①移除对所有鼠标事件的监听，重新对鼠标移动、左键单击、右键单击和左键双击事件触发的响应进行定义，然后进入监听状态。

②当监听到鼠标移动事件时，根据鼠标指针的位置重新绘制出折线段。当监听到鼠标左键单击事件时，执行步骤③;当监听到鼠标右键单击事件时，执行步骤④;当监听到鼠标左键双击事件时，执行步骤⑤。

③如果本次点击是首次点击，则绘制该折点;否则除绘制该点外，再绘制出该点与上一相邻点所连线段，并在该点上标注出折线的长度。

④如果此时已经绘制了部分折点与折线段，则清除最后一段线段和最后一个折点;如果此时已是双击完成状态，则清除所有绘制的折线段和折点。

⑤绘制末尾折点和最后一段折线，显示折线总长度，距离测量完成。

距离测量的流程如图4所示。

距离测量和面积测量的结果如图5所示。据此流程方法，可实现对线状要素和面状要素的绘制功能。

3.3 单体化

通过倾斜摄影测量技术获得的实景三维模型不能对道路、建筑等地物进行区分，因而需要把倾斜模型拆分为独立、可识别的单体对象，即单体化过程[8]。经过单体化处理的倾斜摄影模型可加入鼠标监听事件，从而实现高亮标记、属性查询等功能。

通过实例化GeometryInstance类，然后创建ClassificationPrimitive函数，从而实现对三维实景的单体化，最后将其添加至场景中。为了增强交互效果，添加鼠标响应事件流程如下：当鼠标移动至单体模型时，将该模型高亮显示，并显示出该单体模型的属性表;当鼠标左键单击选中单体时，锁定被选中的单体并移除鼠标移动监听;鼠标左键单击至非单体化实体或鼠标右键单击时，重新监听鼠标移动;鼠标左键双击单体时，跳转至该楼层俯视图（楼体分层单体化使用）。模型单体分类和鼠标事件监听响应逻辑关系如图6所示。

当拾取到单体模型时，通过单体模型的id、primitive、show和color等属性控制动态交互性。

4 结语

本研究提出了一种基于WebGL的三维GIS平台快速构建方案，介绍了以Cesium为核心的三维虚拟地理环境搭建框架及实现关键功能的技术。结果表明，本研究提出的方案与方法具有较好的通用性与可移植性，可为多种应用场景的三维WebGIS平台设计提供参考。

参考文献：

[1] 魏世轩.基于Cesium的空间数据展示与查询关键技术研究[J].城市勘测，2021（3）：5-8.

[2] 孙晓鹏，张芳，应国伟，等.基于Cesium.js和天地图的三维场景构建方法[J].地理空间信息，2018（1）：65-67，8.

[3] 郭神福，赵孔阳，王孝龙，等.基于WebGL的高速列车在线运行及沿线虚拟地理环境仿真[J].铁道科学与工程学报，2020（3）：573-581.

[4] 高云成.基于Cesium的WebGIS三维客户端实现技术研究[D].西安：西安电子科技大学，2014.

[5] 曹祎楠，王佳，顾大鹏.面向多源数据集成的高速公路数字化方法[J].科学技术与工程，2019（19）：214-221.

[6] 杨明奇，周程，付立军，等.融合Cesium和Geoserver的地质数据形变监测可视化方法[J].计算机系统应用，2021（11）： 179-187.

[7] 王逸凯，徐萌，罗建松，等.基于Cesium的WebGIS倾斜三维平台的实现[J].测绘与空间地理信息，2019（4）：88-89.

[8]陈良超，詹勇，王俊勇.一种倾斜摄影实景三维模型单体化方法[J].测绘通报，2018（6）：68-72，108.