总777期第七期2022年4月
河南科技
Henan Science and Technology
信息技术
基于WebGL的三维GIS平台快速构建方法
王孝龙
（天津市测绘院有限公司，天津300381）
摘要：随着WebGL技术和GIS技术的发展与应用，基于网络的三维地理信息可视化技术以其立体、直观的特点，迅速成为研究热点。为了快速构建功能完备、稳定可靠的三维GIS平台，本研究首先提出一种基于Cesium等技术设计的三维WebGIS可视化方案；然后从场景构建、系统功能设计与实现两方面展开探讨，详细介绍三维可视化的相关技术和系统主要功能的实现手段；最后对三维WebGIS快速构建方法进行总结。本研究所采用的技术可靠、交互设计友好，平台设计具有较强的通用性，可为多种应用场景的三维GIS平台设计提供参考。
关键词：网络地理信息系统；三维可视化；虚拟场景；空间测量
中图分类号：P208文献标志码：A文章编号：1003-5168（2022）7-0020-04 DOI:10.19968/jki.hnkj.1003-5168.2022.07.004
A Fast Method to Build3D GIS Platform Based on WebGL
WANG Xiaolong
(Tianjin Institute of Surveying and Mapping Co.,Ltd.,Tianjin300381,China)
Abstract:With the development and application of WebGL technology and GIS technology,the3D geo⁃graphic information visualization based on web has become a hot research quickly because of its stereo⁃scopic 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 build3D GIS platform based on WebGL was offered.Firstly,the architecture design of3D GIS platform was introduced,and a 3D WebGIS visualization scheme based on Cesium and other technologies was proposed.Second,the3D scene construction and system function design and implementation were discussed,and the relevant tech⁃nologies of3D visualization and the completion methods of system int
eractive functions were explained. Finally,the rapid construction method of3D WebGIS was summarized,the results show that the technol⁃ogy 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］。在三维环境中能够展示更丰富的空间地理信息，基于网络的信息传输又能提高应用的便捷性和灵活性，因而基于
收稿日期：2022-03-17
作者简介：王孝龙（1994—），男，硕士，助理工程师，研究方向：地理信息系统技术和应用。
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 作为反向代理服务
器，用于集服务的拓展。在数据存储上，使用特性齐全的对象-关系型数据库管理系统Post⁃
greSQL ，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 等十余种影像服务类型，还提供Url⁃TemplateImagery Provider 模板，用于如高德、腾讯等厂商自主实现影像服务。
数字地形模型的使用可有效增强三维场景可视化效果，Cesium Terrain 、GoogleEarth Terrain 和VRTheWorld Terrain 等接口可为GIS 平台接入不同数据源的地形瓦片数据。
2.2
地理要素图层
在三维场景中如何有效呈现点、线、面状地理要素至关重要。可将Shapefile 文件转存为Cesium 支持的GeoJSON 格式［5］，或通过GeoServer 发布并在后台解析后传送到前端使用［6］。此外，CZML 也是常用的描述动态场景的数据格式，其可用于表达标识、模型等图元，也可用于描述与时间有关的动画场景；还可以通过直接实例化绘制的方式对地理数
图1
三维GIS 平台功能设计
三维GIS 平台
三维模型
实景数据
图层控制
矢量数据
影像地形
交互查询
图形绘制
空间测量
单体分类
图2三维GIS 平台架构设计
服务器端
浏览器端
openlayers
echarts
three cesium axios vuex
vue-router
Vue Nginx
Http Respond
Http Request
Django Geoserver Redis Tomcat PostGIS
Postgresql element plus
据进行展示。
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 函数可设置触发的事件类型及触发时执行的功能。ScreenS⁃paceEventType 类对鼠标的多种事件进行分类与定义。据此设计坐标查询交互，关键代码如图3所示。坐标拾取有以下三种方式：①Camera.pickEl⁃lipsoid （）：通过屏幕坐标获取椭球体上该点的三维笛卡尔坐标；②Globe.pick （）：到射线与渲染的地球表面之间的交点的三维笛卡尔坐标；③Scene.pickPosition （）：返回从深度缓冲区和窗口位置重构的三维笛卡尔坐标。
3.2
空间测量
在三维场景中进行距离和面积的测量是三维GIS 平台中一项必要且实用的功能。测量（以距离测量为例）流程如下。
①移除对所有鼠标事件的监听，重新对鼠标移
动、左键单击、右键单击和左键双击事件触发的响应进行定义，然后进入监听状态。
②当监听到鼠标移动事件时，根据鼠标指针的
位置重新绘制出折线段。当监听到鼠标左键单击事件时，执行步骤③；当监听到鼠标右键单击事件时，执行步骤④；当监听到鼠标左键双击事件时，执行步骤⑤。
③如果本次点击是首次点击，则绘制该折点；否则除绘制该点外，再绘制出该点与上一相邻点所连线段，并在该点上标注出折线的长度。
④如果此时已经绘制了部分折点与折线段，则
清除最后一段线段和最后一个折点；如果此时已是双击完成状态，则清除所有绘制的折线段和折点。⑤绘制末尾折点和最后一段折线，显示折线总长度，距离测量完成。
距离测量的流程如图4所示。
距离测量和面积测量的结果如图5所示。据此流程方法，可实现对线状要素和面状要素的绘制功能。
3.3
单体化
通过倾斜摄影测量技术获得的实景三维模型不能对道路、建筑等地物进行区分，因而需要把倾斜模型拆分为独立、可识别的单体对象，即单体化过程［8］。经过单体化处理的倾斜摄影模型可加入鼠标监听事件，从而实现高亮标记、属性查询等功能。
通过实例化GeometryInstance 类，然后创建ClassificationPrimitive 函数，从而实现对三维实景的单体化，最后将其添加至场景中。为了增强交互效果，添加鼠标响应事件流程如下：当鼠标移动至单体模型时，将该模型高亮显示，并显示出该单体模型的属性表；当鼠标左键单击选中单体时，锁定被选中的单体并移除鼠标移动监听；鼠标左键单击至非单体化实体或鼠标右键单击时，重新监听鼠标移
图3坐标查询关键代码
viewer.screenSpaccEventHandler.setInputAction(function(movement){},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
var cartographic,cartesian,longitude,latitude;
var pickedObject=scene.dPosition);
if(scene.pickPositionSupported &&Cesium.defined(pickedObject)){cartesian=viewer.scene.dPosition);
cartographic=Ccsium.Ellipsoid.WGS84.cartcsianToCartographic(cartcsian);longitude=Degrees(cartographic.longitude);latitudc=Dcgrccs(cartographic.latitudc)；}
图4距离测量流程
开始
重置鼠标事件监听
重绘折线
移动添加折点
删除尾点
添加尾点
左击
右击双击完成
是
是是是否
否
否
否
动；鼠标左键双击单体时，跳转至该楼层俯视图（楼体分层单体化使用）。模型单体分类和鼠标事件监听响应逻辑关系如图6所示。
当拾取到单体模型时，通过单体模型的id 、primitive 、show 和color 等属性控制动态交互性。
4
结语
本研究提出了一种基于WebGL 的三维GIS 平台快速构建方案，介绍了以Cesium 为核心的三维虚拟地理环境搭建框架及实现关键功能的技术。结果表明，本研究提出的方案与方法具有较好的通用性与可移植性，可为多种应用场景的三维Web⁃GIS 平台设计提供参考。
参考文献：
［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.
图5
距离和面积测量示例
（b ）面积测量
（a ）距离测量图6模型单体分类和鼠标实践监听逻辑关系图
MOUSE_MOVE LEFT_CLICK RIGHT_CLICK LEFT_DOUBLE_CLICK Attributes ScreenSpaceEventHandler
setInputAction
pick
Geometry GeometryInstance ClassificationPrimitive
Primitive PrimitiveCollection
Scene
id
3d地图实景地图primitive
show
color
Object
gcometryInstance

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。