基于HTML5和虚拟现实的综合管廊三维地理信息系统

基于HTML5WebGL构建智能城市3D场景前⾔随着城市规模的扩⼤，传统的⽅式很难彻底地展⽰城市的全貌，但随着 3D 技术的应⽤，出现了 3D 城市群的⽅式以动态，交互式地把城市全貌呈现出来。

配合智能城市系统，通过 Web 可视化的⽅式，使得城市管理者可以更及时地了解交通情况，城市消防，电⼒管理等⽅⾯的运⾏情况，做出处理。

本 demo 使⽤产品轻量化 HTML5/WebGL 建模的⽅案，传统的智慧楼宇/楼宇⾃动化/楼宇安防/智慧园区常会采⽤ BIM（建筑信息模型 Building information modeling）软件，如 Autodesk 的 Revit 或 Bentley 这类建筑和⼯程软件，但这些 BIM 建模模型的数据往往过于庞⼤臃肿，绝⼤部分细节信息对楼宇⾃控意义不⼤，反⽽影响拖累了⾏业 Web SCADA 或 Web 组态监控的趋势，所以我们采⽤以 Hightopo 的 HT for Web 产品轻量化 HTML5/WebGL 建模的⽅案，实现快速建模、运⾏时轻量化到甚⾄⼿机终端浏览器即可3D 可视化运维的良好效果。

预览图：代码实现加载 3d 场景新建⼀个 3d 场景，并加⼊到页⾯中。

const g3d = new ht.graph3d.Graph3dView();const dm3d = g3d.dm();g3d.addToDOM();addToDOM 函数默认将场景加载到 body 中并填充窗⼝。

接下来反序列化城市场景 json，并在反序列化函数的回调中设置了场景的视⾓，中⼼位置，天空盒，并获得各图元信息，调⽤ startAnim 函数：g3d.deserialize('scenes/ny.json', () => {g3d.setEye([1132.8386351821287, 1916.836416970022, 1479.5345608290288]);g3d.setCenter([519.9741236104874, 273.4741921410557, -319.58669041297884]);g3d.setSkyBox(dm3d.getDataByTag('skyBox'));// 获取扩散效果的图元scaleList.push(dm3d.getDataByTag('scaleBlue'),dm3d.getDataByTag('scaleRed'));···// 开始动画startAnim();});动画实现加载后的城市场景如下图所⽰：我们可以看到场景中有蓝黄⽔波纹效果，道路，消防通道的流动效果，上下浮动的效果和旋转的 logo 和卫星。

测绘第36卷第3期2013年6月102基于HTML5的三维地理信息平台环境搭建技术探讨欧阳洪原孙敬杰（四川省基础地理信息中心，四川 成都 610041）[摘要] 利用HTML5技术在WebGIS平台上建立三维GIS系统，将地理信息的三维浏览与分析展示等功能发布在网络平台上，利用HTML5的技术特性建立跨平台的无插件式三维地理信息平台，保证系统运行的高效率和强稳定性。

[关键词] HTML5；WebGL；三维；GIS[中图分类号] P208 [文献标识码] A [文章编号] 1674-5019（2013）03-0102-02Technical Discussion on Environment Construction in HTML5-Based Three Dimensional Geographical Information PlatformOU-YANG Hong-yuan SUN Jing-jie1 引言三维GIS是一个特殊需求的GIS产品，它既要体现三维所能呈现出来的视觉优点，又应该具备二维GIS的分析功能[2]，互联网三维GIS实现了多源三维地理信息数据网络化服务，利用互联网传输介质的特点信息化测绘产品网络服务，将地理信息数据完整完善地呈现到用户面前[3]。

通过HTML5技术[1]将三维与GIS相结合，将地理信息的三维浏览与分析展示在网络平台上，利用HTML5技术使平台不需要安装额外的三维插件，运行环境也不仅仅局限于桌面系统平台，在支持HTML5的浏览器的帮助下，移动终端也能够支持三维地理信息系统的浏览和操作。

避免以往系统在不同设备上需要开发不同版本的问题。

2 环境分析在HTML5平台上进行三维服务搭建，主要以建立在网络前端脚本为框架基础，结合WebGL三维图形绘制技术来构建三维服务平台[4]，利用接近底层的方法重新绘制出带有地理信息并具有包容地理信息数据能力的仿真三维环境，允许第三方的三维数据格式进入，同时具备以三维平台为基础的地理空间分析功能，并将此环境发布为不使用第三方插件进行浏览的标准WebGL服务平台。

隧道作为重要交通建筑设施，为缩短运行距离、提高运输能力、减少事故等方面起到重要作用。

同时隧道交通具有流量大、行车速度快的特点，且内部含有大量照明、风机、水泵、指示器、情报板、供电等设备设施，若隧道内出现交通事故或设备故障等紧急情况将会对隧道内人员安全以及交通运输等带来重大影响。

传统的隧道运营管理常常因为远离中央控制管理中心，导致隧道运营管理和维护都十分困难。

基于 HTML5 的 2D、3D 图形渲染引擎，结合 GIS 地图，以 B/S 技术架构打造一套实现智慧隧道全联接、全智能的可视化管理方案——智慧隧道中心调度平台。

以隧道综合管控为导向，提升设备控制、事件预警、流程管理、应急处置等综合业务能力。

助力隧道运营管控朝着更智慧、更安全、更便捷的方向发展，推动交通行业的数字化转型升级。

本次可视化项目以厦门万石山隧道为背景，将其地理信息系统（Geographic Information System，GIS）的数据进行丰富的可视化展示。

并结合 GIS 地图，初始画面以城市地图为背景，辅以左右两侧 2D 面板进行展示运行数据。

隧道选用醒目的绿色流光效果展示其走势与形状，突出隧道线网布局。

点击指引图标再下钻至万石山隧道查看主隧道信息以及运行状态。

分别从消防、设备信息、监控、告警管理四个方面对厦门隧道进行运营整合，全方位掌控隧道运行状况，及时做出运营策略调整。

HT for Web GIS 产品支持对不同地图瓦片服务数据、航拍倾斜摄影实景的3DTiles 格式数据以及城市建筑群等不同的 GIS 数据的加载。

系统中的城市建筑场景，为使场景更加美观，通过对地图供应商提供的建筑白模加工优化，进行 AO 贴图烘焙，增加模型间的阴影关系，达到实用且赏心悦目的效果。

首页展示漫游巡检场景初始化后，点击“巡检”按钮即可通过固定路线、自由视角对隧道全场景进行巡检式漫游。

系统中的三维场景均采用了轻量化建模方式，在还原隧道整体建筑结构、内部设备设施以及周边建筑道路环境的同时，也支持前端页面流畅展示，并对接整合隧道相关运营管理数据进行展示。

Megatrends大趋势16作为中国工业互联网产业的开拓者，东土科技研制了全方位的工业互联网平台技术产品技术、解决方案和服务。

东土科技：引领工业互联网产业创新文｜本刊记者 孟庆华Megatrends大趋势1工业互联网已经成为一股不可阻挡的趋势，数字化正在被广泛应用于工业，正在改变着世界，工业互联网的春天已经到来。

北京东土科技股份有限公司（以下简称东土科技）瞄准了这个时机。

打造全新产品日前，东土科技推出基于KyVista 可视化集成平台的综合管廊智能化解决方案和DGCOM3000数据采集及传输一体化解决方案产品。

这两个解决方案，就是东土科技探索智慧管廊的实践产品。

Kyvista 是东土科技工业互联网全景可视化平台，具有自主知识产权，向下能够支持采集多种主流协议并转换数据，灵活支持各领域应用，向上可以接入东土工业云，实现大数据的采集、处理、存储，为大数据分析、展现提供核心支撑，采用SVG 、HTML5、WEBGL 等技术以二维、三维图形、丰富的图表全景展现工业数据，并做出智能分析、预警，利用大数据分析，实现生产决策辅助支持。

Kyvista 最大的技术亮点是各被集成系统采取对等子系统方式进行集成；可以实现对各个不同子系统的信息实现监测、控制和共享；与第三方系统深度集成，实现综合协调联动和管理；采取B/S 架构，支持WEB 浏览和广域网(Internet 和LAN 、WAN)；接口实现方式通过协议转化器（网关），实现双向信息沟通；可扩展三维实时监控；高度集成能力；作为数据中心，对外提供统一访问接口；系统支持接入云计算，支持移动应用APP 。

Kyvista 主要应用在综合管廊监控系统；楼宇安防监控系统；环保、水污染、水情集中监控系统；石油石化天然气采集、管线集中监控等。

DGCOM3000是东土科技开发的新一代智能通信网关与数据交换一体化产品，满足严酷环境下数据采集、传输系统的设计需求，能同时满足数据采集和冗余环网传输的优越特性。

基于HTML5和WebGL的三维智慧社区管理系统的设计与
研究
魏书寒;孙麒
【期刊名称】《工业控制计算机》
【年(卷),期】2017(30)5
【摘要】在智慧城市建设的推动下,智慧社区呈现出如火如荼的发展局面.针对传统的社区管理中出现的办事效率、消息传递不及时等问题,提出了基于HTML5和WebGL的三维智慧社区管理系统的构建方案.系统采用JSON、Ajax对数据进行
组织、传输,利用HTML5和WebGL技术进行三维数据展示,具有免插件、跨平台、开放性等优点.为社区管理提供了三维可视化平台,可对社区内设施和人员进行基于
三维查询和管理,旨在为社区管理者打造一个智慧化、数字化、高效化的办公平台.【总页数】2页(P139-140)
【作者】魏书寒;孙麒
【作者单位】浙江理工大学信息学院14计算机科学与技术1班,浙江杭州310018;浙江理工大学信息学院计算机科学与技术系,浙江杭州 310018
【正文语种】中文
【相关文献】
1.基于GIS的三维智慧社区管理系统设计与开发 [J], 徐文武
2.基于二三维GIS的智慧社区管理系统 [J], 王伟;李成仁;许书影
3.基于WebGL的智慧城市三维地理信息系统设计与实现 [J], 赵军;宫丽玮;周圣川;
胡振彪;王海银
4.基于WebGL的三维智慧输电线路研究 [J], 杨大兵;谭弘武;宋金秀
5.基于WebGL的三维市政管网管理系统设计及实现 [J], 马钢;张学之;马礼
因版权原因，仅展示原文概要，查看原文内容请购买。

基于虚拟现实技术的三维地理信息系统设计与实现近年来，随着虚拟现实技术的发展，三维地理信息系统（3D GIS）也越来越受到人们的关注。

3D GIS是利用计算机技术将地理信息以三维形式呈现的一种空间信息系统。

在众多应用领域中，三维地理信息系统在城市规划、环境监测、资源管理和军事指挥等方面具有广泛的应用。

虚拟现实技术是3D GIS的重要基础。

虚拟现实技术的核心是构建一个虚拟的三维世界。

通过计算机模拟现实环境，人们可以在虚拟环境中进行各种交互操作。

虚拟现实技术在3D GIS领域具有较大的应用空间，可以为用户提供更加真实、直观的地理环境信息。

在3D GIS系统设计中，一般需要涉及到多个方面的技术集成，包括三维可视化、虚拟现实技术、数据库技术等。

下面我们将从这些方面来详细介绍3D GIS系统设计与实现的相关技术。

一、三维可视化技术三维可视化技术是3D GIS系统设计的核心技术之一。

它可以将计算机中的三维地理信息以可视化的方式呈现给用户。

目前，三维可视化技术主要有以下几种：1.渲染技术：渲染技术是指将一个三维场景中的所有结构以照相机的形式进行投影，通过光源、材质等参数对场景进行着色并输出到屏幕上。

2.三维建模技术：三维建模技术是制作3D模型时所需的技术。

三维建模主要包括几何建模、材质贴图、纹理映射等技术。

3.虚拟现实技术：虚拟现实技术是将所需显示的图像通过特定的程序转化为实际呈现给用户的图像。

虚拟现实技术包括头戴式显示器、手套、感应器等辅助设备。

二、虚拟现实技术虚拟现实技术是3D GIS的重要组成部分。

它可以为用户提供更加真实、直观的地理环境信息。

虚拟现实技术的应用主要有以下几种：1.虚拟现实建模：虚拟现实建模可以为3D GIS提供更加真实的地理环境信息。

虚拟现实建模技术包括三维扫描、照片测量等。

2.手势交互：手势交互技术是指用户通过手势来控制虚拟现实环境以及对3D GIS系统中的三维模型进行编辑、查看等操作。

基于虚拟现实的三维地理信息展示系统作者：苏欣李晓辉来源：《科技视界》2014年第31期【摘要】地理信息展示系统是地理信息系统相关技术在区域规划方向上的应用，本文所提出的基于虚拟现实的三维地理信息展示系统融合虚拟现实技术与地理信息技术，将地理信息数据导入至展示系统中，系统对区域数据进行三维可视化显示，在当前区域布局的基础上，规划工作人员能够直接在当前区域中添加与编辑规划模型，并在真三维立体可视化的环境中对规划进行评估与决策，最大程度上避免造成规划失误。

【关键词】虚拟现实；地理信息系统；城市规划【Abstract】Geographic information display system is the application of technology of geographical information system in regional planning direction， three-dimensional geographic information display system based on virtual reality technology including virtual reality technology and geographic information technology， display system import the geographic information data， and display the data in 3D mode. Based on the current regional distribution on the planning staff， it allows directly adding and editing planning model in the current area， and make assessment and decision-making of planning in the true 3D visual environment.【Key words】Virtual reality； Geographic information system； City planning1 虚拟现实技术与地理信息系统概述1.1 虚拟现实技术虚拟现实技术（Virtual Reality，简称VR）是近来年出现的高新技术，它利用电脑模拟产生一个三维空间的虚拟世界，向使用者提供关于视觉、听觉、触觉等感官模拟。

HTML5+WebGL 3D机房开发实例前阵子写了一篇HMTL5 3D机房开发的例子，介绍了如何用html5在网页上创建无插件的精美3d机房场景，收到很多朋友的鼓励，深表感谢。

对于索要源代码的朋友，已经尽力邮件回复。

由于精力所限，如未能收到的朋友请留言或给我发送邮件：tw-service@。

最近项目第二期又要紧锣密鼓地开始了，所以想抓紧把一些新增的内容补充上，进一步完善这个html5 3d机房的呈现效果。

上一篇中主要介绍的是如何从最基础的webgl封装到创建3d物体对象，再通过3d物体对象“搭积木”式的组建整个3d机房场景。

这一篇主要介绍一些如何在这个场景上进一步丰富更多的功能和呈现效果，以及实现这些功能在技术上的思路。

首先我们来看看上一期已经实现的纯天然无添加无PS的HTML5 3D机房效果：已经拿到过代码的朋友应该知道，这一场景可通过一个json文件进行组装和加载，可以很方便地进行修改和维护。

在此基础上，这一次我又增加了”机柜标签、机柜门、复杂设备、机房走线、人员轨迹“等效果，下面我就把第二季的干货一一为大家奉上。

机柜标签机房中最重要的物理资源——机柜——是机房管理、规划、监控人员最关注的对象之一。

对于规模在几十个、上百个甚至上千个机柜的机房，每个机柜必然会进行资产编号，方便检索和管理。

这个在多数资产管理系统中，都是最基本的。

但是在3d场景中，如何显示这些机柜编号，才能让用户更直观的看到每个机柜的位置呢？传统的方式是用标签显示资产编号，例如可以用“告警冒泡”那样的方式显示一个文字气泡。

不过当机柜产生告警时，两个气泡会有所冲突。

而且过多的气泡会产生相互遮挡覆盖，有点混乱，比如像这样：因此我尝试了一种不同的思路：把文字渲染到一个内存图片，“溶解”到机柜的上方贴图中。

想要生成一个内存的图片文字，可以通过下面的函数实现：Js代码.generateAssetImage: function(text){.var width=512, height=256;..var canvas = document.createElement('canvas');.canvas.width = width;.canvas.height = height;..var ctx = canvas.getContext('2d');.ctx.fillStyle='white';.ctx.fillRect(0,0,width,height);.ctx.font = 150+'px "Microsoft Yahei" bold';.ctx.fillStyle = 'black';.ctx.textAlign = 'center';.ctx.textBaseline = 'middle';.ctx.fillText(text, width/2,height/2);.ctx.strokeStyle='black';.ctx.lineWidth=15;.ctx.strokeText(text, width/2,height/2);..return canvas;.}需要留意的是：1. 生成的图片宽高数值最好是2的幂，例如128、256、512等，这样在3d中渲染不容易出现闪烁和锯齿。

基于HTML5WebGL的智慧楼宇三维可视化监控前⾔可视化的智慧楼宇在 21 世纪是有急迫需求的，中国被世界称为“基建狂魔”，全球⾼层建筑数量位居⾸位，所以对于楼宇的监控是必不可少。

智慧楼宇可视化系统更多突出的是管理⽅⾯的功能，即如何的全⾯实现优化控制和管理，节能降耗、⾼效、舒适、环境安全这样⼀个⽬的，可以这样说，判断⼀个建筑物是否具有智能建筑特点，要看它是否具有 IBMS 的系统集成，这是很重要的判定条件。

IBMS 系统的建⽴必不可少需要硬件采集信息到后台，随着⼯业互联⽹，物联⽹概念的推⼴应⽤，让硬件与软件的结合变得系统化，过程化，使得智慧楼宇可视化成为可能。

本⽂所概述的智慧楼宇是基于⼀栋真实建筑可视化简化建模之后得到的效果，楼层的轮廓在系统中抽象成线条，整体拼凑起来就形成了⼀栋简化版的楼宇，当然其中的楼层地板也是抽象成简单的⽴⽅体包裹在对应楼层线框的⾥⾯。

对应的电梯，闸机，扶梯等物体也简化抽象成六⾯体，线条。

抽象的物体全部采⽤的 API 即可创建完成，所以抽象之后具有复⽤性，同样的⽅法可以采⽤到其它所有楼宇。

可视化监控功能预览地址：⼯单监测 -- 统计楼宇收到的⼯单信息客流监测 -- 显⽰当⽇进出楼宇的⼈流量信息消防报警 -- 统计当⽇楼宇的消防报警信息重点区域监控 -- 显⽰重点区域的摄像头信息停车场车位统计 -- 统计停车场车位信息楼宇控制 -- 可单独控制不同类型楼层的闸机，电梯，扶梯，警报和客流的显⽰与隐藏，监控此时电梯，扶梯等物体的运⾏情况告警信息 -- 实时滚动显⽰当前楼宇的告警信息可视化监控预览楼宇效果楼层效果楼层控制效果可视化实现UI 以及模型实现2D 可视化2d 部分的 UI 都是采⽤ HT 暴漏的 API 进⾏描绘实现，UI 部分都绘制在⼀个 canvas 节点上，并且全都为⽮量，所以放⼤不会失真，两侧的实时数据通过实现实时刷新，HT 在处理实时刷新的时候只会刷新当前需要刷新的区域，所以不会出现例如修改⼀个页⾯上的某个⽂字⽽导致整个 canvas 重绘。

图1渲染管线流程渲染管线渲染的具体流程如下：建立顶点数组渲染管线进行处理，先要建立顶点数组（点数组包括各种属性信息，例如顶点纹理、颜色、空间中的位置，这些数据主要包括Attribute变量存储着关于点本身的数据，重要的是点的位置及顶点颜色等信息，作为顶点数组的一部分传进顶点着色器。

Uniform变量用来修饰绘制过程中一直不比如变换矩阵、光源位置等。

此外还需要有一个数组用于存放顶点数组中元素的索引，作用是控制顶点组顶点着色器将数组连接成三角形Vertex Shader）最主要的功能是计算顶点在屏幕上空间里的位置。

顶点着色器读取顶点属性，而且会为每个顶点生成其他属性，纹理坐标。

显卡的图形处理器从顶点数组的缓冲中读取顶点信息后在顶点着色器中处理这些信息，并且会根据顶点索引数组里的描述，把这些顶点按照指定的顺序每个三角形。

顶点着色器计算出每个顶点的值然后把它们写到Varying变量中。

光栅器融合Rasterizer）的作用是过滤每一个三角形，需要的可见形状的部分进行融合，最后再填充到像素大小的HTML5给Web领域带来的巨大变化，系统结构如图2所示。

图2系统结构功能上主要实现了远程数据采集终端采集原始数据，Socket连接发送到服务端。

服务端部分采用Java，Node.js[7]等语言实现。

服务端响应客户端的请求，并通过与服务端之间建立的WebSocket双向TCP通道，把得到的数据信息实时推送到客户端，最终把数据展示在浏览器的界面里。

实现效果通过Web3D可以在浏览器端构建较为原始的三维模如果用三维建模去接近现实世界中的形体和外观是不现实的，现实世界中的物体往往是非常复杂的。

绘制细节将给建模带来巨大的工作量，同时会导致加载模型缓慢。

这就要在模型的外观纹理上想办法，而不用去追求模型的高精细图3Web3D的展示效果按住鼠标移动，3D模型会随着场景视角转动，转动后可以看到其他方向的贴图渲染效果。

采集端通过服务器把消息转发推送到客户端，如图4所示。

智慧管廊方案城市智慧管廊方案设计项目背景城市管廊作为城市基础设施的重要组成部分，承担着电力、通信、给水等多种管线的保护和管理任务。

然而，传统的管廊管理方式存在着诸多问题，如管理效率低下、管线安全隐患等。

因此，建立一套智慧化的城市管廊管理系统，成为了当前城市建设的重要任务。

需求分析为了解决传统管廊管理方式存在的问题，本方案提出了以下需求：1.实现对管廊内资产设备的全面监控，包括电力电缆、通信光缆、给水管线等。

2.提高管廊管理效率，实现快速响应和预警处理。

3.加强管廊安全管理，及时发现和排除安全隐患。

功能分析为了实现上述需求，本方案将智慧管廊管理系统分为综合监控系统、电力电缆监测系统、通信光缆监测系统和给水管线监测系统四个部分。

综合监控系统综合监控系统是整个管廊管理系统的核心，其主要功能包括：1.实时监控管廊内各种设备的运行状态和数据。

2.实现对管廊内各种设备的远程控制和管理。

3.对管廊内各种设备进行故障诊断和预警处理。

电力电缆监测系统电力电缆监测系统是综合监控系统的重要组成部分，其主要功能包括：1.实时监测电力电缆的温度、电流、电压等数据。

2.对电力电缆进行故障诊断和预警处理。

3.提高电力电缆的安全性和可靠性。

通信光缆监测系统通信光缆监测系统是综合监控系统的重要组成部分，其主要功能包括：1.实时监测通信光缆的温度、光功率、衰减等数据。

2.对通信光缆进行故障诊断和预警处理。

3.提高通信光缆的安全性和可靠性。

给水管线监测系统给水管线监测系统是综合监控系统的重要组成部分，其主要功能包括：1.实时监测给水管线的水压、流量等数据。

2.对给水管线进行故障诊断和预警处理。

3.提高给水管线的安全性和可靠性。

3.1.5.2 视频监控系统视频监控系统是通过安装摄像头、录像机、监视器等设备，对场馆内外的人员和物品进行实时监控和录像，以达到安全防范的目的。

该系统可以实现对场馆内外的人员、车辆、物品等进行全方位、多角度、高清晰度的监控，同时还可以对监控画面进行录像、存储、回放、下载等操作。