在可视化场景中任意画一条线段并测量距离
在数字孪生可视化场景中，你可能会遇到这个问题，即需要测量数字孪生可视化场景中不同目标之间的距离。通过这种测量，可以清楚地知道每个目标在可视化场景中的位置以及每个目标之间的距离，便于进行合理的规划。这个要求并不难。我们需要做的是确定待测物体坐标点的起点和终点位置。运行效果如下：在ThingJS中要知道场景中两点之间的空间距离，可以通过调用三维空间中的所有坐标点来计算两点之间的空间距离来计算两坐标点之间的距离,需要点击鼠标得到两点之间的空间距离。比如我想知道场景中两个场景之间的距离，我可以用鼠标点击两个或多个场景位置，计算出3D场景中任意3D点的空间距离。下面一起来看看操作步骤：1、添加注册事件，在测量详情界面注册拖动事件，并设置可拖动范围不超过屏幕。registerEvent(){var_this=this;//注册测量详情界面关闭按钮点击事件$('#dataDetails.tj-close').on('click',function(){$('#dataDetails').css('display','none');});//在测量详情界面注册拖动事件，设置拖动范围，不能超出屏幕$('#dataDetails.tj-title').on('mousedown',function(ev){ev.preventDefault();vardomEle=$('#dataDetails.tj-panel');varspacX=ev.pageX-domEle[0].offsetLeft;varspacY=ev.pageY-domEle[0].offsetTop;$(document).bind('mousemove',function(event){varx=event.pageX-spacX;vary=event.pageY-spacY;if(event.pageX<0||event.pageX>$(window).width()||event.pageY<0||event.pageY>$(window).height()){$(document).unbind('mousemove');}if(x<=0)x=0;if(x>($(window).width()-domEle.width())){x=$(window).width()-domEle.width();}如果(y<=0)y=0;如果(y>($(window).height()-domEle.height())){y=$(window).height()-domEle.height();}domEle.css('left',x+'px').css('top',y+'px');});}).on('mouseup',function(){$(document).unbind('mousemove');});//注册点击事件，创建测距线实例app.on(THING.EventType.SingleClick,'*',function(e){if(e.button==0){_this.lineNum++;letline=newDrawLine({app:app,modelNum:_this.lineNum,currPosition:e.pickedPosition})app.pauseEvent(THING.EventType.SingleClick,'*','创建测距线');}},"创建测距线");}}2.ThingJS使用Constructor()作为对象构造函数构造一个“对象类型”，即创建同类型对象框架Constructor()构造函数为对象的属性赋初值，以及构造参数选项在JS中可以任意扩展，实现动态绑定。绘制测量线的构造参数创建如下：this.pointsArr=[this.opts。当前位置];//鼠标移动时的坐标集合this.coordinatesArr=[this.opts.currPosition];//鼠标点击后坐标集合的存储this.ePosition=null;//触发事件后鼠标位置的存储this.lineCoor=[this.opts.currPosition];//存储当前两个坐标点this.disArr=[];//存储所有坐标点与坐标点之间的距离this.numIndex=0;//自增变量this.reSetDistance;//存储两点之间的距离this.lastStatus=false;//判断绘制结束值是否为false，如果没有结束则为true结束this.pointsObjArr=[];this.rianleyDom=$('#marker');//按照鼠标的提示操作this.pointCardDom=$('#pointMarker');//鼠标移动到节点的提示this.init();//初始化this.appClick();//调用方法}3、单击鼠标左键添加点，双击或单击鼠标右键完成。如果是多线段测量，移动鼠标可以继续绘制。appClick(){var_this=this;//点击左键添加节点右键结束束缚绘制_this.opts.app.on('SingleClick',function(e){if(e.button==0){if(!e.picked)return;_this.numIndex++;_this.ePosition=e.pickedPosition;_this.createPoint(_this.ePosition);_this.coordinatesArr.push(_this.ePosition);_this.lineCoor.push(_this.ePosition);_this.createLine(_this.coordinatesArr);_this.getDistance();_this.template=``;if(_this.lineDistanceAll!=null){_this.template+=_this.lineDistanceAll+`米`;}else{_this.template+=``+_this.lineId+`起始点`}_this.template+=`
`;_this.boardId='line'+_this.opts.modelNum+_this.numIndex;_this.createCard(_this.regionPoint);_this.pointsObj={id:'linePoints'+_this.opts.modelNum+_this.numIndex,parent:'line'+_this.opts.modelNum+_this.numIndex,coor:_this.ePosition,distance:_this.lineDistance}_this.pointsObjArr.push(_this.pointsObj);_this.cardClick();}else{if(_this.coordinatesArr.length<2){_this.destroyAll();_this.rianleyDom.css('显示','无');返回;};_this.end();}_this.rianleyDom.css('显示','无');},'点击');//鼠标移动持续绘制测量线段_this.opts.app.on('MouseMove',function(e){if(e.picked){_this.ePosition=e.pickedPosition;_this.pointsArr=[..._this.coordinatesArr,_this.ePosition];_this.createLine(_this.pointsArr);_this.line.style.color='#f88020';如果(_this.pointsArr.length>=2){_this.moveDistance=THING.Math.getDistance(_this.pointsArr[_this.pointsArr.length-1],_this.pointsArr[_this.pointsArr.length-2]);让countNum=0;_this.disArr.forEach(v=>{countNum+=parseFloat(v);});countNum=1*parseFloat(countNum).toFixed(2)+1*parseFloat(_this.moveDistance).toFixed(2);_this.rianleyDom.css('显示','块');_this.rianleyDom.find('span.value').text(countNum.toFixed(2));_this.rianleyDom。css('左',e.clientX+10+'px');_this.rianleyDom.css('top',e.clientY+'px');}}}，'移动'）;//结束绘制当前测量线段_this.opts.app.on('DBLClick',function(ev){if(_this.coordinatesArr.length<2){_this.destroyAll();_this.rianleyDom.css('display','无');返回;};_this.end();},'双击');}/***创建节点*@param{Array}ePosition-坐标点*/createPoint(ePosition){var_this=this;_这。regionPoint=_this.opts.app.create({type:'Sphere',id:'linePoints'+_this.opts.modelNum+_this.numIndex,name:'linePoints'+_this.opts.modelNum,radius:0.2,//radiuswidthSegments:16,heightSegments:16,position:ePosition,//球面坐标style:{color:'#c10000',粗糙度:50,不透明度:0.8}});}4。创建节点、线段、节点顶卡等基本元素，确定起点和每个节点的坐标。该线段属于所有鼠标点击后的坐标点集合，即测得的总距离。createPoint(ePosition){var_this=this;_this.regionPoint=_this.opts.app.create({type:'Sphere',id:'linePoints'+_this.opts.modelNum+_this.numIndex,name:'linePoints'+_this.opts.modelNum,radius:0.2,//radiuswidthSegments:16,heightSegments:16,position:ePosition,//球面坐标style:{color:'#c10000',roughness:50,opacity:0.8}});}/***创建线段*@param{Array}coordinates-所有鼠标点击后的坐标点集合*/createLine(coordinates){letid=this.opts.modelNum>=10?this.opts.modelNum:'0'+this.opts.modelNum;if(this.line){this.line.destroy();}this.lineId='Line'+id;this.line=this.opts.app.create({type:'PolygonLine',name:'line',id:'Line'+id,width:0.05,points:coordinates,style:{color:'#f45905',粗糙度:5,不透明度:0.9}});}/***计算两个坐标点之间的距离*/getDistance(){if(this.lineCoor.length<2)return;if(this.coordinatesArr.length>2){this.lineCoor.shift();}这。lineDistance=东西。数学。获取距离e(this.lineCoor[0],this.lineCoor[1]);this.lineDistance=this.lineDistance.toFixed(2);this.disArr.push(this.lineDistance);让countNum=0;这个.disArr。forEach(v=>{countNum+=parseFloat(v);});this.lineDistanceAll=countNum.toFixed(2);}/***创建节点的顶层卡片*@param{Object}parent-顶层卡片的父对象*/createCard(parent){$('#div3d').append(this.template);this.srcElem=document.getElementById(this.boardId);this.imgElem=document.getElementById('linePoints'+this.opts.modelNum+this.numIndex);this.ui=this.opts.app.create({type:'UIAnchor',parent:parent,element:this.srcElem,localPosition:[0.4,0.3,0.4],pivotPixel:[0,0]});}通过以上操作，可以绘制多点线段，计算多点线段之间的距离。上图是多点线段长度的测试结果。快来试试吧！————————————————————数字孪生可视化：https://www.thingjs.com/
