基于开源引擎的3D场景基础平台构建方法及实现
高亚伟姜浩辰吴曼芙
（自然资源部第一地形测量队，陕西宝鸡 710054）
摘要： 随着WebGIS技术的不断发展和3D GIS技术的盛行，3D WebGIS已成为当前WebGIS发展的主流。 3D场景基础平台可以为3D GIS实际应用场景提供技术支撑。 本文在分析常用的开源WebGL框架的基础上，利用某一地区的数据，基于开源引擎Cesium.js，通过数据转换、数据编辑，将地形数据、图像数据、倾斜模型和矢量组合起来、瓦片生成等。将数据处理成符合Cesium标准的格式，通过简单的服务配置进行发布和浏览，实现了3D场景基础平台的基本浏览和测量功能，有效降低了构建成本3D场景基础平台。 本文的研究成果为3D场景基础平台的建设提供了一种具有较强兼容性、开放性和可移植性的3D场景基础平台Web开发方法。
关键词：3D实景模型； 3D可视化； WebGL框架； 数据发布； 后阳线测量； 场景配置
近年来，3D地理信息技术发展迅速，在3D地图表达、虚拟现实、仿真和自然资源管理等领域得到广泛应用。 三维场景基础平台建设技术是现实三维中国建设的重要技术支撑之一。 是建立数字孪生城市、实现精细化、动态化、智能化城市管理的技术基础。 也为现实中的三维中国建设成果在国土和空间上的应用提供了基础。 为规划、自然资源调查检测、建筑工程、景区建设、地质灾害等多个领域提供基础技术支撑。
随着WebGIS技术的不断发展和3D GIS技术的盛行，Web 3D技术与GIS技术相结合的3D WebGIS技术已成为WebGIS发展的主流，也是GIS发展的重要方向[1]。 其中，3D场景基础平台可为3D GIS实际应用场景提供技术支撑。 例如，在矿产资源管理方面，可以通过丰富、重叠的数据类型实现三维空间可视化，实现矿产资源储量人工估算、外汇征收抵扣等应用效果； 在防灾减灾方面，可利用地形图、地质图、地质环境等将三维建模与检测等多种信息相结合，实现三维地质灾害管理、分析和检测； 在国土空间规划编制和实施检测评价方面，以三维场景基础平台为基础，整合现有城市级精细倾斜摄影数据，叠加各类现状、规划和管理数据，构建三级立体场景基础平台。立体场景，完整真实地还原土地的空间分布； 在智慧城市方面，通过人工模型、各种传感器和实时视频流数据，城市级设备-建筑-人信息的联合查询和数据可视化分析。
目前，市场上很多商业软件都支持各种地形数据、图像数据、矢量数据和倾斜数据的三维可视化。 但这种商业软件开发成本较高，开放性和可移植性较差。 本文基于某地区的数据，采用Cesium开源框架设计并实现了一个具有较强兼容性、开放性和可移植性的3D场景基础平台。 从数据处理到数据展示均采用开源工具和框架。 场景底图数据以静态文件的形式配置，帮助用户快速构建直观、有效表达空间特征的3D场景基础平台。
1 WebGL框架分析 1.1 开源框架选择
WebGL（Web 图形库）是一种 3D 绘图协议，允许将 JavaScript 和 OpenGL ES 2.0 结合起来，通过减少 OpenGL ES 2.0 的 JavaScript 绑定来为 HTML5 Canvas 提供硬件 3D 加速渲染。 WebGL可以利用系统主板在浏览器中流畅地显示3D场景和模型，无需开发插件。 目前常用的开源WebGL框架有BabylonJS、ThreeJS、SceneJS、Cesium等。
BabylonJS是微软开发的一个完整的JavaScript框架，因此与微软的其他技术具有良好的兼容性。 BabylonJS 用于在 HTML5、WebGL、WebVR 和 Web Audio 中创建 3D 游戏和体验。 适合中小型项目，特别是带有混合媒体或游戏项目、VR体验项目的项目。 它可以达到此类项目所需的一些要求。 3D 场景。 BabylonJS功能比较全面、丰富、灵活，模型显示不失真，但学习难度大、周期长，需要大量深入学习和研究。
ThreeJS 是一个开源 WebGL 框架，以易于使用、简单且直观的方式封装了 3D 图形编程中常用的对象。 它还具有许多外部常用对象和功能强大且易于使用的工具。 ThreeJS是一个广泛使用的Javascript 3D库，可以在网页浏览器中创建令人眼花缭乱的三维场景和动画，并且可以很好地支持PC、移动、Android和Windows系统等不同平台。 ThreeJS其实并没有提供一些基础建模软件的插件，但是因为英文的学习资料很多，所以ThreeJS在Momo小程序的开发中占据了很大的比重。
SceneJS 是一个开源 JavaScript 3D 引擎，可满足计算机辅助设计需求。 特别可以满足对细节要求较高的模型的需求，例如工程和医学中常用的高精度模型。 SceneJS 旨在快速绘制大量单独链接的对象，但缺乏阴影和反射等游戏引擎功能。 SceneJS在国外很少使用，因为它加载大型模型时速度慢，并且缺乏碰撞检查等功能。
Cesium 是一个用于 3D 月球和地图的 JavaScript 开源引擎。 它是一个用于显示 3D 月亮和地图的开源 JS 库。 它支持2D、2.5D和3D地图显示，支持栅格和矢量数据编辑以及3D模型。 加载和编辑[2]支持大多数浏览器和移动浏览器。 还提供基于JavaScript语言的开发套件，方便用户快速构建零插件的虚拟地球Web应用，并在多平台的可视化精度、渲染质量和易用性方面都有优质的性能保证。 Cesium 使用 WebGL 进行硬件加速图形，无需任何插件支持。 通过提供的JS API，Cesium可以实现全局级、高精度的地形和图像服务，以及基于动词的数据可视化等功能。 除了专注产品本身，Cesium还致力于打造开放共赢的生态平台，为特定行业应用提供成熟可靠的解决方案。
BabylonJS、ThreeJS 和 SceneJS 这四个开源框架与地理信息系统的兼容性不太好。 构建3D场景基础平台，需要选择GIS功能强大、可扩展性高的3D开发框架，因此本研究选择Cesium作为场景的基础框架。
1.2 3D场景基础平台地形加载策略
3D场景基础平台一般是建立在3D底图（3D月亮）之上，Cesium中的3D月亮是通过地形服务和图像服务结合实现的。 Cesium中的地形系统使用一种技术从流式切片数据生成地形，支持两种类型的地形：STK世界地形和小地形[3]。 其中，STK World Terrain是高分辨率的基于量化网格的地形，是基于网格的地形数据，可以借助WebGL中的Shader进行渲染； 小地形是基于高度图的中高码率地形数据。 由于这两类地形数据量巨大、复杂程度远远超出计算机的处理能力，因此很难实现地形数据的快速在线圈定。 Cesium使用细节层次（LOD）算法来处理地形数据[3]。 由于LOD算法的核心是通过观看距离来确定显示细节的水平，因此它优化了不同观看距离下显示细节的复杂度。 提高绘图效率。
2 3D场景基础平台设计及关键技术 2.1 3D场景基础平台结构设计
3D场景基础平台基于B/S结构设计。 与传统的C/S结构相比，具有轻量级、多并发、易兼容等特点。 3D场景基础平台分为数据层、服务层和表现层三层结构[4]，其结构如图1所示。最底层是系统的数据层，提供数据支持面向服务层进行数据处理和格式转换； 服务层为表示层提供空间数据网络服务。 其中，Nginx主要作为代理发布静态标准金字塔地图数据，GeoServer主要提供地图服务。 ，与商业软件不同，服务层采用开源平台； 表示层基于Cesium，通过浏览器应用提供三维场景可视化基础平台。
图1 三维场景基础平台结构设计
图1 3D场景基础平台结构设计
2.2 构建3D场景基础平台的关键技术
2.2.1 基于开源工具的数据处理和发布
3D场景基础平台的数据处理主要涉及地形、图像、矢量等基础数据。 不同类型的数据需要处理成标准服务对应的格式，然后才能发布服务供Cesium调用。 本研究使用开源GDAL工具来处理地形和图像数据。 该工具具有跨平台、高效的特点。 数据处理方法如表1所示。
2.2.2 叠加3D标注的倾斜模型
在3D场景中显示倾斜模型时，需要同时叠加注释服务。 注记服务一般以WFS服务或GEOJSON的形式添加，正常叠加注记要求所有注记贴在地面上或者有统一的高程。 针对倾斜模型高度不一致的情况搭建typescript环境，该3D场景基础平台首先渲染WFS服务，然后进行回弹处理，将高程信息重新分配给标注点，从而根据倾斜模型的高度渲染并显示不同高程的标注。倾斜模型。 记住。 治疗流程如图2所示，治疗优化后的疗效如图3所示。
图2 倾斜模型叠加3D标注的处理流程
图2 倾斜模型叠加3D标注处理流程
图3 倾斜模型叠加三维标注效果
图3 倾斜模型叠加3D标注效果
2.2.3 动态配置服务风格
Styled Layer Descriptor（SLD）是OGC于2005年提出的基于XML语言的标准，它描述了如何在WMS规范的基础上进行扩展，以支持用户定制要素数据。 符号显示，即在一定条件下，允许WMS服务器扩展地图可视化的形式。 SLD标准允许开发者在客户端自定义并分层展示地图，极大扩展了地图可视化的灵活性。
由于GeoServer的默认样式往往无法满足3D模型复杂测绘的需求，因此需要重新编译SLD文件。 SLD文件重新编译虽然存在工作量大、容易出错、不直观等问题，但GeoServer支持SLD来设置服务样式。
这个三维基础模型在ArcMap 10.2软件中进行造型，然后通过开源工具Arcmap2SLD导入SLD文件。 最后将SLD文件导出到GeoServer进行样式配置搭建typescript环境，大大减少了手写样式的工作量，可以使用ArcMap配置更漂亮的样式。 风格，实现服务风格的动态配置。
3 3D场景基础平台的实现 3.1 3D场景基础平台数据加载
3D场景基础平台通过调用开源Cesium框架API加载已发布的数据服务。 其中，地形数据主要通过CesiumTerrainProvider类加载。 Cesium通过请求Nginx发布的高程瓦片数据来计算高程点信息并创建可视化地形数据[6]； 图像数据通过UrlTemplate-ImageryProvider类加载； 矢量数据通过 WebMapServiceImageryProvider 类加载。 ；倾斜模型数据的组织形式一般为二进制存储，OSGB格式，内嵌链接纹理数据（.jpg）。 OSGB格式需要通过CesiumLab工具转换为3D Tiles格式，然后使用Nginx代理发布为数据服务。 最后，在Cesium中使用Cesium3DTileset类加载。
3.2 3D场景基础平台配置
3D场景基础平台开发使用的基础框架是Vue3.0+TypeScript，单元（UI）控制使用Ant Design Vue。 3D场景基础平台的配置保存在json静态文件中。 项目启动时，通过onMounted方法手动解析json静态文件中的配置，并初始化3D月亮。 json配置文件包含默认视角、最大最小比例尺、地图控制、地形服务、底图服务等基础配置。 任何数据服务都可以通过相应配置json静态文件来快速构建三维场景基础平台。
3.3 3D场景基础平台贴距测量功能
3D场景基础平台的测距功能主要是通过封装Cesium中的Math类来实现[7]。 距离测量和计算功能的展示如图4所示，主要实现思路如下：
图4 地对地距离计算功能展示
图4 接地距离测量功能显示
1）开始检测，监听键盘点击（LEFT_CLICK），记录起点坐标，绘制折线。 折线的动态轮廓是通过将 CallbackProperty 属性绑定到 Positions 属性来实现的。
2）监听键盘通讯波（MOUSE_MOVE），记录其坐标值，绘制起点与通讯点的连线，并计算两点之间的距离。
3）监听键盘右键风暴（RIGHT_CLICK），结束测量，并销毁风暴句柄（ScreenSpaceEventHandler）。
4）计算到地面的距离时，通过SampleTerrain函数统一获取各点的高程，将分段估计的空间距离叠加，得到到地面的距离。
4 尾声
本文在对常用开源WebGL框架分析的基础上，选择Cesium开源框架构建一套基础的3D可视化场景，实现了3D场景的基本浏览和测量功能，提供了构建基础3D可视化场景的方法。 3D场景平台。 轻量级、低成本、高效的开发方案。 未来将在数据处理发布、数据加载效率等方面进行进一步研究，增强3D场景基础平台承载数据的能力。
本文清晰地解释了借助cesium引擎构建平台的过程。 整体流程比较完整，但在数据处理、平台功能等部分更加细致。
引用本文的初衷是为不懂GIS相关业务的读者提供一定的基础知识。 稍后，笔者将介绍渲染引擎和GIS相关技术，例如数据融合、轻量化、数据修复、低代码构建器等内容。
