基于Cesium 的智慧园区三维可视化系统设计与实现

彭祥

（武汉邮电科学研究院，湖北武汉 430073）

随着智慧城市在我国大力发展，地理信息系统（Geographic Information System,GIS）在智慧园区的应用从传统的二维系统发展到了三维系统[1-5]。由于园区内强弱电信息具有动态、多维的特点，传统的二维GIS 系统对此类信息的展示较为单一，往往只能将电力设备的信息以二维方式展示，而无法实现对空间、建筑、设备等的渲染与表达，导致大量的多维空间信息无法得到利用，具有很大的局限性[6]。作为开源的三维GIS 地图引擎，Cesium 具有跨浏览器、跨平台的优势，成本更低，效率更高，在轻量级应用场景中具有较好适用性[7-12]，同时Cesium 支持三维地球（3D）、二维地图（2D）以及哥伦布视图（2.5D），可任意切换模式。强弱电信息的可视化可以通过图形化方式展示出来，但同时要求实现对空间位置的查询、建筑的选择、监测设备的展示以及场景漫游等功能，从而达到模拟真实园区的视觉效果。例如，传统的二维系统对于楼层-设备-人信息的联动查询不够形象、具体，而三维系统可以真实地还原园区内建筑物、所处的楼层内监测设备位置以及相关住户信息，在客户端可通过对三维系统的旋转、点击查询将这些信息清晰地展示出来，大大优化用户的体验感。

因此，以园区为研究对象，基于Cesium 这一平台，针对园区内强弱电信息的三维可视化展示，设计和实现了一款以智慧园区为主题的Web客户端，该系统三维可视化效果显著，丰富了社会治理管理方式，减少了人力资源损耗，改善了用户体验方式，通过智慧园区的展示证明了未来智慧城市发展的必要性。

1 系统设计

1.1 系统结构设计

根据智慧园区三维可视化系统项目的需求分析，该系统将采用B/S（Browser/Server），即浏览器和服务器框架，至上而下分为表现层、服务层、数据层、支撑层，如图1 所示。表现层即根据项目需求将园区内强弱电设备划分成多个模块，实现对数据的实时展示、查询、定位、报警提示以及场景漫游等功能；服务层即基于应用服务器和Web 服务器选用Tomcat来实现对数据库的数据访问；数据层即实现对海量的三维模型数据和各类监测数据的存储及访问，包括属性数据和空间数据，很好地承接了对表现层和服务层的数据支持；支撑层则为系统的开发提供硬件与软件设备的支持。整个系统以谷歌地图作为地图，三维数据模型采用glTF 和3D Tiles，同时采用MySQL 数据库来存储属性数据和空间数据，以方便增删查改。

图1 系统结构设计图

1.2 系统功能设计

根据智慧园区系统项目需求分析，系统在功能设计方面主要采用模块化的形式在Web 前端进行可视化展示。模块化展示能够方便客户端查询与信息展示，优化了系统功能，该系统的客户端功能模块设计图如图2 所示。

图2 功能模块设计图

按照功能来看，该系统主要涉及到七大模块：动力设备模块、环境设备模块、监控设备模块、门禁设备模块、消息推送模块、辅助功能模块及平台信息查询模块。

客户端主要实现的功能包括：

1）动力设备模块和环境设备模块通过Echarts图表可视化MySQL 数据库中的数据，提供直观、生动、可交互的数据可视化图表，丰富了交互功能和可视化效果，这两个模块分别用来展示分布式光伏、全钒液流储能、微风微光智能电站、新能源汽车充电站、智慧照明、温湿度监测及水质监测等数据；

2）监控设备模块主要分为园区内多方位监控和立体仓库全景监控，以实现对园区的实时监控管理，基于Cesium 平台，通过导入监控设备glTF 三维模型至指定位置，真实还原现实园区内对监控设备的布局。在客户端前端点击指定的glTF 三维模型监控设备能够调出实时监控画面，其功能包括视频切换、视频播放及视频关闭等[13]；

3）门禁设备模块和监控设备模块均以一样的方式进行模型导入和布局，其功能识别模式采用ID卡、人脸及指纹识别，门禁可通过任一方式解除，通过远程网络视频在Web 前端以悬浮框的形式进行实时监控；

4）平台信息查询主要通过手动查询来获取各个模块的实时数据以及历史数据；

5）消息推送模块主要分为设备故障告警和历史数据处理两项内容，当设备发生故障或历史数据未处理，告警显示框将会弹出且不停闪烁，直到数据恢复正常且告警弹出框停止闪烁；

6）辅助功能模块主要分为场景漫游、园区分层及增删模型处理三项内容。园区内场景漫游即基于Cesium 实现的三维漫游飞行效果，通过点击场景漫游按钮则可实现智慧园区360°漫游。园区分层即通过选择对应楼层的ID 实现所在ID 楼层的所有设备及设备对应属性数据的展示。增删模型处理则主要用以实现模型的添加与删除功能。

1.3 系统数据库设计

MySQL 是目前最流行的关系型数据库管理系统之一，在Web 应用方面，MySQL 也被视为最优秀的应用软件之一。MySQL 具有体积小、速度快、总体拥有成本低等特点。目前所知的Cesium 所支持的模型数据类型包括glTF、glb、bglt 以及3D Tiles 格式数据。其中添加的glTF、glb、bglt 模型本身是不具备任何属性的，只有通过引入MySQL 来存储模型属性，引入后点击数据库模型时便能调用MySQL 里的属性数据[14]。由于该系统数据采集量较大，因此只列出部分数据来源，如表1 所示。

表1 数据来源

2 系统功能实现

2.1 开发方法

该系统以基于JavaScript 编写的Cesium 三维地图引擎为平台，将Visual Studio Code 作为开发工具，以node.js 内置的http-server 开启Web 服务器，使用3D Max 作为建模软件，引入Echarts.js 用于统计图项目工具，以底层MySQL 数据库作为基础，来存储倾斜三维模型的属性数据和空间数据，采用HTML、CSS、JavaScript 等开发语言来实现园区内强弱电信息在Web 前端的可视化展示。

Cesium 支持加载的影像有天地图、谷歌影像及高德等，该系统是以谷歌影像为基础进行编译的，比Cesium 自带的影像分辨率更高，同时Cesium 支持三维地球（3D）、二维地图（2D）以及哥伦布视图（2.5D），且可任意切换模式。

2.2 三维模型数据处理

Cesium 内置了一些glTF 格式的3D 模型，如飞机模型、汽车模型、人物模型、热气球模型及奶牛卡车模型等，这些模型可通过viewer.entities.add()函数在前端页面加载显示。同时entity 支持所有的面和体，通过entity 可以绘制任意形状图形进行加载、隐藏、修改、去除及双击事件等操作。

该项目通过3D Max 建模软件对园区内建筑物和监控设备进行渲染、打光、布局，模拟出真实的园区，然后导出*.dae 格式和*.obj 格式的文件，最后对这两种格式文件进行转换，以生成Cesium 所支持的格式[15]。三维模型数据处理流程如图3 所示。

图3 三维模型数据处理流程图

首先安装colladaToglTF.exe，然后通过cmd 进入colladaToglTF.exe 所在的文件夹进行转化，*.dae 格式转*.glTF 格式，如图4 所示。

图4 .glTF格式模型转化图

确保已经安装Node 命令行工具，然后通过cmd进行转换，*.obj 格式转*.b3dm，同时导出默认的属性表(一个JSON 文件)，如图5 所示。瓦片数据的全部节点信息包含于JSON 文件中，其中children 代表子瓦片属性，bounding Volume 代表包围体属性。

图5 3D Tiles模型转换图

2.3 空间数据与属性数据处理

空间数据处理方式即通过建好的三维模型，将原始数据转换为3D Tiles 数据，然后在前端页面加载显示。3D Tiles 是在glTF 的基础上加入了多细节层次（Levels of Detail，LOD）的结构生成的，是可以加载海量地理数据流和渲染的一种格式，将*.obj格式转换后生成的单一JSON文件可以设置自定义属性表，通过在Web前端点击三维模型自定义属性表将以悬浮框的方式展现。属性数据处理即把采集到的数据录入到MySQL数据库中与对应的三维模型绑定在一起，通过对三维模型设置ID号来读取数据库中的数据，以查询点击的方式将三维模型以悬浮框的方式展现给用户。

2.4 辅助功能

1）场景漫游主要通过创造对象Cesium，绘制工具创建对象drawHelper，界面监听事件InitEvent()和漫游列表信息loadData()等方法来实现，通过在Web前端点击Floor select action，然后以摄像机视角的水平方向360 度，垂直方向180 度围绕园区进行旋转，使用户能够全方位地游历园区以及感受园区内部场景，优化了用户的体验感。

2）增删模块处理通过Viewer 的entities 在线添加glTF 模型，通过ajax 调用后台方法将所添加的类型及经纬度存储至MySQL 数据库[16]，为客户端对园区建筑物和监控设备的布局以及增删查改提供操纵方便。

3）园区分层即建模时，以楼层为单位将其一层一层导入到Web 前端，每一层设置一个ID 号，通过Switch()多分支选择语句来实现点击楼层ID号，以显示想要查看的楼层信息的功能，该项目只设定了eight Floor、nine Floor、ten Floor。系统初始界面如图6所示。

图6 系统初始界面

3 结束语

近几年我国正大力发展智慧城市，而智慧园区也成为发展的必然趋势。传统的二维平台日渐式微，三维可视化平台无疑为智慧城市提出了一种新的建设思路，为发展智慧城市注入了新鲜血液。

该系统的创新在于基于Cesium 平台将园区内建筑以及监测设备以3D 模型方式展示，从而把真实场景以模拟空间还原，将园区内强弱电信息从传统二维单一模式展现变为以三维可视化方式在Web 前端进行展示，实现对园区内建筑-设备-人信息的联动查询及数据可视化分析。实验表明，基于Cesium平台的三维智慧园区为智慧城市的研究与发展提供了一种新方法、新思路。但是在项目应用过程中还存在一定的问题，模型渲染问题不足及模型加载过于缓慢的问题是笔者的下一个研究方向。