热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

基于WebGL的三维交通监控可视化技术应用(实践版)ThingJS

基于,webgl,的,三维,交通,监控,可,视,化,技术,应用,实践
#三维可视化##3D开发#
  1. WebGL, SVG,BIM技术对比
  2. ThingJS整合Echarts数据分析
  3. 隧道监控三维可视化5大场景
互联网技术为交通行业的可视化带来了多样性的发展。从传统的二维平面变形图、二维SVG矢量图到如今的 SVG三维矢量技术、BIM技术、GIS+BIM技术、 WebGL技术,甚至连AR、VR、MR等虚拟现实技术 ,也开始应用于交通领域的可视化发展方面。

WebGL,SVG, BIM 技术对比

SVG 以二维平面的矢量图形为主,也支持三维可视化展示,通常应用在地铁线路、高速公路线路展示方面。以SVG制作的三维模型在三维场景里的使用个数有限,否则会引起整体卡顿,此外,SVG三维模型对于模型渲染的程度不高,会影响三维模型展示的实时性。
BIM(Building Information Modeling) 技术是一种应用于工程设计、建造、管理的数据化工具,常应用于城市楼宇、水库、工厂等以工程建筑为主体的全生命周期的健康监测方面,需要大量的三维数据模型来支撑。近年来,基于GS+BIM结合的三维可视化技术已经开始涉足交通行业,能够对空间数据分析及挖掘展示提供很好的技术支持,但对于路段级别的地道监控管理系统来说,成本过高。
WebGLOpenGL 是基于(开放图形库)协议在Web浏览器中进行3D渲染的API,是一个基于纯BS架构开发的技术。对于路段级别的隧道监控管理系统来说,可视化的重点在于隧道内部,所以不需要大量的地理数据和建设数据作为支撑。
SVG三维矢量技术、BIM技术、WebGL技术是与智能交通领域发展相匹配的可视化展示方式,下面从软件应用架构、模型数据量级、模型展示颗粒度、适用场景、对于数据分析的支持、模型场景动态浏览等六个方面对三种可视化技术进行对比。

ThingJS整合Echarts数据分析

WebGL实现了轻量化三维可视化技术,但无法支撑对于数据分析与挖掘的展示。为了弥补这一缺陷,ThingJS平台支持整合Echarts数据类库, 结合Ajax技术来进行异步监控并显示实时数据分析的2D界面,成为二维平面系统和三维可视化技术相融合的绝佳应用场景。
查看3D源码

 

隧道监控三维可视化应用场景

复杂场景的轻量化展示是一个主要趋势,B/S架构会成为大面积使用的平台。ThingJS是基于WebGL的三维可视化技术引擎,利用ThingJS可视化组件来降低物联网3D可视化开发的成本,传统的隧道监控管理系统也感受到了新技术的洗礼。
1. 隧道内三维场景浏览
传统
传统的交通监控管理系统常常采用二维平面技术手段,以变形图的形式展示隧道的车型通道图。通过二维图形像素定位,在二维变形图上以图标的形式铺满所有机电监控类设备,无法给人以立体隧道及设备展示的真实客观感受。
新兴
基于 WebGL的三维隧道全景可视化技术是矢量图形展示技术,通过基于CAD图元的二维平面隧道结构结合3D建模工具进行隧道二维平面结构拔高处理,可以完全再现三维隧道的客观事实及内部空间结构。
模型部分
隧道三维模型场景需要一个建模过程,利用3DSMAX进行精细建模,并在CampusBuilder内搭建3D场景,ThingJS平台可利用前端脚本开发3D效果,轻松实现场景纹理映射、模型光源效果和反射类型、定义可透视投影的可视空间等3D场景渲染,客观再现隧道内及隧道外部真实的客观世界,可以全景浏览感受隧道的弯曲度、距离水平面的高度、隧道的走向、隧道内车型通道、匝道交叉走向。
交互部分
三维模型的360度全景预览需要配合相应的交互式操作。通过对隧道三维模型场景的放大、缩小操作,可以实现对隧道整体场景的浏览及局部场景的放大展示;通过对隧道三维场景的平移、旋转等操作,以不同的视角浏览三维场景;通过3D场景漫游及相机飞行模式等功能,实现对三维隧道内客观的内部构造及设备安装位置、运行状态的监控。通常,ThingJS开发的3D场景会设定界面初始视角,如在隧道内部进行缓慢视角移动,浏览展示隧道内细节。
3D演示地址
 
2. 三维设备模型可视化与数据交互
 
隧道内三维设备模型可视化提供数据交互,以二维平面做数据展示的表现形式实现三维人机界面的交互,真实反映三维可视化场景中对机电设备的控制以及实现外场隧道机电设备状态。
在三维模型场景中,通过调用传统监控管理系统的数据接口,实时展示单设备的基础信息和状态数据,有隧道场景视角拉近、三维设备模型放大、高亮显示实现设备运行状态拟物化显示、模型360度展示效果。
ThingJS平台基于BS架构,利用WebSocket技术对接通信接口。通过二维信息控制面板展示设备的控制接口参数,同时通过命令发布按钮对设备实现单控、组控、自定义设备群控等操作实现命令一键发布;在接收设备控制命令反馈时,通过 WebSocket获取通信数据,解析设备运行状态与状态信息。 利用ThingJS平台写WebSocket.js代码,不到100行即可实现。
3D演示地址

 

3. 隧道辅助设施、设备健康管理
 
传统
为了保证隧道的正常通行状态,隧道内会建造一些辅助运行的设施及设备,如工作井、水泵房、管理中心、线缆管道等。在传统的监控平台中,立体的辅助设施通过分层,在二维平面中分别显示不同层级的平面图,不利于对立体层级的理解。
新兴
在三维隧道监控中,将工作井、水泵房、管理中心线缆管道等由平面展示方式转换成立体三维模型,此显示模型层级之间、与道路之间、与辅助设备之间的位置关系,再通过线缆管道的线缆联通,结合数据采集技术,实现辅助设施的全生命周期的情况管理,以及隧道内网络拓扑、电力拓扑状态全方位监控。
3D演示地址

 

4. 内场机房设施设备维护
传统
隧道临控中的内场监控,尤其是内场机房的监控承担着部分运维系统的职责面对机房内纷繁复杂的交换机、网络、存储、服务器等设备,传统的二维平面无法形象地表达机柜中各设备所处的位置和机柜的使用情况。
新兴
基于三维可视化的内场机房场景的绘制,将整个机房的立体空间结构表现出来,并可做到对机房内全景视角的浏览,直观显示机房中相应机柜所在的位置、机柜中内场机电设备所处在的位置,通过设备通信信息采集数据,实现内场机电设备实时监控状态。通过与网络及电力系统的连接,直观显示机房整体网络架构及电力架构所处的问题点,提升维护处理能力。
3D演示地址

 

5. 隧道突发应急事件演练
在传统二维平面监控管理系统中,对于隧道应急事件的处置历来是一个痛点。针对仅有应急处置文字的章程,以及各种复杂的处置方式和无法关联的实时图像,让监控处置的效率一直难以提升。
如何提高应急处置现场的可见性?三维可视化技术辅助高清视频实时图像,能够很好地解决这一问题。
三维可视化技术部分包括创建人物模型、车辆模型、突发应急事件模型、应急救援模型、消防系统模型、逃生路线规划模型,联动预设的机电监控协调处置模型等在时间轴的作用下按处置流程步骤进行逐步演示,形成流畅的应急事件可视化演练效果。
3D演示地址
 

推荐阅读
  • 提升 Kubernetes 集群管理效率的七大专业工具
    Kubernetes 在云原生环境中的应用日益广泛,然而集群管理的复杂性也随之增加。为了提高管理效率,本文推荐了七款专业工具,这些工具不仅能够简化日常操作,还能提升系统的稳定性和安全性。从自动化部署到监控和故障排查,这些工具覆盖了集群管理的各个方面,帮助管理员更好地应对挑战。 ... [详细]
  • 修复一个 Bug 竟耗时两天?真的有那么复杂吗?
    修复一个 Bug 竟然耗费了两天时间?这背后究竟隐藏着怎样的复杂性?本文将深入探讨这个看似简单的 Bug 为何会如此棘手,从代码层面剖析问题根源,并分享解决过程中遇到的技术挑战和心得。 ... [详细]
  • V8不仅是一款著名的八缸发动机,广泛应用于道奇Charger、宾利Continental GT和BossHoss摩托车中。自2008年以来,作为Chromium项目的一部分,V8 JavaScript引擎在性能优化和技术创新方面取得了显著进展。该引擎通过先进的编译技术和高效的垃圾回收机制,显著提升了JavaScript的执行效率,为现代Web应用提供了强大的支持。持续的优化和创新使得V8在处理复杂计算和大规模数据时表现更加出色,成为众多开发者和企业的首选。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 利用爬虫技术抓取数据,结合Fiddler与Postman在Chrome中的应用优化提交流程
    本文探讨了如何利用爬虫技术抓取目标网站的数据,并结合Fiddler和Postman工具在Chrome浏览器中的应用,优化数据提交流程。通过详细的抓包分析和模拟提交,有效提升了数据抓取的效率和准确性。此外,文章还介绍了如何使用这些工具进行调试和优化,为开发者提供了实用的操作指南。 ... [详细]
  • 如何撰写初级和高级前端开发者的专业简历
    如何撰写初级和高级前端开发者的专业简历 ... [详细]
  • CSS3 @font-face 字体应用技术解析与实践
    在Web前端开发中,HTML教程和CSS3的结合使得网页设计更加多样化。长期以来,Web设计师受限于“web-safe”字体的选择。然而,CSS3中的`@font-face`规则允许从服务器端加载自定义字体,极大地丰富了网页的视觉效果。通过这一技术,设计师可以自由选择和使用各种字体,提升用户体验和页面美观度。本文将深入解析`@font-face`的实现原理,并提供实际应用案例,帮助开发者更好地掌握这一强大工具。 ... [详细]
  • PHP自学必备:从零开始的准备工作与工具选择 ... [详细]
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • 在CentOS 7上部署WebRTC网关Janus
    在CentOS 7上部署WebRTC网关Janus ... [详细]
  • 本文详细解析了JSONP(JSON with Padding)的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术,其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景,还深入探讨了其具体实现过程,包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外,还分析了JSONP的优势和局限性,帮助读者全面理解这一技术在现代Web开发中的应用。 ... [详细]
  • 基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架,实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线,并确保消息的实时性和可靠性,适用于需要即时通信的应用场景。 ... [详细]
  • 深入解析Wget CVE-2016-4971漏洞的利用方法与安全防范措施
    ### 摘要Wget 是一个广泛使用的命令行工具,用于从 Web 服务器下载文件。CVE-2016-4971 漏洞涉及 Wget 在处理特定 HTTP 响应头时的缺陷,可能导致远程代码执行。本文详细分析了该漏洞的成因、利用方法以及相应的安全防范措施,包括更新 Wget 版本、配置防火墙规则和使用安全的 HTTP 头。通过这些措施,可以有效防止潜在的安全威胁。 ... [详细]
  • PyQt5 QTextEdit:深入解析Python中多功能GUI库的应用与实现
    本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定,提供了超过 620 个类和 6000 个函数及方法,广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件,支持丰富的文本编辑功能,如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能,还在于其易用性和灵活性,使其成为开发复杂用户界面的理想选择。 ... [详细]
  • 深入RTOS实践,面对原子操作提问竟感困惑
    在实时操作系统(RTOS)的实践中,尽管已经积累了丰富的经验,但在面对原子操作的具体问题时,仍感到困惑。本文将深入探讨RTOS中的原子操作机制,分析其在多任务环境下的重要性和实现方式,并结合实际案例解析常见的问题及解决方案,帮助读者更好地理解和应用这一关键技术。 ... [详细]
author-avatar
倾其h所有只为爱你
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有