言

近几年，我国智慧城市建设步伐也不断加快，党中央和国务院也更加注重智慧园区的建设与发展，智慧园区建设与园区产业发展相结合，向着创新化、生态化发展，更加注重高新技术、绿色环保型等产业的发展，将管理创新与园区智能化相结合。

园区的发展更新换代，集合如：云计算，物联网，大数据，人工智能，GIS等新兴技术，通过对园区内外的数据和资源进行检测、分析、集成和响应，实现对园区管理信息化、信息传递即时化、基础设施智能化、公共服务便捷化、产业发展现代化、社会治理精细化等，以提高园区产业聚集能力、企业竞争力，并且以园区可持续发展为目标的先进园区发展模式和理念。

今天将介绍图扑软件 Hightopo自主研发的 HT 引擎协助打造三维可视化的智慧朔州开发区，通过未来科幻的建筑风格多维度展示开发区，以360度全景可视化结合数据场景联动，建立一个控制智慧综合型的智慧城市项目。

效果展示

整体场景由地球视角动态下钻至中国版图，对山西省轮廓进行特效光边沿立体描绘，并在此下钻至朔州开发区整体三维场景。其中重点对科创商务园区进行漫游动画查看朔州新产品展销馆。

智慧朔州开发区以展会大屏的整体设计形式，页面中展示全区的三维场景，左右两侧辅以数字化智慧城市监测常见的技术观念里尼指标进行展示，提升业务人员数据分析可视化效率，提升管理决策成功率，辅助领导层进行管理预测。

系统分析

全场景漫游

除了初始化的园区全场景漫游、定点漫游外，也提供了单个园区的漫游线路，让用户以第一人称的视角按照指定线路对开发区进行全场景漫游，在制定线路的时候可以参考重点区域或智能化水平较高的区域进行制定，给用户呈现开发区重点发展区域以及智能化发展成效。

园区信息可视化

园区信息可视化主要包含园区GDP、财政数据、工业总产值、固定资产、产出强度、企业汇总、投资要素成本、招商引资。通过园区基本数据信息可对整体园区基本现状有直观的了解。数据的展示信息可根据项目的实际需求进行调整，以满足园区信息的数据可视化。

沙盘布局可视化

整合了朔州开发区内的各项重要信息如园区道路信息、园区水系分布、西山生态林景观分布等进行全方位展示。传统的园区管理在成本和投入上都耗费很多精力。通过互联网多样化的可视化系统管理方案，整理出一套园区模块统一在线可视化管理集合，智慧园区通过智能化的监测控制与管理系统，促进信息应用的智慧化和深度化，有效节省了园区运行所需的能源和人工成本的消耗，提升土地监测、布局监控的效率和准确度，解决最根本的环节，提高工作效率、增强园区服务质量和建筑环境的利用率，保障园区安全、稳定、持久的发展。

管网分布可视化

可通过多级检索功能菜单实现给水管道、污水管道、雨水管道、再生水管道、电力管道、通信管道、燃气管道、供热管道等展示。管网分布可视化可帮助管理者实现对综合管线以标准化的方式进行管理，以三维可视化的形式展现地下管线的埋深、形状、走向、周边环境。

同平面管网相比，管道 3D 可视化更方便运维人员进行地下管道对应查找。也为后期地下管线资源的统筹利用和科学布局提供参考依据标准。为管线占用审批等工作提供了准确、直观、高效的参考。与此同时，对于新增的管网管理，图扑提供了结合管网拐点立体坐标信息实现三维管网自动渲染生成的功能，为后续的生产和延续性使用带来极大便利。

土地布局可视化

随着大数据、BIM、GIS 等新的技术理念兴起，土地规划也有了更新换代，而三维形式的可视化展现更能让土地规划可知可控，便于运维人员对的土地进行集中化、科学化管理统筹。打破土地占用数据分散的局面，提高园区土地使用率，高效管理 。图扑软件提供基于 WebGL 渲染的三维特效，也让平台中的土地分布数据表达更酷炫多彩容易区分。

交通布局可视化

通过不同颜色的高亮展示了交通快速路、主干路、次干路。线路可视化可以知道开发区的交通线路布局，方便运维人员及时有效的对交通路线进行调整部署、获取交通轨迹数据信息。辅助园区管理部门综合掌控全区大范围的线路运行管控。在交通布局上，图扑可视化也可延伸融合更多功能如综合态势监测：集成地理信息系统、视频监控系统、交管部门各业务系统数据，对交通路况车流量、事故处理报告等要素进行综合监测，帮助管理者实时掌握交通整体运行态势等等。

园区可视化实现价值

一、 园区全景视角精细化展现

园区内建筑物，管网设施，机动目标等基本建筑信息可在系统上全方位进行展示。例如园区内各种电力设施，交通枢纽，地标建筑，园区内地下管线，机动目标等位置数据实时展现。

二、园区信息数字化展现

原先的园区就像一个信息孤岛，各部门、各条管理线之间，在信息资源上无法做到交流共享和互通，独自运营各自的信息管理系统，通过图扑软件的可视化，在充分利用、整合和挖掘信息技术和信息资源的基础上，对园区达到精细化管理，那么图扑可视化系统就是园区智慧成果和价值的集中体现，让智慧园区变得可知可感。

三、园区管理集中化展现

图扑可视化园区管理系统支持融合多部门、不同平台的数据对接显示，管理者可以全方位掌控园区综合态势，不同运营管理者也可以互联互通相关联信息。包括支持了：政务、警务、交通、电力等实时数据信息；包括支持集成地理信息、GPS数据、建筑物三维数据、统计数据、园区视频监控采集画面等多类型数据。

图扑可视化是基于 HTML5 打造的纯 Web 页面，只要有浏览器就可以打开访问，客户可以根据当下使用场景，监控态势，自定义布局想要显示的内容。既可以重点显示专项事件，也可以全局掌控园区整体态势。快速实现现代化的、高性能的、跨平台的（桌面 Mouse/移动 Touch/虚拟现实 VR）图形展示效果及交互体验，并且还能在手机端或者 PAD 端对大屏进行页面显示和监控模式等交互控制。

总结

对园区的建设管理进行全方位升级打造，整合园区资源，建立自主创新服务体系，极大地降低园区企业的运营成本，提高工作效率，加强园区的创新、服务和管理能力。通过加入图扑软件的Hightopo 的大屏的可视化，能及时利用、挖掘、传递数据。使数据有效化的及时呈现和传递，通过提取出关键、有效的信息，并以酷炫的视觉效果清晰地展现出来。

当然我们也更新了数百个2D/3D 可视化案例集，在这里你能发现许多新奇的实例：《分享数百个 HT 工业互联网 2D 3D 可视化应用案例 》，有兴趣的可以至图扑软件官网查看更多行业可视化案例与申请试用~

要：基于WebGL和视频图传技术，利用倾斜摄影实景三维数据，分析构建视频监控图像与仿真现实地理空间高度融合场景的技术方法。完整阐述场景构建、信号接入、投影融合、图像拼接的技术路线，详述融合的数学模型和编程实现，并结合多年市场调研经验，介绍本项研究的市场应用前景。

关键词： WebGL 倾斜摄影 实景三维数据 投影融合 测绘学 视频图传

在地理信息系统(GIS)领域中，基于倾斜摄影测量技术制作的实景三维场景具有多项优势[1]，不仅能完整地还原地形地貌，尤其是城市环境中的建筑物外立面、近地面广告牌等环境细节，而且具有高精度的可量测性[2]，可进行全角度的三维测量。但是，实景三维场景是某一时间节点的测量成果，本质上属于静态地图[3]，数据的现势性问题无法避免。为解决这个问题，实景三维GIS越来越多地接入物联网传感器，融合现实世界的动态情况，来满足各自的业务需求[4]。如接入定位信号，在实景三维场景中显示人员和车辆实时位置等。其中一项最重要的物联网传感器就是视频监控设备，负责将现实世界的实时图像信息接入由实景三维数据构建的虚拟现实场景，并得到广泛应用。然而单一视频监控图像的视域范围有限，多路视频切换或分屏播放都会导致监控目标失去焦点，影响监控效果[5]。同时，屏幕化的视频监控图像孤立于周边环境，不能通过屏幕画面直观地了解视频监控图像在现实世界中的确切位置，及其与周边环境的关系。因此，将视频监控图像以几何投影方式贴合到地面(简称视频贴地)，融合到实景三维场景中，多路视频画面在空间上拼接，形成较大区域的连续画面，确立完整的视频监控环境成为GIS应用研究中一项十分必要的工作。

实现实景三维场景与视频监控图像融合的思路主要包括桌面端和浏览器端两个方面，本文将主要论述浏览器端的研究。

1、基于WebGL构建的实景三维场景

WebGL(WebGraphicsLibrary)是一种三维绘图协议，把JavaScript和OpenGLES2.0结合在一起，为HTML5Canvas提供硬件三维加速渲染[6]。这样就可以在网页浏览器直接渲染实景三维场景，而不需要外置插件。目前，常用的WebGL二次开发接口有CesiumJS和three.js，它们都有完善的地理坐标系接口，可以用于开发标准的GIS应用项目。本文以CesiumJS接口库为例，构建实景三维场景，因为CesiumJS定义了适宜于网络传输的实景三维数据格式:3DTiles，这种数据是以树形结构组织起来的瓦片(tiles)集合，并且可以由实景三维建模软件ContextCapture直接生产[7]。

CesiumJS建立实景三维场景的方法十分简洁:首先，创建场景对象(Viewer);然后，创建实景三维数据对象(Cesium3DTileset);最后，向场景对象中添加(viewer.scene.primitives.add)对象即可，如图1所示。

图1CesiumJS建立实景三维的方法

但需要注意的是实景三维数据的高度，与CesiumJS默认的“地球”之间会存在空隙，因此，还要利用CesiumTerrainProvider对象引入地形数据，最终形成完整的环境效果。

2、视频监控图像信号接入

视频监控图像接入场景首先要获取到它的数据流，不同厂商和型号的数据流使用的编码标准不尽相同，为了具备更好的兼容性，需要使用通用的网络流媒体协议RTSP(Real-TimeStreamProtocol)进行应用层的数据解析[8]。各厂商设备的RTSP协议取流方法有所区别，但是基本格式相似，都主要包括了IP地址、端口和通道3个参数，以海康设备为例，格式如下:

rtsp://username:password@<address>:<port>/Streaming/Channels/<id>。

但是，目前的HTML5的video标签仍然无法直接播放RTSP直播数据流，研究中使用了开源视频播放器VLC提供的流媒体转码功能将RTSP转码为可以直接播放的OGG格式流数据。VLC的转码命令为#transcode，在命令处理工具中执行即可[9]。多路视频同时转码只需要创建VLC命令的JavaScript脚本，利用Node.js执行即可。但是，此时的OGG格式流数据存在跨域访问问题，需要在Nginx中代理，并添加头配置。经过代理的OGG格式流数据可以直接被HTML5播放，配置参数如下:add＿headerAccess-Control-Allow-Origin*。

CesiumJS在实景三维场景中接入视频资源的方法是将video标签作为材质对象(Material)赋予渲染基元(Primitive)，然后在场景中创建出来即可最终实现接入。总结下来，接入流程如图2所示。

3、视频监控图像投影融合

实景三维场景完美地还原了现实世界的空间关系，相机拍摄的画面本质上是镜头曝光平面沿着视锥体在地面上的投影[10]。而视频监控图像与实景三维场景融合的关键问题就是将监控图像与场景中的同名点配准，实现同名点的重合，也就是将画面逐个像素的坐标从本地坐标系转变到视锥体裁剪坐标系[11]中。依据这个思路，在实景三维场景中，同样还原相机的空间位置和安装姿态，并且模拟镜头的视锥体，如图3所示，在视平面还原视频监控图像，利用视锥体获得其在实景三维数据表面的投影范围，即可实现图像投影融合。

图2CesiumJS接入视频流程

图3镜头模拟的视椎体

还原相机所需的主要参数包括表1中几项，这些参数可以通过测量和查看设备说明书获得。

表1相机主要参数

视频贴地的渲染基元采用分类基元类(ClassificationPrimitive)，其一致性映射(＿uniformMap)参数控制webgl渲染的深度计算和坐标转换等映射方式，包括立方体模型视图(u＿boxMV)和逆立方体模型视图(u＿inverseBoxMV)两个变量，这两个变量用于执行透视除法，确定视频裁剪后在实景三维数据表面贴地范围。其计算方法参照WebGL投影变换的基本原理[12]，示意图如图4所示。

图4WebGL投影变换基本原理

首先将相机视锥体原点定位到地理坐标，再利用四维矩阵的计算办法将地理坐标、朝向、俯角、旋转角4个参数共同计算组成相机类(Camera)的视图矩阵(viewMatrix)和逆视图矩阵(inverseViewMatrix)。然后，使用透视锥体类(PerspectiveFrustum)创建视锥体，包括视场角、宽高比、焦距、拍摄距离4个参数。透视锥体类的投影矩阵参数(projectionMatrix)可以获取该视锥体的透视投影矩阵，经过反转(Matrix4.inverse)并与逆视图矩阵相乘(Matrix4.multiply)得到逆视图投影矩阵，结果再反转即可得到视图投影矩阵。此时得到的视图投影矩阵可以用于完成坐标变换，利用拍摄距离和四维矩阵的创建办法(Matrix4.fromUniformScale)生成远平面标准模型矩阵，如下所示:

[拍摄距离，0.0,0.0,0.0]

[0.0，拍摄距离，0.0,0.0]

[0.0,0.0，拍摄距离，0.0]

[0.0,0.0,0.0,1.0]

再与逆视图矩阵相乘得到变换所需模型矩阵，并赋予视频贴地渲染基元的模型矩阵参数(modelMatrix)，完成视频监控画面变换到世界坐标系。最后将模拟的视频监控设备的视图矩阵与逆视图投影矩阵相乘，得到立方体模型视图，同理得到逆立方体模型视图。将这两个模型视图赋予分类基元类的一致性映射参数便可以最终实现视频监控图像与实景三维场景的融合，融合效果如图5所示。

融合效果可以通过以下3点判断:第一，路口斑马线在投影后的角度符合实际的平行关系，并且位置与实际位置完全重合;第二，建筑立面牌匾宽度和文字完全重合;第三，人行道边缘完全衔接。

视频贴地的基元可以动态渲染，只需要在基元的更新方法(update)中，传入相机参数，判断视锥体是否发生变化并相应重新计算模型视图即可，更新方法(update)会在每一帧调用。如将朝向参数从155.4调整为152，视频向逆时针旋转，牌匾错开的效果如图6所示。

综上所述，视频监控图像投影融合技术路线总结如图7所示。

图5视频监控与实景三维场景的融合效果

图6视频贴地的基元动态渲染效果

图7视频监控图像投影融合技术路线

4、视频监控图像拼接

多路视频监控图像的拼接就是将多路视频同时融合到实景三维场景中，依据择优原则，裁切掉重叠部分，形成连续的监控图像。CesiumJS的材质类(Material)提供了透明通道参数(alphaImage)，该参数接收灰度(黑-灰-白)图片，然后与视频监控图像进行掩码计算[13]，便可实现视频监控图像的裁切。本地的灰度图片在创建和编辑的操作方面都不利于Web平台的维护，因此，需要在浏览器的画布标签(canvas)中动态绘制灰度图。canvas标签提供了完整的绘制方法，lineTo()方法绘制闭合的可见范围，fill()方法填充颜色，然后将画布转为base64编码格式的图片，与相机参数共同存储即可，如图8、图9所示。

图8视频图像裁切的灰度图

图9多路视频融合效果

图10为围绕十字路口的五路视频监控图像拼接成一幅连续画面的效果，箭头所指为监控图像边界，圈中可以看到一辆公交车从北向南行驶，连续穿越多个分视频画面。实验中视频监控设备的安装参数存在误差导致画面中物体穿越存在偏移，也证明相机参数对贴地的效果存在关键性的影响。

图10图像拼接连续画面的效果

5、结束语

视频监控目前已经成为国家公共安全、国防、防灾应急、消防、旅游工作中应用最为普遍的技术手段。天网工程、雪亮工程、综合防治工程、磐石行动、数字城管工程等重要工程都围绕或重点采用这种技术建设。

在多年的用户体验积累[9]中可以总结出，用户需求在视频监控的空间属性方面做出进一步的应用效果提升。尤其是在无人机视频图传的应用不断深入的背景下，视频与实景三维数据动态融合的应用前景将更加宽广。

各部门具体应用可大致总结如下:在公安行业，可应用于人员和车辆的连续跟踪，重点区域合屏监控等;在城管行业，可应用于早、夜市整条街的同时监控;利用无人机进行火灾、洪水、地震等自然灾害的实时监控和救援搜索;重要机关单位、厂矿、商场、监狱的室内外安保连续监控;在旅游行业，利用固定视频监控和无人机视频图传应用于景区巡查与搜救、景区宣传等。