现代工业化进程的推进大大加快了现代化进程，也带来了相应的安全隐患。在传统的监控领域，2D可视化一般是基于Web前端技术监控，本文使用ThingJS构建一个轻量级的3D可视化场景。此3D场景展示了现代商场的数字孪生可视化场景，包括人员实时位置、电子围栏范围、现场安全情况等，有助于直观了解人员当前安全状况。电子围栏又称周界防盗报警系统，监控防区工作状态。真实场景中的电子围栏系统应用于农业、畜牧业、监狱、军事设施等安全敏感区域。在ThingJS平台上，地理围栏指的是一个区域，使用PolygonRegion属性。创建一个物体或模型并开启移动功能，开始检测目标点是否进入电子围栏区域，判断真假显示报警响应。本文通过数字孪生可视化场景的搭建和模型的加载，人物实时定位代码的实现，电子围栏的实现，讲解了如何使用ThingJS实现一个简单的3D电子围栏可视化和轨迹图。//添加电子围栏newTHING.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;})当人或物触发报警时，有两种方式提醒注意。一是禁区围栏颜色变化；另一种是在显示面板上显示报警信息，直观监控目标点的移动范围。完整代码如下：//添加图片标注newTHING.widget.Button('添加图片标注',function(){varcoord=[83,0.5,61];if(marker1){return;}//创建目标点（标记）marker1=app.create({type:"Marker",id:"marker1",url:"/guide/examples/images/navigation/user.png",position:coord,size:1})})变量点=[[81,63],[81,52],[72,52],[72,63]];//移动图片标签newTHING.widget.Button('移动图片标签',function(){varmarkerEndPoint=[68,0.5,55];if(marker1!=null){varmoveState=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){//监控图像标签是否进入电子围栏区域fieldif(marker1!=null){marker1.on('update',function(){if(polygonMarker!=null){varintoPolygonMarker=isInPolygon([marker1.position[0],marker1.position[2]],点);如果(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');}}},'监控图像标注')}}})//添加模型标注newTHING.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];})//移动模型注释newTHING.widget.Button('移动模型注释',function(){varobjEndPoint=[70,0.1,60];if(people!=null){varmoveState=people.getAttribute('移动状态');if(moveState=='complete'){people.off('update',null,'监控图片标注');返回;}//播放模型动画people.playAnimation({name:'Go',speed:1,loopType:THING.LoopType.Repeat,});//模型移动people.moveTo({position:objEndPoint,//移动到终点位置orientToPath:true,//沿路径方向time:8*1000,complete:function(ev){people.stopAnimation('walk');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){varintoPolygonMarker=isInPolygon([people.position[0],people.position[2]],point);if(intoPolygonMarker){polygonMarker.regionColor='#a94442';polygonMarker.lineColor='#a94442'$('.warninfo1').css('显示','块');$('.warninfo2').css('显示','无');$('.warninfo3').css('显示','无');}else{polygonMarker.regionColor='#3CF9DF';polygonMarker.lineColor='#3CF9DF'$('.warninfo1').css('display','none');$('.warninfo2').css('显示','无');$('.warninfo3').css('显示','块');}}},'监控模型标记')}}})//重新设置newTHING.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();//创建提示面板});/***创建提示面板*/functioncreateTip(){varhtml=`
