专栏首页hightopo基于 HTML5 WebGL 的 3D 智慧城市

基于 HTML5 WebGL 的 3D 智慧城市

前言

中共中央、国务院在今年12月印发了《长江三角洲区域一体化发展规划纲要》(下文简称《纲要》),并发出通知,要求各地区各部门结合实际认真贯彻落实。

  《纲要》强调,要提升基础设施互联互通水平,打造数字长三角,协同建设新一代信息基础设施,共同推动重点领域智慧应用。大力发展基于物联网、大数据、人工智能的专业化服务,提升各领域融合发展、信息化协同和精细化管理水平。围绕城市公共管理、公共服务、公共安全等领域,支持有条件的城市建设基于人工智能和5G 物联的城市大脑集群。

城市治理和管理不仅是国家治理体系的重要组成部分,同时也是全球互联网治理体系的重要载体和构建网络空间命运共同体的重要基础。上个月我们发布了一篇文章《基于HTML5 WebGL 构建智能城市 3D 场景》,大体介绍了如何使用ht.js 快速3D  建模,展示了良好的可视化效果,今天继续探讨智慧城市的应用。

  demo:http://www.hightopo.com/demo/city/

功能点

  • 应急响应
  • 交通情况
  • 城市漫游
  • 工程情况

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)
                );
            }
        }
    });
}

2.交通情况

先上图:

从应用领域来看,目前我国智慧交通主要应用在公路交通信息化、城市道路交通管理服务信息化以及城市公交信息化领域。伴随着数字化转型,政府主动牵头智慧城市建设,未来市场潜力巨大。该功能点能更直观有效的反应当前的道路交通情况,使各地政府更加有效的、科学的管理交通,发挥出大城市的交通效能。常规的2D 效果图已经不满足于当下的需求了,伴随着大数据、云计算、5G、AI、边缘计算等技术的发展成熟,3D  可视化更能直观的、有效的反馈信息。当然,3D可视化离不开一款强大的图形引擎。本模块只是简单地模拟了交通状况,并未继续拓展。

3.城市漫游

由于计算机图形学和软硬件技术的快速发展,虚拟现实技术越来越为人们所重视。虚拟现实技术的应用一直是计算机应用领域的热点,虚拟现实技术的应用价值已经得到了广泛的认可。3D 漫游可以提供很好的用户交互体验,所以本demo  也展示了这一功能。

借助于HT,漫游功能的实现只要几行代码就可以实现了。ht.Shape是极其强大的图元类型,这里绘制漫游路线就是使用其扩展子类ht.Polyline ,绘制一条三维空间管道,然后通过获取该路径上的点来不断设置eye就行了。代码如下:

// 漫游动画
roamingAnim() {
    // polyline
    let polyline = this.main.g3d.dm().getDataByTag("polyline");
    this.main.anim = ht.Default.startAnim({
        duration: 15000,
        easing: t => {
            return t;
        },
        finishFunc: () => {
        }, // 动画结束后调用的函数。
        action: (v, t) => {
            let length = this.main.g3d.getLineLength(polyline),
                offset = this.main.g3d.getLineOffset(polyline, length * v),
                point = offset.point,
                px = point.x,
                py = point.y,
                pz = point.z;
                this.main.g3d.setEye(
                    px ,
                    py ,
                    pz
                );
                this.main.g3d.setCenter(0, 0, 0);
        }
    });
}

4.工程情况

该页面主要展示了工程情况:大桥()、盾构作业()、海底隧道()。

至此,该demo 的功能点就介绍完了。

图一,12月12日晚,厦门地铁2号线吕厝路口配套的物业开发地块施工现场发生塌陷,所幸没有造成人员伤亡,事故原因疑似管道破裂导致,水流将路基中的稳定土层掏空,加上路面上的汽车压力,导致路面坍塌。

图二,3月21日下午14:48左右,位于响水县生态化工园区的化工厂发生爆炸。近年来,多加化工厂爆炸,所造成的生命、财产损失不可估量。

一场场事故触目惊心,时刻提醒着我们要防患于未然。水是人类生活的源泉而随着城市的发展水污染问题也越来越严重,水资源监管和治理成为城市发展的一大困扰,水质监控不及时、水灾预警不及时更是直接关系到民生问题。而智慧水务的发展则能非常及时、准确的解决问题。假如有比较好的监控预警系统,这些事故发生的可能性将大大降低。后续会再写些关于智慧水务的文章,也会再拓展应急预案的场景案例。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于 H5 和 webGL 的 3D 智慧城市

      中共中央、国务院在今年12月印发了《长江三角洲区域一体化发展规划纲要》(下文简称《纲要》),并发出通知,要求各地区各部门结合实际认真贯彻落实。

    HT for Web
  • 解决智慧城市发展困扰:Web 3D 智慧环卫 GIS 系统

    智慧环卫系统作为智慧城市的一部分,是社会发展的需要。城市环卫有诸多痛点,也需要通过更加先进的技术来解决。

    万物皆可联i
  • 分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇

    过去的 2018 年,我们认为是国内工业互联网可视化的元年,图扑软件作为在工业可视化领域的重度参与者,一线见证了众多 HTML5/Web 化、2D/3D 化的项...

    万物皆可联i
  • 分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇

    继《分享数百个 HT 工业互联网 2D 3D 可视化应用案例》2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客...

    HT for Web
  • 2019 篇 - 分享数百个 HT的工业互联网 2D 3D 可视化应用案例

    继《分享数百个 HT 工业互联网 2D 3D 可视化应用案例》2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客...

    HT for Web
  • 基于 HTML5 WebGL 构建智能数字化城市 3D 全景

    自 2011 年我国城镇化率首次突破 50% 以来,《新型城镇化发展规划》将智慧城市列为我国城市发展的三大目标之一,并提出到 2020 年,建成一批特色鲜明的智...

    HT for Web
  • 解决智慧城市发展困扰:Web 3D 智慧环卫 GIS 系统

    智慧环卫,依托物联网技术与移动互联网技术,对环卫管理所涉及到的人、车、物、事进行全过程实时管理,合理设计规划环卫管理模式,提升环卫作业质量,降低环卫运营成本,用...

    HT_hightopo
  • 5G新基建到来,图扑推出智慧路灯三维可视化方案

    作为智慧城市的重要组成部分,智慧灯杆管理系统采用信息化、数字化手段,把路灯及城市景观照明等各种不同对象的监控和数据采集及处理融于一体, 为城市管理者进行城市管理...

    HT_hightopo
  • 基于 HTML5 WebGL 智能城市的模拟运行 顶

    智能城市建设是一个系统工程:首先实现的是城市管理智能化,由智能城市管理系统辅助管理城市,通过管理系统人们可以监视城市的运行,了解城市每天中发生的变化,以及及时的...

    HT_hightopo

扫码关注云+社区

领取腾讯云代金券