364|0

37

帖子

0

TA的资源

一粒金砂(中级)

楼主
 

电子围栏可视化,提高安全运维效率 [复制链接]

现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患,在传统的监控领域,一般都是基于Web前端技术来实现 2D 可视化监控,本文采用ThingJS来构造轻量化的 3D 可视化场景,该3D场景展示了一个现代化商场的数字孪生可视化场景,包括人员的实时位置、电子围栏的范围、现场的安全情况等等,帮助直观的了解当前人员的安全状况。

电子围栏又称周界防盗报警系统,监控防区工作状态,实景中的电子围栏系统用于农业、畜牧业,以及监狱、军事设施等安全敏感地区。ThingJS平台上,电子围栏指的是一个区域,使用PolygonRegion属性。创建物体对象或模型并开启移动功能,即可开始检测目标点是否进入电子围栏区域,判断true或false显示告警反应。

本篇文章通过对数字孪生可视化场景的搭建和模型的加载,人物实时定位代码的实现、电子围栏和轨迹图的实现进行阐述,了解如何通过使用ThingJS实现一个简单的3D电子围栏可视化。

 
  • // 添加电子围栏
  • new THING.widget.Button('添加电子围栏', function() {
  • // 构成多边形的点(取世界坐标系下的坐标)
  • points = [
  • [81, 0.5, 63],
  • [81, 0.5, 52],
  • [72, 0.5, 52],
  • [72, 0.5, 63]
  • ];
  • if (polygonMarker) { return; }
  • // 创建电子围栏(区域)
  • polygonMarker = app.create({
  • type: 'PolygonRegion',
  • points: points, // 传入世界坐标系下点坐标
  • style: {
  • regionOpacity: .6,
  • regionColor: '#3CF9DF', // 区域颜色
  • lineColor: '#3CF9DF' // 线框颜色
  • }
  • });
  • // 设置永远在最上层显示
  • polygonMarker.style.alwaysOnTop = false;
  • })

 

当人物或物体对象出发警报时,有2种方式提醒注意,一是踏足的禁区围栏颜色发生改变;二是展示面板显示报警信息,可视化监控目标点的移动范围。

完整代码如下:

 
  • // 添加图片标注
  • new THING.widget.Button('添加图片标注', function() {
  • var coord = [83, 0.5, 61];
  • if (marker1) { return; }
  • // 创建目标点(marker)
  • marker1 = app.create({
  • type: "Marker",
  • id: "marker1",
  • url: "/guide/examples/images/navigation/user.png",
  • position: coord,
  • size: 1
  • })
  • })
  • var point = [
  • [81, 63],
  • [81, 52],
  • [72, 52],
  • [72, 63]
  • ];
  • // 移动图片标注
  • new THING.widget.Button('移动图片标注', function() {
  • var markerEndPoint = [68, 0.5, 55];
  • if (marker1 != null) {
  • var moveState = marker1.getAttribute('moveState');
  • if (moveState == 'complete') {
  • marker1.off('update', null, '监控图片标注');
  • return;
  • }
  • // 目标点移动
  • marker1.moveTo({
  • position: markerEndPoint, // 移动到终点位置
  • time: 2 * 1000,
  • orientToPath: true, // 沿路径方向
  • complete: function(ev) {
  • marker1.off('update', null, '监控图片标注');
  • $('.warninfo1').css('display', 'none');
  • $('.warninfo2').css('display', 'block');
  • $('.warninfo3').css('display', 'none');
  • marker1.setAttribute('moveState', 'complete');
  • }
  • })
  • }
  • if (points != null) {
  • // 监控图片标注是否进入电子围栏区域
  • if (marker1 != null) {
  • marker1.on('update', function() {
  • if (polygonMarker != null) {
  • var intoPolygonMarker = isInPolygon([marker1.position[0], marker1.position[2]], point);
  • if (intoPolygonMarker) {
  • polygonMarker.regionColor = '#a94442';
  • polygonMarker.lineColor = '#a94442'
  • $('.warninfo1').css('display', 'block');
  • $('.warninfo2').css('display', 'none');
  • $('.warninfo3').css('display', 'none');
  • } else {
  • polygonMarker.regionColor = '#3CF9DF';
  • polygonMarker.lineColor = '#3CF9DF'
  • $('.warninfo1').css('display', 'none');
  • $('.warninfo2').css('display', 'none');
  • $('.warninfo3').css('display', 'block');
  • }
  • }
  • }, '监控图片标注')
  • }
  • }
  • })
  • // 添加模型标注
  • new THING.widget.Button('添加模型标注', function() {
  • //创建目标点(Obj)
  • people = app.query('#worker')[0];
  • people.position = [83, 0.1, 56];
  • people.visible = true;
  • people.scale = [1.5, 1.5, 1.5];
  • })
  • // 移动模型标注
  • new THING.widget.Button('移动模型标注', function() {
  • var objEndPoint = [70, 0.1, 60];
  • if (people != null) {
  • var moveState = people.getAttribute('moveState');
  • if (moveState == 'complete') {
  • people.off('update', null, '监控图片标注');
  • return;
  • }
  • // 播放模型动画
  • people.playAnimation({
  • name: '走',
  • speed: 1,
  • loopType: THING.LoopType.Repeat,
  • });
  • // 模型移动
  • people.moveTo({
  • position: objEndPoint, // 移动到终点位置
  • orientToPath: true, // 沿路径方向
  • time: 8 * 1000,
  • complete: function(ev) {
  • people.stopAnimation('走');
  • people.off('update', null, '监控模型标注');
  • $('.warninfo1').css('display', 'none');
  • $('.warninfo2').css('display', 'block');
  • $('.warninfo3').css('display', 'none');
  • people.setAttribute('moveState', 'complete');
  • }
  • })
  • }
  • if (points != null) {
  • // 监控模型标注是否进入电子围栏区域
  • if (people != null) {
  • people.on('update', function() {
  • if (polygonMarker != null) {
  • var intoPolygonMarker = isInPolygon([people.position[0], people.position[2]], point);
  • if (intoPolygonMarker) {
  • polygonMarker.regionColor = '#a94442';
  • polygonMarker.lineColor = '#a94442'
  • $('.warninfo1').css('display', 'block');
  • $('.warninfo2').css('display', 'none');
  • $('.warninfo3').css('display', 'none');
  • } else {
  • polygonMarker.regionColor = '#3CF9DF';
  • polygonMarker.lineColor = '#3CF9DF'
  • $('.warninfo1').css('display', 'none');
  • $('.warninfo2').css('display', 'none');
  • $('.warninfo3').css('display', 'block');
  • }
  • }
  • }, '监控模型标注')
  • }
  • }
  • })
  • // 重置
  • new THING.widget.Button('重置', function() {
  • if (polygonMarker) {
  • polygonMarker.destroy();
  • polygonMarker = null;
  • }
  • if (marker1) {
  • marker1.destroy();
  • marker1 = null;
  • }
  • if (people) {
  • people.visible = false;
  • people.setAttribute('moveState', null);
  • }
  • $('.warninfo1').css('display', 'none');
  • $('.warninfo1').css('display', 'none');
  • $('.warninfo1').css('display', 'block');
  • })
  • createTip(); // 创建提示面板
  • });
  • /**
  • * 创建提示面板
  • */
  • function createTip() {
  • var html =
  • `<div class="fencing" style="width:200px;position: absolute;top: 50px;left: 50%;transform: translateX(-50%);z-index: 999;">
  • <div class="alert alert-danger warninfo1" role="alert" style="padding: 15px;margin-bottom: 20px;color: #a94442;background-color: #f2dede;border-color: #ebccd1;border-radius: 4px;display:none;">目标已进入围栏</div>
  • <div class="alert alert-info warninfo2" role="alert" style="padding: 15px;margin-bottom: 20px;color: #31708f;background-color: #d9edf7;border-color: #bce8f1;border-radius: 4px;display:none;">到达目的地</div>
  • <div class="alert alert-warning warninfo3" role="alert" style="padding: 15px;margin-bottom: 20px;color: #8a6d3b;background-color: #fcf8e3;border-color: #faebcc;border-radius: 4px;">目标未进入围栏</div>
  • <div onclick="fenClose()" style="cursor: pointer;position: absolute;top: -7px;right: -8px;width: 16px;height: 16px;border-radius: 50%;background-color: #777777;border: 3px solid #ffffff;">
  • <div style="position: absolute;width: 10px;height: 2px;background-color: #fff;transform: rotate(45deg);top: 7px;left: 3px;"></div>
  • <div style="position: absolute;width: 10px;height: 2px;background-color: #fff;transform: rotate(-45deg);top: 7px;left: 3px;"></div>
  • </div>
  • </div>`;
  • $('#div2d').append($(html));
  • }
  • /**
  • * 关闭提示面板
  • */
  • function fenClose() {
  • $(".fencing").hide();
  • }
  • /**
  • * 检测目标点是否进入电子围栏区域
  • * @param {Array} checkPoint - 校验坐标
  • * @param {Array} polygonPoints - 形成电子围栏的坐标
  • * @returns {Boolean} true 或 false
  • * [url=home.php?mod=space&uid=1068364]@description[/url] 此方法仅判断处于同一个平面的目标点是否在区域内(只判断坐标x和z值),
  • * 不考虑两者当前离地高度(坐标的y值)
  • */
  • function isInPolygon(checkPoint, polygonPoints) {
  • var counter = 0;
  • var i;
  • var xinters;
  • var p1, p2;
  • var pointCount = polygonPoints.length;
  • p1 = polygonPoints[0];
  • for (i = 1; i <= pointCount; i++) {
  • p2 = polygonPoints[i % pointCount];
  • if (checkPoint[0] > Math.min(p1[0], p2[0]) && checkPoint[0] <= Math.max(p1[0], p2[0])) {
  • if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
  • if (p1[0] != p2[0]) {
  • xinters = (checkPoint[0] - p1[0]) * (p2[1] - p1[1]) / (p2[0] - p1[0]) + p1[1];
  • if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
  • counter++;
  • }
  • }
  • }
  • }
  • p1 = p2;
  • }
  • if (counter % 2 == 0) {
  • return false;
  • } else {
  • return true;
  • }
  • }

 

此帖出自信息发布论坛
点赞 关注
 
 

回复
举报
您需要登录后才可以回帖 登录 | 注册

随便看看
查找数据手册?

EEWorld Datasheet 技术支持

相关文章 更多>>
关闭
站长推荐上一条 1/10 下一条
艾睿电子& Silicon Labs 有奖直播 | 全新蓝牙信道探测:从技术创新到实际应用
直播时间:3月12日(周三)上午10:00
直播奖励:多功能榨汁机、蓝牙音箱、手机支架

查看 »

 
EEWorld订阅号

 
EEWorld服务号

 
汽车开发圈

About Us 关于我们 客户服务 联系方式 器件索引 网站地图 最新更新 手机版

站点相关: 国产芯 安防电子 汽车电子 手机便携 工业控制 家用电子 医疗电子 测试测量 网络通信 物联网

北京市海淀区中关村大街18号B座15层1530室 电话:(010)82350740 邮编:100190

电子工程世界版权所有 京B2-20211791 京ICP备10001474号-1 电信业务审批[2006]字第258号函 京公网安备 11010802033920号 Copyright © 2005-2025 EEWORLD.com.cn, Inc. All rights reserved
快速回复 返回顶部 返回列表