中共中央、国务院在今年12月印发了《长江三角洲区域一体化发展规划纲要》(下文简称《纲要》)，并发出通知，要求各地区各部门结合实际认真贯彻落实。
《纲要》强调，要提升基础设施互联互通水平，打造数字长三角，协同建设新一代信息基础设施，共同推动重点领域智慧应用。大力发展基于物联网、大数据、人工智能的专业化服务，提升各领域融合发展、信息化协同和精细化管理水平。围绕城市公共管理、公共服务、公共安全等领域，支持有条件的城市建设基于人工智能和 5G 物联的城市大脑集群。
城市治理和管理不仅是国家治理体系的重要组成部分，同时也是全球互联网治理体系的重要载体和构建网络空间命运共同体的重要基础。上个月我们发布了一篇文章《基于 HTML5 WebGL 构建智能城市 3D 场景》，大体介绍了如何使用 ht.js 快速 3D 建模，展示了良好的可视化效果，今天继续探讨智慧城市的应用。
demo:
功能点
应急响应
交通情况
城市漫游
工程情况
1.应急响应
随着城市化、工业化、信息化进程加快,各种风险隐患层出不穷,突发事件频繁发生,已经从“非常态化”的偶发事件演变成了“常态化”的频发事件,直接威胁着公众的生命财产安全。为了及时、有效、妥善地处置各种城市突发事件,必须建立统一领导的指挥系统、常备不懈的保障系统和防患未然的防范系统,。
上图主要以 2/3D 联动的方式，依次展示了在面对突发情况下，城市应急救援的响应过程。
步骤：事故定位->告警设施自启动->电力切断->油气截断阀启动->周边情况->确认告警范围->通知学校->医院准备->应急人员准备->交通规划->应急方案预备->应急方案启动->应急资源触发->现场方案预备->现场方案启动->人员进场->作业中）
实现思路：首先对模型进行分组，并在相应的图元上标记 tag ，使用 ht.Default.startAnim() 来完成每一步的动画效果，然后拼接动画即可实现上图中的 3D 动画效果。至于右边的 2D 步骤显示面板的联动，因为本 demo 采用的是 ht.js 来实现的， ht.DataModel 作为承载 Data 数据的模型，管理着 Data 数据的增删以及事件派发，右侧的 2D 面板里的步骤也是一个个 Data ，我们只要对其进行数据绑定，在动画执行到某一时刻，通过动态修数据来控制图元的透明度等样式就可以实现 2/3D 联动了。demo 中的事故地点，点击可跳转到另一个室内定位的 案例 。
// 事故定位动画主要代码 animStep_1() { let process_01 = this.main.g2d.dm().getDataByTag("process_01"); process_01.s("opacity", 1); let emergencyResponseParent_1 = this.main.g3d .dm() .getDataByTag("emergencyResponseParent_1"); this.setVisible(emergencyResponseParent_1, true, "children"); let 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 => { return t; }, finishFunc: () => { this.animStep_2(); }, // 动画结束后调用的函数。 action: (v, t) => { this.setStepPanel(process_01, t, 4); if (t <= 0.25) { children[0].s("shape3d.opacity", 5 * Ease.easeOutSine(t)); } else if (t <= 0.375) { children[1].s( "shape3d.opacity", 8 * Ease.easeOutSine(t - 0.25) ); } else if (t <= 0.5) { children[2].s( "shape3d.opacity", 8 * Ease.easeOutSine(t - 0.375) ); } } }); }