在可视化场景中任意绘制多边形并测量面积

`;_this.boardId='div'+_this.opts.modelNum+_this.numIndex;_this.createCard(_this.regionPoint);_this.pointsObj={id:'points'+_this.opts.modelNum+_this.numIndex,//起点顶部span标签idparent:'div'+_this.opts.modelNum+_this.numIndex,//起点顶部div标签idcoor:_this.opts.currPosition,//起点坐标distance:0};_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('left',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','none');return;};if(_this.coordinatesArr.length>=3){_this.createPolygon(_this.coordinatesArr);}_this.end();},'双击');}2、创建节点、线段和生成测量的基本元素，通过节点和线段确定每个节点的起点和坐标创建参数组，鼠标点击后统一所有坐标点集，生成测量区域不规则图形1.createPoint(ePosition){2.变种_this=这个;3。_this.regionPoint=app.create({4.type:'Sphere',5.id:'points'+_this.opts.modelNum+_this.numIndex,6,name:'points'+_this.opts.modelNum,7,radius:0.2,//半径8,widthSegments:16,9,heightSegments:16,10,position:ePosition,//球坐标11,style:{12,color:'#c10000',13,roughness:50,14,opacity:0.815,}16,});17,}18,createLine(coordinates){19,if(this.line){20,this.line.destroy();21,}22,让id=this.opts.modelNum>10?this.opts.modelNum:'0'+this.opts.modelNum;23、this.line=app.create({24.type:'PolygonLine',25,name:'line',26,id:'line'+id,27,width:0.03,28,points:coordinates,29,style:{30,image:'/guide/examples/images/measure/redLine.png',31,opacity:0.932,}33,});34,}3、面积测量对象为多边形特征坐标和一个Constructor()构造函数，它设置构造参数。构造函数（选项）{this.opts=option;this.pointsArr=[this.opts.currPosition];//鼠标移动过程中的坐标点集合this.coordinatesArr=[this.opts.currPosition];//鼠标点击后存储坐标点集合this.ePosition=null;//存储事件触发后鼠标的位置this.lineCoor=[this.opts.currPosition];//存储当前两个坐标点this.disArr=[];//存储所有坐标点之间的距离this.numIndex=0;//自增变量this.reSetDistance=0;//两点之间的距离this.lastStatus=false;//判断绘制结束值是否为falsetrue是否结束this.pointsObjArr=[];//存储所有节点的id和最上面的卡片idthis.rianleyDom=$('#marker');//按照鼠标提示this.pointCardDom=$('#pointMarker');//鼠标移动到节点时的提示this.init();这个.appClick();}4。创建一个测量多边形面积的方法后，会在绘图停止时触发选中部分的面积大小，然后我们需要弹出一个顶层卡片，显示测量的面积在测量结束。createTopCard(position){$('#div3d').append(this.template);this.polygonCard=document.getElementById(this.boardId);this.uiTop=app.create({type:'UIAnchor',element:this.polygonCard,position:[position[0],position[1],position[2]]});}在数字孪生可视化场景中测量多边形面积是不是很简单？完整代码戳官网—https://www.thingjs.com/