新基建下,智慧交通发展新规划:智慧隧道监控可视化系统

2024-08-30 10:58

本文主要是介绍新基建下,智慧交通发展新规划:智慧隧道监控可视化系统,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

随着当代经济的发展,交通环境日益紧张,加上山区地区的交通运输的需求,隧道的交通建设开发方兴未艾。隧道交通的规划越来越完备,而对于隧道内监控管理维护却显得有些不足。而工业4.0的崛起,逐步进入了智能化的新时代,伴随着工业互联网的新兴力量,工控可视化系统应运而生,不仅能起到日常的监控管理维护,在发现事故或险情时能第一时间采取应急预案;还能通过实时数据的采集反馈,远程操控设备运行以及预测设备的优良性能,从而达到更立体更全面的工控系统的运行。

HT for Web 不止自主研发了强大的基于 HTML5 的 2D、3D 渲染引擎,为可视化提供了丰富的展示效果。介于 2D 组态3D 组态上,Hightopo(以下简称 HT )的 HT for Web 产品上的有着丰富的组态化可供选择,本文将介绍如何运用 HT 丰富的 2/3D 组态搭建出一个隧道监控可视化系统的解决方案。

监控隧道内的车道堵塞情况、隧道内的车祸现场,在隧道中显示当前车祸位置并在隧道口给予提示等功能都是非常有必要的。这个隧道监控可视化系统的主要内容包括:照明、风机、车道指示灯、交通信号灯、情报板、消防、火灾报警、车行横洞、风向仪、微波车检、隧道紧急逃生出口的控制以及事故模拟等等。

界面简介及效果预览

预览链接:http://www.hightopo.com/demo/tunnel2/index.html

上图中的各种设备都可以双击,此时 camera 的位置会从当前位置移动到双击的设备的正前方;隧道入口的展示牌会自动轮播,出现事故时会展示牌中的内容会由“限速80,请开车灯”变为“超车道两车追尾,请减速慢行”;两隧道中间的逃生通道上方的指示牌是可以点击的,点击切换为蓝绿色激活状态,两旁的逃生通道门也会打开,再单击指示牌变为灰色,门关闭;还有一个事故现场模拟,双击两旁变压器中其中一个,在隧道内会出现一个“事故现场图标”,单击此图标,出现弹出框显示事故等等等等。

代码实现

一、场景搭建

整个隧道都是基于 3D 场景上绘制的,先来看看怎么搭建 3D 场景:

// 数据容器
dm = new ht.DataModel();
// 3d 场景
g3d = new ht.graph3d.Graph3dView(dm);
// 将场景添加到 body 中
g3d.addToDOM();

上面代码中的 addToDOM 函数,是一个将组件添加到 body 体中的函数的封装,定义如下:

addToDOM = function(){var self = this,// 获取组件的底层 divview = self.getView(),style = view.style;// 将组件底层div添加进body中document.body.appendChild(view);// ht 默认将所有的组件的position都设置为absolute绝对定位style.left = '0';style.right = '0';style.top = '0';style.bottom = '0';// 窗口大小改变事件,调用刷新函数window.addEventListener('resize', function () { self.iv(); }, false);
}
二、JSON反序列化

整个场景是由名为 隧道1.json 的文件导出而成的,我只需要用代码将 json 文件中的内容转换为我需要的部分即可:

// xhrLoad 函数是一个异步加载文件的函数
ht.Default.xhrLoad('./scenes/隧道1.json', function(text) {// 将 json 文件中的文本转为我们需要的 json 格式的内容var json = ht.Default.parse(text);// 反序列化数据容器,解析用于生成对应的Data对象并添加到数据容器 这里相当于把 json 文件中生成的 ht.Node 节点反序列化到数据容器中,这样数据容器中就有这个节点了dm.deserialize(json);
});

由于 xhrLoad 函数是一个异步加载函数,所以如果 dm 数据容器反序列化未完成就直接调用了其中的节点,那么会造成数据获取不到的结果,所以一般来说我是将一些逻辑代码写在这个函数内部,或者给逻辑代码设置 timeout 错开时间差。

首先,由于数据都是存储在 dm 数据容器中的(通过 dm.add(node) 添加的),所以我们要获取数据除了可以通过 id、tag 等独立的方式,还可以通过遍历数据容器来获取多个元素。由于这个场景比较复杂,模型的面也比较多,鉴于设备配置,我将能 Batch 批量的元素都进行了批量。

批量是 HT 实现下的一种特有的机制,批量能提高性能的原理在于,当图元一个个独立绘制模型时性能较差,而当一批图元聚合成一个大模型进行一次性的绘制时, 则会极大提高 WebGL 刷新性能,执行代码如下

dm.each(function(data) {// 对“电话”进行批量if (data.s('front.image') === 'assets/sos电话.png'){data.s('batch', 'sosBatch');}// 逃生通道批量(透明度也会影响性能)else if (data.s('all.color') === 'rgba(222,222,222,0.18)') {data.s('batch', 'emergencyBatch');}else if (data.s('shape3d') === 'models/隧道/摄像头.json' || data.s('shape3d') === 'models/隧道/横洞.json' || data.s('shape3d') === 'models/隧道/卷帘门.json') {// 个别摄像头染色了 不做批量if(!data.s('shape3d.blend'))// 基础批量什么也不做data.s('batch', 'basicBatch');}else if (data.s('shape3d') === 'models/大型变压器/变压器.json') {    data.s('batch', 'tileBatch');data.setToolTip('单击漫游,双击车祸地点出现图标');}else if (data.getDisplayName() === '地面') {// 设置隧道“地面”不可选中data.s('3d.selectable', false);}else if (data.s('shape3d') === 'models/隧道/排风.json') {// 排风扇的模型比较复杂,所以做批量data.s('batch', 'fanBatch');}else if (data.getDisplayName() === 'arrow') {// 隧道两旁的箭头路标if (data.getTag() === 'arrowLeft') data.s('shape3d.image', 'displays/abc.png');else data.s('shape3d.image', 'displays/abc2.png');data.s({'shape3d': 'billboard',// 缓存,设置了 cache 的代价是需要设置 invalidateShape3dCachedImage'shape3d.image.cache': true,// 设置这个值,图片上的锯齿就不会太明显了(若图片类型为 json,则设置 shape3d.dynamic.transparent)'shape3d.transparent': true });g3d.invalidateShape3dCachedImage(data);}// 隧道入口处的情报板else if (data.getTag() === 'board' || data.getTag() === 'board1') {// 业务属性,用来控制文本的位置[x,y,width,height]data.a('textRect', [0, 2, 244, 46]); // 业务属性,设置文本内容data.a('limitText', '限速80,请开车灯');var min = -245;var name = 'board' + data.getId();window[name] = setInterval(function() {// 设置情报板中的文字向左滚动,并且当文字全部显示时重复闪烁三次circleFunc(data, window[name], min);}, 100);}//给逃生通道上方的指示板 动态设置颜色var infos = ['人行横洞1', '人行横洞2', '人行横洞3', '人行横洞4', '车行横洞1', '车行横洞2', '车行横洞3'];infos.forEach(function(info) {if(data.getDisplayName() === info) {data.a('emergencyColor', 'rgb(138, 138, 138)');}});infos = ['车道指示器', '车道指示器1', '车道指示器2', '车道指示器3'];infos.forEach(function(info) {if (data.getDisplayName() === info) {// 考虑到性能问题 将六面体变换为 billboard 类型元素createBillboard(data, 'assets/车道信号-过.png', 'assets/车道信号-过.png', info);}});
});

上面有一处设置了 tooltip 文字提示信息,在 3d 中,要显示这个文字提示信息,就需要设置 g3d.enableToolTip() 函数,默认 3d 组件是关闭这个功能的。

三、逻辑代码

情报板滚动条

我就直接按照上面代码中提到的方法进行解释,首先是 circleFunc 情报板文字循环移动的函数,在这个函数中我们用到了业务属性 limitText 设置情报板中的文字属性以及 textRect 设置情报板中文字的移动位置属性:

// 设置情报板中的文字向左滚动,并且当文字全部显示时重复闪烁三次
function circleFunc(data, timer, min) {// 获取当前业务属性 limitText 的内容var text = data.a('limitText');// 设置业务属性 textRect 文本框的坐标和大小data.a('textRect', [data.a('textRect')[0]-5, 2, 244, 46]); if (parseInt(data.a('textRect')) <= parseInt(min)) {data.a('textRect', [255, 2, 244, 46]);}else if (data.a('textRect')[0] === 0) {clearInterval(timer);var index = 0;// 设置多个 timer 是因为能够进入这个函数中的不止一个 data,如果在同一时间多个 data 设置同一个 timer,那肯定只会对最后一个节点进行动画。后面还有很多这种陷阱,要注意var testName = 'testTimer' + data.getId();window[testName] = setInterval(function() {index++;// 如果情报板中文本内容为空if(data.a('limitText') === '') {setTimeout(function() {// 设置为传入的 text 值data.a('limitText', text);}, 100);}else {setTimeout(function() {// 若情报板中的文本内容不为空,则设置为空data.a('limitText', ''); }, 100);}// 重复三次 if(index === 11) { clearInterval(window[testName]);data.a('limitText', text);}}, 100);setTimeout(function() {timer = setInterval(function() {// 回调函数circleFunc(data, timer, min);}, 100);}, 1500);}
}

由于 WebGL 对浏览器的要求不低,为了能尽量多的适应各大浏览器,我们将所有的“道路指示器” ht.Node 类型的六面体全部换成 billboard 类型的节点,性能能提升不少。

http://www.hightopo.com

设置 billboard 的方法很简单,获取当前的六面体节点,然后给这些节点设置:

node.s({'shape3d': 'billboard','shape3d.image': imageUrl,'shape3d.image.cache': true
});
// 还记得用 shape3d.image.cache 的代价么?
g3d.invalidateShape3dCachedImage(node);

当然,因为 billboard 不能双面显示不同的图片,只是一个“面”,所以我们还得在这个节点的位置创建另一个节点,在这个节点的“背面”显示图片,并且跟这个节点的配置一模一样,不过位置要稍稍偏移一点。

Camera 缓慢偏移

其他动画部分比较简单,我就不在这里多说了,这里有一个双击节点能将视线从当前 camera 位置移动到双击节点正前方的位置的动画我提一下。我封装了两个函数 setEye 和 setCenter,分别用来设置 camera 的位置和目标位置的:

// 设置“目标”位置
function setCenter(center, finish) {// 获取当前“目标”位置,为一个数组,而 getCenter 数组会在视线移动的过程中不断变化,所以我们先拷贝一份var c = g3d.getCenter().slice(0), // 当前x轴位置和目标位置的差值dx = center[0] - c[0], dy = center[1] - c[1],dz = center[2] - c[2];// 启动 500 毫秒的动画过度ht.Default.startAnim({duration: 500,action: function(v, t) {// 将“目标”位置缓慢从当前位置移动到设置的位置处g3d.setCenter([ c[0] + dx * v,c[1] + dy * v,c[2] + dz * v]);}});
};// 设置“眼睛”位置
function setEye(eye, finish) {// 获取当前“眼睛”位置,为一个数组,而 getEye 数组会在视线移动的过程中不断变化,所以我们先拷贝一份var e = g3d.getEye().slice(0),dx = eye[0] - e[0],dy = eye[1] - e[1],dz = eye[2] - e[2];// 启动 500 毫秒的动画过度ht.Default.startAnim({duration: 500,// 将 Camera 位置缓慢地从当前位置移动到设置的位置action: function(v, t) {g3d.setEye([e[0] + dx * v,e[1] + dy * v,e[2] + dz * v]);}});
};

后期我们要设置的时候就直接调用这两个函数,并设置参数为我们目标的位置即可。比如我这个场景中的各个模型,由于不同视角对应的各个模型的旋转角度也不同,我只能找几个比较有代表性的 0°,90°,180°以及360° 这四种比较典型的角度了。所以绘制 3D 场景的时候,我也尽量设置节点的旋转角度为这四个中的一种(而且对于我们这个场景来说,基本上只在 y 轴上旋转了):

// 获取事件对象的三维坐标
var p3 = e.data.p3(), // 获取事件对象的三维尺寸s3 = e.data.s3(),// 获取事件对象的三维旋转值r3 = e.data.r3();
// 设置“目标”位置为当前事件对象的三维坐标值
setCenter(p3);
// 如果节点的 y 轴旋转值 不为 0
if (r3[1] !== 0) {// 浮点负数得做转换才能进行比值if (parseFloat(r3[1].toFixed(5)) === parseFloat(-3.14159)) { // 设置camera 的目标位置setEye([p3[0], p3[1]+s3[1], p3[2] * Math.abs(r3[1]*2.3/6)]);}else if (parseFloat(r3[1].toFixed(4)) === parseFloat(-1.5708)) {setEye([p3[0] * Math.abs(r3[1]/1.8), p3[1]+s3[1], p3[2]]);}else {setEye([p3[0] *r3[1], p3[1]+s3[1], p3[2]]);}
}
else {setEye([p3[0], p3[1]+s3[1]*2, p3[2]+1000]);
}

事故模拟现场

最后来说说模拟的事故现场吧,这段还是比较接近实际项目的。操作流程如下:双击“变压器”–>隧道中间某个部分会出现一个“事故现场”图标–>单击图标,弹出对话框,显示当前事故信息–>点击确定,则事故现场之前的灯都显示为红色×,并且隧道入口的情报板上的文字显示为“超车道两车追尾,请减速慢行”–>再双击一次“变压器”,场景恢复事故之前的状态。

在 HT 中,可通过 Graph3dView#addInteractorListener(简写为 mi)来监听交互过程:

g3d.addInteractorListener(function(e) {if(e.kind === 'doubleClickData') {// 有“事故”图标节点存在if (e.data.getTag() === 'jam') return;// 如果双击对象是变压器if (e.data.s('shape3d') === 'models/大型变压器/变压器.json') {index++;// 通过唯一标识 tag 标签获取“事故”图标节点对象var jam = dm.getDataByTag('jam');if(index === 1){var jam = dm.getDataByTag('jam');jam.s({// 设置节点在 3d 上可见'3d.visible': true,// 设置节点为 billboard 类型'shape3d': 'billboard',// 设置 billboard 的显示图片'shape3d.image': 'assets/车祸.png', // 设置 billboard 图片是否缓存'shape3d.image.cache': true,// 是否始终面向镜头'shape3d.autorotate': true,// 默认保持图片原本大小,设置为数组模式则可以设置图片显示在界面上的大小'shape3d.fixSizeOnScreen': [30, 30],});// cache 的代价是节点需要设置这个函数g3d.invalidateShape3dCachedImage(jam);}else {jam.s({// 第二次双击变压器就将所有一切恢复“事故”之前的状态'3d.visible': false});dm.each(function(data) {var p3 = data.p3();if ((p3[2] < jam.p3()[2]) && data.getDisplayName() === '车道指示器1') {data.s('shape3d.image', 'assets/车道信号-过.png');}if(data.getTag() === 'board1') {data.a('limitText', '限速80,请开车灯');}});index = 0;}             }}
});

既然“事故”节点图标出现了,接着点击图标出现“事故信息弹出框”,监听事件同样是在 mi(addInteractorListener)中,但是这次监听的是单击事件,我们知道,监听双击事件时会触发一次单击事件,为了避免这种情况,我在单击事件里面做了演示:

// 点击图元
else if (e.kind === 'clickData'){timer = setTimeout(function() {clearTimeout(timer);// 如果是“事故”图标节点if (e.data.getTag() === 'jam') {// 创建一个对话框createDialog(e.data);}}, 200);
}

在上面的双击事件中我没有 clearTimeout,怕顺序问题给大家造成困扰,要记得加一下。

弹出框如下:

这个弹出框是由两个 ht.widget.FormPane 表单构成的,左边的表单只有一行,行高为 140,右边的表单是由 5 行构成的,点击确定,则“事故”图标节点之前的道路指示灯都换成红色×的图标:

// 弹出框右边的表单
function createForm4(node, dialog) {// 表单组件var form = new ht.widget.FormPane();// 设置表单组件的宽form.setWidth(200);// 设置表单组件的高form.setHeight(200);// 获取表单组件的底层 div var view = form.getView();// 将表单组件添加到 body 中document.body.appendChild(view);var infos = ['编辑框内容为:2辆','编辑框内容为:客车-客车','编辑框内容为:无起火','编辑框内容为:超车道'];infos.forEach(function(info) {// 向表单中添加行form.addRow([ info// 第二个参数为行宽度,小于1的值为相对值], [0.1]);});form.addRow([{// 添加一行的“确认”按钮button: {label: '确认',// 按钮点击事件触发onClicked: function() {// 隐藏对话框dialog.hide();dm.each(function(data) {var p3 = data.p3();// 改变“车道指示器”的显示图片为红色×,这里我是根据“事故”图标节点的坐标来判断“车道显示器”是在前还是在后的if ((p3[2] < node.p3()[2]) && data.getDisplayName() === '车道指示器1') {data.s('shape3d.image', 'assets/车道信号-禁止.png');}// 将隧道口的情报板上的文字替换if(data.getTag() === 'board1') {data.a('limitText', '超车道两车追尾,请减速慢行');}});}}}], [0.1]);return form;
}

总结

伴随着新基建的建设兴起,是以新发展理念为引领,以技术创新为驱动,以信息网络为基础,面向高质量发展需要,提供数字转型、智能升级、融合创新等服务的基础设施体系的完备,国家正迈入新时代的建设,也迎来了新时代的挑战与机遇。隧道交通的监控可以归纳为工控管理与智慧交通建设的产物,同样具有极为重要的意义。在众多行业上所积累的经验,HT 已经实现了许多不同领域建设的案例,例如路口监管可视化系统,有兴趣的话也可以了解一下!

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时,你也可以查看更多案例及效果:https://www.hightopo.com/demos/index.html

这篇关于新基建下,智慧交通发展新规划:智慧隧道监控可视化系统的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120626

相关文章

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

基于人工智能的图像分类系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 图像分类是计算机视觉中的一个重要任务,目标是自动识别图像中的对象类别。通过卷积神经网络(CNN)等深度学习技术,我们可以构建高效的图像分类系统,广泛应用于自动驾驶、医疗影像诊断、监控分析等领域。本文将介绍如何构建一个基于人工智能的图像分类系统,包括环境

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

动态规划---打家劫舍

题目: 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个房屋存放金额的非负整数数组,计算你 不触动警报装置的情况下 ,一夜之内能够偷窃到的最高金额。 思路: 动态规划五部曲: 1.确定dp数组及含义 dp数组是一维数组,dp[i]代表

《纳瓦尔宝典》是纳瓦尔·拉维坎特(Naval Ravikant)的智慧箴言

《纳瓦尔宝典》是一本由埃里克·乔根森(Erik Jorgensen)编著的书籍,该书于2022年5月10日由中信出版社出版。这本书的核心内容围绕硅谷知名天使投资人纳瓦尔·拉维坎特(Naval Ravikant)的智慧箴言,特别是关于财富积累和幸福人生的原则与方法。 晓北斗推荐 《纳瓦尔宝典》 基本信息 书名:《纳瓦尔宝典》作者:[美] 埃里克·乔根森译者:赵灿出版时间:2022

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善,其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性, 将与教育相关的数据要素在区块链上进行存证确权,在确保数据可信的前提下,促进教育的公平、透明、开放,为教育教学质量提升赋能,实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护,支撑教育资源共享、教学质量评估、