基于WebGL 的智慧社区三维可视化应用研究

刘天财　杨宇青　马继承　胡锋

摘要： 智慧社区是智慧城市建设的基本单元，针对基于传统三维WebGIS 技术开发的智慧社区三维可视化平台难以满足大众需求和社区治理体系治理能力现代化要求的问题，通过对三维可视化技术进行研究，探索WebGL 技术在智慧社区三维可视化中的应用，设计开发三维可视化管理平台。应用实践表明，基于WebGL的智慧社区三维可视化管理平台实现了社区轻便化、可视化、网格化、精细化管理，提升了社区治理体系和治理能力现代化水平。

关键词： 智慧社区 WebGL 倾斜摄影 三维可视化

中图分类号： P208;TP399 文献标识码： A 文章编号： 1672-3791（2023）24-0233-06

我国在城市化持续快速推进的过程中取得了巨大的成绩，也面临着人口膨胀、重点人员及流动人口管理和服务难、公共安全瓶颈等诸多城市治理问题，社区作为人们社会生活的基本场域，这些问题随之下沉到社区［1］。为解决社区治理中的问题，学者们从治理机制和技术手段上提出了创新治理模式［2-5］。三维WebGIS技术可将海量的三维数据快速的可视化呈现，展示出社区的实景三维地图、网格图，以及各种重要物联网设备的运行状况等信息，为智慧社区的智慧化管理提供强大的三维地理空间时空基底，使社区管理人员更好地进行人员管理、房屋管理、网格管理，监控社区整体安全状况等，是智慧社区建设的重要技术手段之一。但基于传统WebGIS 技术的智慧社区系统存在开发成本高、依赖插件、兼容性差、扩展性差、运行速度慢等问题［6］，难以有效满足大众的需求和社区治理体系治理能力现代化的要求。随着浏览器技术创新发展和计算机硬件性能的不断提升，无须安装插件即可在网络浏览器中进行三维图形渲染和交互的WebGL 技术日益成熟，可综合利用WebGL、倾斜摄影、物联网等技术，整合社区各类资源，开发轻便化的智慧社区三维可视化管理平台，赋能社区治理与服务，打造社区治理新模式。

1 关键技术

1.1 WebGL 技术

WebGL（Web Graphics Library）是由Khronos Group发布的一项可在浏览器中绘制和渲染三维图形，并可实现三维场景漫游和交互的技术，经顶点着色器、图元装配、光栅化、片段着色器、像素处理、绘制缓存等步骤和流程完成三维图形的绘制［7］。WebGL 的出现开启了无插件的三维可视化时代，这种绘图技术基于OpenGL ES 2.0 标准，能够使用JavaScript 与GPU 进行交互，浏览器直接调用显卡GPU 进行三维渲染，创建并流畅地展示复杂的三维场景和模型［8-10］。WebGL 技术被广泛用于虚拟现实、数据可视化、科学计算等领域，与其他技术相比，它的优点在于高效、跨平台、强大和易于使用。该技术在不需要插件或其他依赖的情况下，通过浏览器内核直接调用计算机的GPU 硬件进行三维图形渲染，具有高效的渲染性能；不受平台限制，能够在任何支持WebGL 标准的浏览器上运行，支持WebGL 1.0 和WebGL 2.0 两个版本，同时也支持OpenGL ES 2.0 标准；WebGL 技术是以开放源代码形式发布的，因此对于开发者来说是免费的，具有开放性。架构如图1 所示。

1.2 倾斜摄影

倾斜摄影技术（机载多角度倾斜摄影测量技术的简称）是国际航空摄影测量领域发展起来的一项高新技术，该技术突破了传统航空摄影测量只能从一个垂直方向拍摄的局限，通过无人机、直升机等飞行平台搭载5 个传感器（相机），从1 个垂直、4 个倾斜不同的视角同步采集影像，获取到丰富、完整、准确的地物信息，通过先进的定位、融合、建模等技术，生成真实的三维模型，很大程度降低了三维建模的成本［11-14］。通过该技术生成的三维模型具有够真实地反映地物情况、单张影像可测量、建筑物侧面纹理可采集等特点。倾斜摄影主要技术包括摄影机和相机参数标定、摄影规划和飞行控制、影像处理和数据处理、数据融合和编辑等。

1.2.1 摄影机和相机参数标定。

倾斜摄影需要使用具有足够高精度的摄影机和相机，确保拍摄过程中的实际物体尺寸和形状不会发生变化。摄影机和相机参数标定是确保摄影成像几何精度的基础。

1.2.2 摄影规划和飞行控制

倾斜摄影需要制订摄影规划，选择适当的摄影高度、摄影方向和飞行速度。摄影规划应该充分考虑地形变化、地物特征和拍摄要求，避免出现遮挡和重影现象。飞行控制则是在实际拍摄中，保证飞行器沿着预定路径飞行，拍摄出高质量的倾斜影像。

1.2.3 影像处理和数据处理

影像处理是将所获取的倾斜影像数据进行处理和优化，得到高质量的影像成果。处理内容包括影像纠正、建立相对定向和绝对定向模型等。数据处理是指将处理后的倾斜影像数据进行数值计算、分析和测量，得到地面三维信息和地物特征。

1.2.4 数据融合和编辑

倾斜摄影在执行过程中会得到大量的影像和数据信息。要将这些数据信息高效、准确地整合起来，需要进行数据融合和編辑。数据融合包括将不同时刻、不同视角和不同光谱范围的倾斜影像数据进行组合和叠加，生成全方位、高分辨率的影像。数据编辑则是依据应用要求，对倾斜影像数据进行裁切、分割、分类等处理，得到符合应用需求的数据成果。

当前，倾斜摄影技术被广泛应用于智慧城市（社区）建设、城市规划和土地利用、基础设施建设、旅游和文化遗产保护、自然资源管理、地质灾害防治、应急处突等领域，对经济社会高质量发展发挥重大作用。

2 平台设计与实现

2.1 系统结构

智慧社区三维可视化管理平台基于B/S 结构（Browser/Server Architecture）进行设计开发，B/S 结构是一种常见的软件架构模式，它将平台的功能划分为两个主要部分：浏览器（Browser）和服务器（Server）。浏览器作为客户端，负责向用户展示平台的三维可视化交互界面，并接收用户的输入操作，通过发送请求到服务器来获取数据和执行业务逻辑。服务器作为服务端，负责处理浏览器发来的请求，执行相关的业务逻辑，从数据库或其他资源中获取数据，并将处理结果返回给浏览器。该结构通过将业务逻辑的处理和数据的存储放在服务器端，使得平台系统具有更加灵活、易于部署和维护，并提高了数据的安全性和可扩展性等优势，是一种较好软件架构模式。

2.2 总体架构

智慧社区三维可视化管理平台按照标准统一性、安全可靠性、创新服务、业务驱动、灵活性、平台通用性、简洁易用的原则进行设计，结构采用B/S 结构。总体框架以法律法规与标准规范、安全保障与运行管理两大保障体系为支撑，以基础设施层为基础，社区专题数据和地理空间数据为驱动，构建三维可视化管理平台。智慧社区三维可视化管理平台总体框架包括基础设施层、数据层、支撑层、应用层、表现层，如图2 所示。

（1）基础设施层是支撑运行环境，是智慧社区三维可视化管理平台建设载体，为上层应用和服务的运行和平台的稳定性、可扩展性和安全性提供保障。包括计算资源、网络资源、存储资源等。

（2）数据层包括基础地理数据库、实景三维数据库、单体化数据库、网格数据库、专题数据库等。

（3）支撑层包括GIS 服务器、Web 服务器、数据库管理系统等，提供地理空间数据服务、Web 应用发布以及数据库管理等。

（4）应用层在数据层和支撑层的基础上，根据智慧社区三维可视化管理需求，平台提供人房一体化管理、监控管理、网格管理、三维可视化分析、运维管理等服务。

（5）表现层是用户使用系统的窗口，用户根据相应的权限可以通过PC 端、移动手机端和其他终端进行交互。

2.3 功能设计

智慧社区三维可视化管理平台聚焦社区可视化、网格化、精细化管理需求，以三维场景数据为底座，地理空间数据和专题数据为驱动，开发智慧社区三维可视化管理平台，实现社区人房一体化管理，主要功能包括人员信息管理、房屋信息管理、人房一体化管理、三维空间分析、三维可视化分析、网格管理、监控管理、三维地图基本操作（展示、漫游、放大缩小）、地图测量（包括测面积、测长度和测高度）等（如图3所示）。

2.4 数据库设计

智慧社区三维可视化管理平台数据主要有人口信息、房屋信息、监控点位数据等关系数据表和倾斜摄影数据、单体化数据、网格数据等空间数据。关系数据用关系数据库进行存储，按照标准化和规范化的原则进行设计，采用第三范式标准，在性能、扩展性和数据完整性方面实现了较好平衡。单体化数据、网格数据存储于空间数据库中，三维倾斜摄影数据以文件形式进行存储管理，通过WebGIS 服务器进行服务发布以提供使用。视频传感器表包括传感器的基本信息和三维坐标信息，如区域、设备名称、设备ID 号、经度、纬度、高程等；房屋信息表包括社区房屋基本信息，如户主姓名、户主身份证号、房屋编号、楼栋信息、网格编号等。主要数据及部分数据表结构如表1—表3 所示。

2.5 功能实现

智慧社区三维可视化管理平台聚焦社区可视化、网格化、精细化管理需求，以地理空间数据和专题数据为驱动，开发了人员信息管理、房屋信息管理、人房一体化管理、三维空间分析、三维可视化分析、网格管理、监控管理、三维模型基本操作等功能模块。图4为部分功能截图。

2.5.1 人员信息管理

人员信息管理主要是对社区内居民基本信息的维护、更新管理，包括户籍人员、非户籍人员以及特殊人员的信息录入、更新，以及按人员年龄、区域、人员类型、所属网格等进行统计分析。

2.5.2 房屋信息管理

房屋信息管理实现对房屋所属社区、居委会、网格、楼栋、楼层、房间号等信息进行采集入库、更新、维护等，并与房屋单体化数据进行关联，便于社区管理者快速定位到房屋。

2.5.3 人房一体化管理

该功能模块将人口信息和房屋信息通过ID 进行关联，以实现“以房找人”“以人查房”。“以房找人”是通过在实景三維场景中点击房屋，房屋高亮显示并展示房屋所住人员基本信息。“以人查房”是通过输入人员姓名，搜索定位到该人员所居住的房屋位置，并展示房屋、住户属性信息。

2.5.4 三维空间分析

该模块在三维模型中实现通视分析、可视域分析等，可用于安防工程中监控选点布设等。

2.5.5 三维可视化分析

在三维模型中，对社区人员进行统计分析并展示分布情况。如按照居委会、网格单元等，对党员、军人、残疾人、低收入人群等特殊人群进行统计分析，并在三维模型中展示各类特殊人群中分布情况。

2.5.6 网格管理

在三维模型中展示社区网格划分情况及网格信息（网格编号、网格员等）查询、定位等操作，按照网格范围进行人员信息的精准查找以及低收入群体、党员、军人、残疾人这四类人员统计分析。

2.5.7 监控管理

该功能模块主要对监控视频的位置信息（地理坐标）、链接属性等基本信息进行更新和维护。在三维模型中根据监控视频的地理坐标进行定位、符号化并展示分布情况，单击监控视频符号即可查看实时监控画面。

2.5.8 三维模型操作基本功能

包括3D 地图展示、漫游、放大缩小、地图测量（包括测面积、测长度和测高度）等功能。

3 结语

本文充分利用WebGL、倾斜摄影、互联网等技术，对智慧社区三维可视化进行研究，研发了智慧社区三维可视化管理平台，主要功能包括人员信息管理、房屋信息管理、人房一体化管理、三维空间分析、三维可视化分析、网格管理、监控管理、三维地图基本操作、地图测量等，实现了社区可视化、网格化、精细化管理。应用实践表明，基于WebGL 技术开发的智慧社区三维可视化管理平台无须安装渲染插件，具有跨平台、跨浏览器、兼容性好、使用轻便简洁等特点，能够满足社区治理体系和治理能力现代化技术要求，可为智慧社区三维可视化建设提供新的技术方法和模式参考，对智慧社区的建设具有重要现实意义。

参考文献

[1] 肖子昙. 南京市仙林社区网格化治理研究[D]. 南京：南京师范大学，2019.

[2] 杨博. 基于WebGIS 的智慧社区管理系统的设计与开发[D]. 重庆：重庆交通大学，2019.

[3] 邹思雨. 基于WebGIS 的智慧社区平台设计与实现[D]. 南京：南京师范大学，2019.

[4] 和世开. 社区地图在社区网格化管理中的应用[J].城市勘测，2019（1）：111-113.

[5] 杨博，冯晓. 重庆市数字社区综合平台管理系统的构建[J]. 测绘，2019（2）：18-20.

[6] 王星捷，卫守林.WebGL 技术的三维WebGIS 平台研究与应用[J]. 遥感信息，2019，34（3）：134-138.

[7] 马亮，王彬.WebGL 三维技术、建模分析及优化研究[J]. 长春师范大学学报，2022，41（2）：64-69.

[8] 郭建雄. 基于WebGL 的地理信息数据三维可视化方法研究[D]. 南昌：东华理工大学，2019.

[9] WATTERS A R. Shader-like Computations in WebGL for Advanced Graphics and General Purposes[J]. Computing in Scicence and Engineering，2021，23（2）：54-63.

[10] RODRIGUES R， MATOS T， DE CARVALHO A V， et al.Computer Graphics Teaching Challenges：Guidelines for Balancing Depth， Complexity and Mentoring in a Confinement Context[J].Graphics and Visual Computing，2021，4：200021.

[11] 孫杰，谢文寒，白瑞杰. 无人机倾斜摄影技术研究与应用[J]. 测绘科学，2019，44（6）：145-150.

[12] 于丽丽.基于无人机倾斜摄影测量技术的城市三维实景建模研究[J].测绘与空间地理信息，2021，44（5）：86-88.

[13] 冯增文，李珂，李梓豪，等. 低空无人机的倾斜摄影测量技术在城市轨道交通建设中的应用[J]. 测绘通报，2020（9）：42-45.

[14] 陈理想. 无人机倾斜摄影实景三维建模及质量评价[J]. 测绘与空间地理信息，2019，42（1）：159-162.