基于CesiumJS的实景三维数据可视化实现
2024-06-19李金亮廖菊燕杨绍兴杨平
李金亮 廖菊燕 杨绍兴 杨平
开放科学（资源服务）标识码（OSID）：
DOI：10.16661/j.cnki.1672-3791.2312-5042-9706
通信作者：李金亮（1985—），男，硕士，工程师，研究方向为测绘和地理信息应用技术研究。E-mail：394506964@qq.com。
摘要：为达到节约Web GIS设计和使用成本的目的，通过一套开源软件的解决方案，重点研究基于CesiumJS将实景三维数据在Web端实现可视化，体现实景三维数据真实、立体、时序化反映和表达的特点，前端利用Vue3框架，用TypeScript语言快速构建基于网页的Web GIS应用，并在三维场景中探索属性查询、空间分析等技术应用。该研究表明利用CesiumJS将实景三维数据在Web端可视化和空间分析的方案完全可行。
关键词：实景三维 Vue3 TypeScript CesiumJS Web GIS
中图分类号：P208
该研究利用Vue3易学易用，性能出色，适用场景丰富的特点同时结合Typescript语言探索构建实用的Web GIS应用，使用CesiumJS加载丰富的实景三维数据和OGC服务后融入Vue3页面，使数据、图形相得益彰。
1 重要概念
1.1 实景三维
实景三维（3D Real Scene）是对人类生产、生活和生态空间进行真实、立体、时序化反映和表达的数字虚拟空间，是新型基础测绘标准化产品，是国家新型基础设施建设的重要组成部分，为经济社会发展和各部门信息化提供统一的空间基底。实景三维通过在三维地理场景上承载结构化、语义化、支持人机兼容理解和物联实时感知的地理实体进行构建。按照表达内容通常分为地形级、城市级和部件级[1]。
1.2 Vue3
Vue3是一款用于构建用户界面的 JavaScript 框架，它是Vue.js的最新版本，有更好的Typescript支持，基于标准 HTML、CSS 和 JavaScript/Typescript 构建，并提供了一套声明式的、组件化的编程模型，能够高效地开发用户界面。
1.3 TypeScript
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
1.4 CesiumJS
CesiumJS是一个开源的JavaScript库，用于在Web上创建三维地球和地图。它提供了一个平台，可以在浏览器环境中可视化地理空间数据，让开发人员构建交互式和动态的3D应用程序。CesiumJS支持许多功能，包括地形渲染、图像图层、矢量数据可视化、相机控制以及各种地理空间分析能力。在地理空间可视化、虚拟地球和地球科学等领域得到广泛应用。CesiumJS提供了一个强大而灵活的框架，用于创建丰富的基于Web的三维地理空间应用程序。
1.5 Web GIS
Web GIS（网络地理信息系统）是指工作在Web网上的GIS，是传统的GIS在网络上的延伸和发展，具有传统GIS的特点，可以实现空间数据的检索、查询、制图输出、编辑等基本功能，同时也是Internet上地理信息发布、共享和交流协作的基础。
2 实验前准备
首先在计算机中安装NodeJS，可以利用nodeJS打包工具和命令来安装、管理和发布JavaScript模块以及管理项目的依赖关系。之后用vue craete [options]
3 加载多源异构实景三维数据
Vue3项目创建完成以后就可以在vue页面中将实景三维数据可视化了。首先根据实际需求分类创建vue页面，在App.vue中利用
CesiumJS可以加载的GIS数据类型非常丰富，特别是在加载海量三维数据方面具有独特的优势，在本文中实验加载了3Dtiles、WMS/WMTS、GeoJson、自绘图形、CZML、I3S等数据资源。通用的前端类库threejs也能够加载三维数据，但通常用于处理单个三维对象。CesiumJS对WebGL进行了更好的封装[3]，降低了学习难度，并且CesiumJS包含了大量的针对处理二维和三维的GIS数据的内置类，基本上不需要做复杂的扩展和计算就能够实现丰富的应用。
3.1加载3Dtiles数据
3D Tiles是用于大规模、异构的三维地理空间数据集（如点云、建筑物、摄影测量和矢量数据）的开放标准。基于glTF和其他三维数据类型，3D Tiles是一种可流式传输、经过优化的格式，旨在充分利用当今不断增长的三维地理空间数据的潜力，可交互、可样式化、适应性强、灵活性高；设计精确，支持最苛刻的分析需求；支持时间动态，可以可视化或模拟展示随时间变化的情况；支持各种不同用途的数据类型。3D Tiles是开放地理空间联盟（OGC）的社区标准。这些特性使得3D Tiles成为处理和展示三维地理空间数据的理想选择[4]。
实际应用中首先通过语句viewer = new Cesium.Viewer（"cesiumContainer"， {terrainProvider： Cesium.createWorldTerrain（），timeline： false，animation： false}）;创建视图，然后通过视图加载其他类型的数据。3Dtiles数据对象（数据集）通过Cesium.Cesium3DTileset方法来创建，数据源既可以是本地文件也可以是远程数据服务，本文采用Ceiusm ION云平台上的数据资源。最后通过viewer.scene.primitives.add加载数据集。在实际生产中，通过倾斜摄影的方法来生产三维数据是一种常见的生产模式，而CesiumJS目前还不能直接加载OSGB格式的三维数据，但是可以通过开源软件cesiumlab把OSGB，OBJ等格式转成3Dtiles然后加载[5]。
CesiumJS在加载3D Tiles数据时，默认情况下只会加载可视域（屏幕窗口范围）内的数据。这种方式称为动态加载（Dynamic Loading），它是CesiumJS的一个重要特性，旨在提高性能和效率。动态加载的原理是根据当前视图的位置和范围，只加载和渲染可见的3D Tiles数据。当视图发生变化时，CesiumJS会自动加载和卸载适应新视图的瓦片数据。这样可以有效降低数据传输和渲染的开销，提高应用程序的加载速度和性能。除了动态加载可视域内的数据，CesiumJS还支持预加载（Preloading）和懒加载（Lazy Loading）的方式。预加载允许在可视域之外的区域提前加载一些数据，以提供更流畅的用户体验。懒加载允许延迟加载某些数据，直到用户需要查看或交互时再进行加载。CesiumJS的加载行为可以通过配置选项进行调整和定制。根据具体需求和应用场景，选择合适的加载策略和参数，以达到最佳的性能和用户体验。
3Dtiles数据加载成功后，充分利用地理实体单体化的优势，利用Cesium.ScreenSpaceEventType事件来提取和展示单体的属性，对象隐藏、动画展示等效果（如图1所示）。
3.2 加载WMS/WMTS/I3s
CesiumJS不仅能加载和展示三维数据，还能够像openlayers/leaflet一样非常流畅地加载WMS、WMTS等标准OGC服务，也就是说仅依靠CesiumJS开源引擎就能轻松实现二三维一体化[6]。依托WMS数据源，利用Cesium.ImageryLayer创建图层，最后通过viewer.imageryLayers.add添加创建好的图层。WMTS通过Cesium.WebMapTileServiceImageryProvider来创建图层，然后通过视图来添加图层。
I3s（Indexed 3D Scene Layer）是一种用于存储和呈现大规模三维地理空间数据的格式和规范。I3s由Esri（Environmental Systems Research Institute）开发，用于在地理信息系统（Geographic Information System，GIS）中处理和共享三维数据。I3s格式通过使用基于Web的服务和数据传输技术，提供了一种高效的方式来存储和传输三维场景数据。它可以包含地形、建筑物、植被和其他物体等各种类型的数据。I3s使用索引和级别（LOD）来组织数据，使得用户可以以自适应的方式加载和渲染不同细节级别的场景数据。使用I3s，用户可以通过Web浏览器或GIS应用程序访问和浏览三维地理空间数据。
这使得用户可以进行交互式的场景探索、空间分析和可视化，同时支持与其他GIS工作流程的集成。通过Cesium.I3SDataProvider来创建数据集，然后通过viewer.scene.primitives.add添加数据集（如图2所示）。
I3s服务能够使用quick_slpk_server来发布（如图3所示），这是用Python语言写的开源软件。使用也很简单，只要把slpk文件放在指定的目录下，直接运行软件就能发布。
3.3 加载GeoJson矢量数据
GeoJSON是一种用于表示地理空间数据的开放标准的格式，基于JSON（JavaScript Object Notation）。它提供了一种简单而灵活的方式来存储、传输和共享地理特征，如点、线、面以及它们的属性数据。GeoJSON可以通过编写或生成JSON数据来创建和解析。它可以用于存储和交换各种地理空间数据，例如地图特征、地理标记、地理边界等。许多地图库和GIS软件都提供了对GeoJSON的支持，使其成为地理数据交换和可视化的常用格式。
GeoJson数据既可以是本地数据，也可以是远程服务提供的数据资源，本实验加载CesiumJS示例数据（本地），加载GeoJson数据的语句十分简单，使用viewer.dataSources.add（dataSource）;dataSource.load（"/path/**"）;实现加载。
3.4 加载自绘图形
3.5 加载CZML数据
CZML（Cesium Language）是一种用于描述Cesium场景的JSON格式。它是CesiumJS的一部分，用于定义和传输场景的动态内容，例如实体（entities）、位置、姿态、属性和事件等。CZML提供了一种简单而灵活的方式来创建和修改Cesium场景。通过使用CZML，可以轻松定义和更新场景中的实体和属性，以实现动画效果和交互性。CZML是一个可扩展的格式，使用CZML可以通过编写和解析JSON数据来创建和修改Cesium场景。CZML文件可以直接加载到CesiumJS的Viewer中，或者通过Cesium的API动态创建和更新场景。CZML格式的数据能够很好呈现实景三维时序化的要求，使用方法非常简单，用Cesium.CzmlDataSource.load来加载。
4 空间分析
CesiumJS提供了许多内置功能，包括距离量测、体积计算等空间分析。使用这些功能可以轻松实现各种三维场景中的测量和分析操作。
4.1 距离和面积量测
首先在Vue3中绘制几何图形时，应该将屏幕坐标转动态换为大地坐标，才能确保绘图和计算的准确性。本文中测量的几何图形的高度参考模式都是CLAMP_TO_GROUND，即不管计算长度还是面积都需要考虑地形的影响因素，更加符合实际生产的需求。计算多段线长度时，利用Cesium.sampleTerrainMostDetailed方法进行地形采样，充分考虑地形对长度的影响，然后将点位的大地坐标转换为三维直角坐标进行长度的计算。计算多边形面积时也需要先采样地形，加入地形影响因素。面积计算使用向量叉乘的方法用于计算多边形的面积。对于平面上的多边形，我们可以使用以下公式计算其面积：面积 = 0.5 × Σ（边向量的叉乘），其中，Σ表示对所有边向量的叉乘进行求和，边向量的叉乘可以通过向量的坐标计算得到。具体将其两个顶点视为向量的起点和终点，然后计算这两个向量的叉乘，即可得到该边的贡献面积。最后将所有边的贡献面积相加，即可得到多边形的总面积。CesiumJS利用这种向量叉乘的方法，根据地球表面上的点坐标计算多边形的面积，可以准确计算多边形在地球表面上的实际面积，考虑到地球的曲率和投影效果（如图5所示）。
4.2 属性拉伸
对二维矢量数据的某一属性进行拉伸能够呈现三维的效果（又被称为“假三维”或者2.5维），这是一种非常灵活且成本又很低的三维实现方式， 具体通过entity.polygon.extrudedHeight来实现，理论上被纵向拉伸的属性可以根据需要任意选择，只要该属性的值具有可量化的特点，最好是数值类型。
4.3 限高分析
限高分析的主要思路就是利用Cesium.ClippingPlaneCollection来创建限高平面，然后通过循环语句来量化加载每个限高平面，用限高平面去检验三维实体的高度，如果限高平面和被检验实体的高度发生冲突就产生明显的视觉反馈，从未达到限高分析的目的（如图6所示）。
4.4 二三维场景对比分析
二三维场景对比分析的用户体验感优于二维场景中的分屏对比，对比效果更加直观。实现原理也非常简单，思路也非常清晰，就是Vue3窗口中利用CesiumJS分别创建三维视图容器和二维视图容器，三维视图容器中加载三维数据集，二维视图容器中加载二维数据集，然后通过相机设置使两边的数据集产生联动，从而达到分析对比的目的（如图7所示）。
4.5 透视分析
透视分析通过射线穿越法实现，首先确定观测点和目标点的三维坐标后，利用Cesium.Cartesian3.subtract来计算两个点之间的坐标差，然后把坐标差作为入参传入Cesium.Cartesian3.normalize方法中对向量进行归一化处理，再把归一化处理的结果作为入参，利用Cesium.Ray创建射线，最后用射线与观测点和目标点之间的三维实体进行相交分析，从而判断两点之间是否通视（如图8所示）。
4.6 路径动态分析
动态分析很好地迎合了实景三维对空间表达时序化的要求，在三维场景中添加了时间影响因素。它的实现非常简单，不需要设计很复杂的逻辑，直接利用CesiumJS中支持的CZML格式数据就能达到效果。为了避免程序冗长，CZML中的位置信息，可以单独存储一个Json文件，然后通过axios.get方法进行读取，然后进行计算（如图9所示）。
5 存在的问题
生成OGC I3s所需的slpk文件还需要借助ArcGIS Pro、FME等商业软件，目前作者还没有成功用开源软件很方便得生成slpk文件。由于个人水平有限，使用CesiumJS内置类进行空间分析的探索还非常的浅显，需要进一步挖掘以实现更复杂的空间分析。
6 结语
整个实验操作下来，大概写了2000行代码，数据来源部分采用了Cesium ION云平台上的数据和示例数据，基本达到了预期的效果。基于CesiumJS将实景三维数据在Web端实现了可视化，体现了实景三维数据真实、立体、时序化反映和表达的特点，并在三维场景中实现了属性查询、空间分析等技术应用。充分体现了利用开源引擎应用实景三维的技术可行性。
参考文献
[1] 自然资源部办公厅关于印发《实景三维中国建设技术大纲（2021版）》的通知[R/OL].（2021-08-11）[2023-12-12].http：//gi.mnr.gov.cn/202108/t20210816_2676831.html.
[2] 罗小飞，银霞.基于Cesium和倾斜实景数据的三维规划辅助决策系统实现[J].测绘与空间地理信息，2022，45（11）：116-118.
[3] 任晨宇，臧永立，刘珍珍.基于Cesium引擎铁路信号运维平台的可视化研究[J].铁道标准设计，2021，65（7）：172-178.
[4] The open specification for 3D data[EB/OL].[2023-12-12].https：//cesium.com/why-cesium/3d-tiles/
[5] 李相迎，王建民，冯兴浩，等.基于Cesium的空间目标观测三维可视化平台.计算机系统应用，2022，31（8）：108–114.
[6] 黄欣然，江文萍，刘一飞，等.Cesium环境中三维场景数据的加载优化策略[J].测绘地理信息，2022，47（S1）：94-98.
