缩略图

基于Cesium的社区规划三维辅助系统设计与实现

作者

刘京

株洲市规划测绘设计院有限责任公司 湖南株洲 412007

1.引言

社区规划作为城市规划的关键组成部分,其质量直接关系到居民的生活质量、城市的功能布局以及社会的和谐稳定。在当今时代,传统的社区规划手段已难以满足日益增长的社区发展需求。以往主要依赖二维图纸和人工经验的规划方式,在处理社区复杂的三维空间关系和海量信息时显得力不从心。例如,在建筑布局规划中,难以直观呈现不同高度建筑物之间的空间关系及其对周边环境的影响,容易导致建筑密度不合理、采光不足、交通拥堵等问题。

近年来,众多学者在相关领域的研究为社区规划技术的创新提供了有益借鉴如在智慧园区建设方面,杨兵[1]探索了二三维一体的 GIS 园区系统设计方案和开发技术,彭祥[2]基于Cesium 技术实现了园区内强弱电信息的实时监控与三维可视化展示,这为社区规划中基础设施的规划与管理提供了重要思路。陈政 等学者在智慧水利信息化平台设计中,利用 Cesium 的三维可视化能力,结合大数据分析技术,实现了对水利信息的全面感知和智能分析。曾文春[4]等学者提出利用排水管网 DWG 数据自动构建三维地下管网模型并基于 Cesium 实现排水管网的可视化方法。于淼[5]等学者结合土壤污染扩散规律,以Cesium 为前端实现手段,设计并实现了土壤污染扩散可视化系统,为土壤污染防控提供了技术支持。这些成果启示我们在社区规划中,可借鉴类似技术整合水资源管理、排水系统、环保规划等相关信息,提高规划的科学性和系统性。蔡周平[6]、崔静[7]在三维智慧社区开发中的实践表明,Cesium 技术可实现社区场景的构建与功能实现,如建筑物可视域分析、空间测量等功能,这为社区规划辅助系统中的功能模块设计提供了直接参考。

鉴于上述研究成果及社区规划面临的实际挑战,开发基于 Cesium 的社区规划三维辅助系统显得尤为必要。该系统有望克服传统规划方法的不足,充分发挥Cesium 技术在三维地理信息展示、空间分析和交互操作等方面的优势,为社区规划师和决策者提供一个全面、精准、高效的工作平台,从而推动社区规划向更加科学、智能、可持续的方向发展。

2.系统设计

2.1 结构设计

根据社区规划的实际应用需求,将社区规划三维辅助系统的总体框架分为支撑层、数据层、服务层和表现层。如图 1 所示。

图1 系统结构设计

系统由服务器端和浏览器端构成。服务器端作为核心数据提供者,主要负责为系统提供所需的矢量、栅格、地名、社区现状、三维场景等多源数据。同时,借助GeoServer 等专业的地图服务器,将图层数据及其他相关数据以服务的形式进行发布。用户在浏览器端,通过遵循 HTTP 协议,向服务器端发起数据请求。服务器端在接收到请求后,会对请求进行解析与处理,并为用户提供相应的响应。

在Web 端,采用Cesium 框架来构建三维场景,该框架将在网页上对系统进行展示。通过这种方式,规划师得以与社区规划三维辅助系统实现交互操作。当用户在 Web 端发起请求并成功获取所需的地理信息等数据后,将在浏览器上完成数据的渲染与可视化呈现,从而实现系统的各项功能。

在系统的四层功能逻辑划分中,设施层为软件硬件支撑层,涵盖服务器、操作系统和网络环境等。数据层着重于各类数据(地理信息、三维模型、地名等,含属性和空间数据)的存储与访问。服务层负责数据资源和网络地图服务的发布,涵盖 GeoSever 的矢量与栅格数据服务、Cesium 的三维模型加载和场景动态渲染服务,以及 HTTP 静态与动态资源传输。表示层运用 node.js、Cesium 等技术,实现浏览器端三维地图数据浏览、空间数据分析及社区规划辅助设计功能。

2.2 界面设计

系统界面主要使用 VUE 框架进行搭建,引用 echarts、turf 等插件为用户提供美观的图表展示、良好的前端交互体验。在主界面布局方面,为尽量突出地图内容,仅在右侧底部设置模块选项卡。界面的中心区域是地图主窗口,此窗口具备强大的数据承载能力,能够加载在线地图、二维影像地图、矢量数据、三维倾斜模型以及规划设计模型等多种类型的数据。将图层资源管理面板、信息显示面板、查询面板置为浮动状态,依据用户所选择的不同功能,动态地改变自身的显示或隐藏状态。具体界面设计如图2 所示。

图2 社区规划三维辅助系统主界面

2.3 功能设计

根据社区规划的需求,采用模块化的形式设计系统的各项功能。主要包括基础功能模块、基本信息展示模块、空间数据查询模块、空间分析模块、社区体检模块等,如图 3 所示。基础功能模块主要实现常见的二三维地图一体化浏览操作功能。基本信息展示模块实现规划前社区摸底情况的信息展示。空间数据查询模块实现社区地名查询及相关地物实体查询。空间分析模型实现空间量算、天际线分析、规划方案对比等辅助规划设计常用功能。社区体检模块实现人居环境、市政配套、教育配套等多指标体系城市体检。


图3 系统功能模块

2.4 存储设计

系统所处理的数据涵盖空间数据和属性数据,其中空间数据包括二维和三维形式。对于 DEM、DOM 等表示二维地理场景的数据,采用分幅、分块或分区的方式进行组织管理,并构建多级金字塔索引结构,然后以切片形式存储于 Web文件服务器中。针对倾斜摄影三维模型等表示三维地理场景的数据,首先进行格网和纹理的轻量化处理,然后生成多细节层次(LOD)表示的 3DTiles 格式的三维模型瓦片,并存储至 Web 文件服务器。地名地址、地形图等空间数据则先入库至PostgreSQL 数据库,再通过GeoServer 地图服务器发布为动态地图服务。社区人口、社区现状、不动产登记等属性数据直接存储于 PostgreSQL 数据库,并建立相应的关系模型。

3.功能实现

3.1 系统开发方法

系统选用封装 Cesium 三维地图引擎的 Mars3D 库搭建平台,前端采用 VUE框架,引入 Echarts、turf 等多种插件优化界面,UI 后端采用 JAVA Spring boot 框架,使用 Visual Studio Code、Eclipse 等作为开发工具。使用 ngnix 作为 Web 服务器发布倾斜三维模型、静态文件等数据,使用 GeoServer 作为地图服务器发布栅格影像、地名地址、实体矢量数据等空间数据。基于 Cesium 三维地图引擎实现二三维数据一体化展示查询。系统采用 PostgreSQL 数据库加本地文件存储结合的方式存储 3dtiles、shapefile、geojson、jpg 等不同格式的空间数据和属性数据,在确保数据安全的前提下兼顾加载效率。

3.2 基础功能

基础功能模块主要包括二三维数据浏览、图层控制等功能。Mars3D 库中的config 对象封装了地图类,可以通过配置该对象的各种参数直接实现相关功能。其中配置 scene 参数实现地图视角、阴影、天空背景等场景设置。配置 control参数实现视角复位、放大缩小、全屏、投影切换、比例尺、时间线、鹰眼地图等浏览控件设置。配置layers 对象的类型、url、center、show 等相关参数,可以实现遥感影像、二维矢量、倾斜摄影三维模型、在线地图等二三维数据加载与显示。

3.3 基本信息展示

对社区规划前调研的信息进行展示,包括人居、交通、环境等基本情况展示。对于社区现场图片、多媒体等数据使用 mars-dialog 组件配合 CSS 代码进弹窗行展示。对于人口分布、年龄统计等数据展示,系统先从后台 web 服务器上读取数据,然后在前端使用mars-dialog 组件配合Echarts 插件进行图表动态展示,如图4 所示。对于交通信息展示,除了使用弹窗展示属性信息外,还使用动态绘制的方法在 map 中绘制了社区交通道路空间分布。首先从后台读取社区交通道路shp 数据,使用 shp2jsonlayer 类将该数据转换为 geojson 格式,然后在 Mars3D 中将转换后的对象作为参数,创建 GraphicLayer 对象,并配置 symbol 参数实现道路动态绘制。

图4 社区人口基本情况展示界面

3.4 空间数据查询

空间数据查询模块主要包括地名查询和实体查询,支持矩形查询、多边形查询、圆形查询等多种方式。以矩形查询为例,功能实现时首先定义 map 临时三维地图对象,在onMounted 函数中,将全局地图对象传递给map 对象,使用map对象中的 graphicLayer 成员的 startDraw 方法,设置其绘制类型参数为 rectangle,实现矩形绘制。该方法返回的是一个Promise 对象,将该对象返回的结果作为查询范围参数传递到后台数据库中进行查询。

地名查询:首先在GeoServer 中发布地名数据,创建相应图层,然后基于输入的查询关键字,在 Mars3D 中使用封装 Cesium 空间查询功能的 API 来发送请求给 GeoServer,并处理返回的结果,根据查询结果,在前端以列表形式展示查询内容,并在地图上标记出相应的位置。

实体查询:根据应用场景需求,实现在倾斜三维模型上鼠标点击查询任意地物实体的属性。以查询建筑物任意层属性信息为例,首先在 PostgreSQL 数据库中准备建筑物层相关的空间数据和属性数据(不动产属性等),使用 GeoServer发布空间数据,然后在 Mars3D 中使用 WfsLayer 类加载 GeoServer 发布的服务,根据查询返回的结果创建单体化范围面图形并高亮显示建筑物层,使用bindPopup 方法弹框显示相关属性信息。为了在三维模型中直观显示立体查询效果,以上流程中创建单体化范围面图形尤为重要。在创建过程中,首先获取建筑物层的二维矢量面范围、底高、顶高等参数,然后在 Mars3D 中基于参数拉伸一个 PolygonPrimitive 类型体对象,设置该对象高亮显示样式,绑定要显示的属性内容,最后将对象返回到前端显示。实体查询矢量面数据创建关键代码如图 5所示。

图5 实体查询矢量面数据创建关键代码

3.5 空间数据分析

空间数据分析功能模块主要包括空间量算、日照分析、天际线分析、视域分析、方案对比分析等进行规划设计时常需要使用的功能。因为Mars3D 库将量算、日照、可视域空间分析、模型相关分析等功能都统一封装为thing 对象 ,因此实现时可以直接在前端调用该对象的 Measure、Shadows、Skyline、Sightline 等类实现空间量算、日照分析、天际线分析、视域分析等功能。在实现规划方案对比分析功能时,需要先根据规划方案模型的高程信息,使用 thing 对象的开挖类TerrainClip 或者压平类TerrainFlat 对三维地形进行开挖或压平处理,然后将规划方案模型作为手工模型类型加载到三维场景中,在完成方案与三维地形融合处理后,可使用卷帘的方式实现规划方案对比分析功能。

3.6 完整社区体检

完整社区体检模块旨在实现《完整居住社区建设标准(试行)》中与空间位置相关的社区建设指标体检功能,为社区规划提供决策依据。

依照完整居住社区一级指标分类,从 PostgreSQL 数据库提取空间数据,经GeoServer 发布为图层服务。如基本公共服务设施完善指标下的社区综合服务站、幼儿园、社区卫生服务站等内容,需先从数据库不同表获取其空间数据,再按建设要求关联属性数据,像幼儿园体检需检索建筑面积等指标的属性字段与数值。

完成所有一级指标图层服务发布后,于 Mars3D 绘制体检范围线,利用空间查询按一级指标分类查询实际建设内容指标,并与标准指标值对比,自动给出指标是否达标的检查结果。最后将检查结果以表格形式返回前端展示,实现社区各项建设指标可视化。图 6 呈现的是某社区的各建设内容指标的体检结果,规划师和决策者可以直接根据该结果开展详细规划设计和决策分析。


图6 完整社区体检功能界面

4.结束语

本文详细阐述了基于 Cesium 的社区规划三维辅助系统的设计与实现。相较于传统的二维“规划一张图”系统,本系统允许规划师和管理者在三维视角下获取社区的基本信息、查询社区及其周边的基础设施状况、进行完整社区的体检评估、开展日照分析、可视域分析、天际线分析以及规划方案的对比分析等规划设计工作。此外,通过数据脱敏处理,系统能够以公众版本的形式发布到社区电子屏等终端设备,从而为公众参与社区规划并与规划师进行互动沟通提供了重要平台,为社区规划的实施落地提供了先进的技术手段。

参考文献

[1]杨兵,王方雄,康祥瑞.基于 Cesium 平台的 GIS 园区系统开发[J].软件,2018,39(12):99-102.

[2]彭祥.基于 Cesium 的智慧园区三维可视化系统设计与实现[J].电子设计工程,2021,29(08):81- ⋅84+89 .

[3]陈政,王建雄,杨振林.基于 Cesium 三维可视化技术的智慧水利信息化平台设计[J].港口科技,2024,(11):30-37+43.

[4]曹文春,董博.基于 Cesium 的排水管网可视化[J].城市勘测,2024,(04):38-42.

[5]于淼,王占刚.基于 Cesium 的土壤污染扩散可视化系统设计[J].信息技术与信息化,2022,(09):77-80.

[6] 蔡 周 平 . 基 于 Cesium 的 三 维 智 慧 社 区 开 发 [J]. 北 京 测绘,2020,34(02):190-193.

[7]崔静,陈贵珍,储鼎,等.三维智慧社区网格化管理系统的设计与实现[J].测绘与空间地理信息,2023,46(S1):109-111+115.

[8]Mars3D 开 发 教 程 [EB/OL].(2023-06-11)[2025-01-8].http://mars3d.cn/doc.html#map/thing.

[

作者简介]

刘京(1986-),男,人,硕士研究生,高级工程师,高级网络规划师。研究方向:GIS 软件开发、智慧城市、实景三维等工作。