基于HTML5WebGL前言中共中央、国务院于今年12月下发了《长江三角洲区域一体化发展规划纲要》（以下简称《纲要》），并下发通知，要求各地区、各部门结合自己的实际情况来实施。 《纲要》强调，要提升基础设施互联互通水平，建设数字长三角，统筹建设新一代信息基础设施，共同推进重点领域智能化应用。大力发展基于物联网、大数据、人工智能的专业服务，提升各领域融合发展、信息化协同、精细化管理水平。围绕城市公共管理、公共服务、公共安全等领域，支持有条件的城市建设基于人工智能和5G物联网的城市大脑集群。城市治理管理既是国家治理体系的重要组成部分，也是全球互联网治理体系的重要载体，是构建网络空间命运共同体的重要基础。上个月我们发表了一篇文章《基于HTML5 WebGL 构建智能城市 3D 场景》，大致介绍了如何使用ht.js进行快速3D建模，并展示了良好的可视化效果。今天我们继续讨论智慧城市的应用。 demo：http://www.hightopo.com/demo/city/功能点应急响应交通情况城市漫游项目情况一、应急响应随着城镇化、工业化、信息化进程的加快，各种风险和隐患不断涌现。层出不穷，突发事件频发，已从“不正常”的偶然事件演变为“常态化”的频繁事件，直接威胁着公众生命财产安全。为及时、有效、妥善处置各类城市突发事件，需要建立统一的领导指挥体系、坚持不懈的保障体系和防患于未然的预防体系。上图主要以2/3D联动的形式展示了城市应急救援面对突发事件的响应过程。步骤：事故地点->报警设施自启动->断电->油气截止阀启动->周边情况->确认报警范围->通知学校->医院准备->应急人员准备->交通规划->应急预案准备->应急预案启动->应急资源触发->场地预案准备->场地预案启动->人员进场->工作）实施思路：先将模型分组，并标注在相应的图元上打上标签，使用ht.Default.startAnim()完成每一步的动画效果，然后拼接动画就可以实现上图中的3D动画效果。至于右边2D步进显示面板的联动，因为这个demo是用ht.js实现的，所以使用ht.DataModel作为模型来承载Data数据，管理Data数据的增删改查和事件分发。右边的2D面板步骤也是Data，我们只需要给它绑定数据，在动画执行的某个点，通过动态修改数据来控制透明度就可以实现2/3D联动原语和其他风格。演示中的事故定位，点击跳转到另一个室内定位案例。//事故定位动画主要代码animStep\_1(){letprocess\_01\=this.main.g2d.dm().getDataByTag("process\_01");process\_01.s("不透明度",1);让emergencyResponseParent\_1\=this.main.g3d.dm().getDataByTag("emergencyResponseParent\_1");this.setVisible(emergencyResponseParent\_1,true,"children");让孩子\=this.getChildren(emergencyResponseParent\_1);children.forEach(i\=>{i.s("shape3d.transparent",true);i.s("shape3d.opacity",0);});this.main.anim=ht.Default.startAnim({duration:2000,easing:t\=>{returnt;},finishFunc:()\=>{this.animStep\_2();},//这个动画结束后调用的函数。动作：(v,t)=>{this.setStepPanel(process\_01,t,4);如果(t<=0.25){children\[0\].s("shape3d.opacity",5\*Ease.easeOutSine(t));}elseif(t<=0.375){children\[1\].s("shape3d.opacity",8\*Ease.easeOutSine(t-0.25));}elseif(t<=0.5){children\[2\].s("shape3d.opacity",8\*Ease.easeOutSine(t-0.375));}}});}2.交通情况上图第一张：从应用领域来看目前，我国的智慧交通主要应用于高速公路交通信息化、城市道路交通管理服务信息化、城市公交信息化等领域。伴随着数字化转型，政府主动引领智慧城市建设，未来市场潜力巨大。该功能点可以更直观有效地反映当前道路交通状况，使地方政府能够更有效、更科学地管理交通，发挥大城市的交通效率。传统的2D渲染已经不能满足当前的需求。随着大数据、云计算、5G、人工智能、边缘计算等技术的发展和成熟，3D可视化可以提供更直观有效的反馈信息。当然，3D可视化离不开强大的图形引擎。本模块只是简单模拟交通情况，并没有继续展开。3、城市漫游由于计算机图形学和软硬件技术的飞速发展，人们对虚拟现实技术越来越重视。虚拟现实技术的应用一直是计算机应用领域的研究热点，虚拟现实技术的应用价值得到广泛认可。3D漫游可以提供很好的用户交互体验，所以这个demo也展示了这个功能。借助HT，只需几行代码就可以实现漫游功能。ht.Shape是一种极其强大的原始类型。这里绘制漫游路线就是利用其扩展子类ht.Polyline绘制三维空间管道，然后通过获取路径上的点连续设置眼睛。代码如下：//漫游动画roamingAnim(){//polylineletpolyline=this.main.g3d.dm().getDataByTag("polyline");this.main.anim=ht.Default.startAnim({duration:15000,easing:t=>{returnt;},finishFunc:()=>{},//动画结束后调用的函数action:(v,t)=>{ineengLthletlength=this.Length3dthis.Length.g(Polyline),offset=this.main.g3d.getLineoffset(polyline,length*v),point=office.point,px=point.x,py=point.y,this.min.g3d.seteye(px,py,pz);this.main.g3d.setcenter(0,0,0);});}4.项目情况主要展示工程情况：大桥（戳）、盾构操作（戳）、海底隧道（戳）。至此，demo的功能点介绍完毕。图一、12月12日晚，厦门地铁二号线芦厝路口配套物业开发地块施工现场发生坍塌。幸运的是，没有人员伤亡。空气加上道路上汽车的压力，导致道路坍塌。图2：3月21日下午14时48分左右，位于响水县生态化工园区的化工厂发生爆炸。近年来，多起化工厂爆炸事故造成了难以估量的生命财产损失。事故触目惊心，时刻提醒我们未雨绸缪。水是人类生命之源，随着城市的发展，水污染问题也越来越严重。水资源监管与治理已成为城市发展中的一大难题。水质监测和洪水预警不及时，直接关系民生问题。.发展智慧水务可以非常及时准确地解决问题。如果有更好的监测预警系统，这些事故发生的可能性就会大大降低。以后会写一些智慧水务的文章，拓展应急预案的场景和案例。
