关于javascript:可视化场景内任意绘制多边形并测量面积

个别测量性能次要体现在两方面，一是测量间隔，二是测量面积。面积的测量是依据鼠标绘制的范畴，通过天文坐标系的转换而计算出理论面积大小，间隔的测量是依据鼠标在地图上绘制的点，实时计算出两点之间的理论间隔。如何在 3D 场景中测量面积？上面我就在 ThingJS 平台实现鼠标任意点绘制多边形面积，计算绘制总长度和占地面积，反对在数字孪生可视化场景内任意绘制多边形并测量面积。
先来看一下实现成果：

实现思路
1、首先是增加注册事件，单击鼠标左键增加点位，鼠标挪动继续绘制测量线段，双击或单击鼠标右键完结。

appClick() {
 let _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 =
 `<div id="div` + _this.opts.modelNum + _this.numIndex + `" class="card-label card-label` + _this.opts.modelNum + `">
 <span class="text">`;
 if (_this.lineDistanceAll != null) {_this.template += _this.lineDistanceAll + ` 米 `;} else {_this.template += `<span style="color:#f45905; border-right: 1px solid #ccc;margin-right: 5px">` + _this.planeId + `</span> 终点 `}
 _this.template +=
 `</span>
 <span><img id="points` + _this.opts.modelNum + _this.numIndex + `" src="/guide/examples/images/measure/remove.png"></span> 
 </div>`;
 _this.boardId = 'div' + _this.opts.modelNum + _this.numIndex;
 _this.createCard(_this.regionPoint);
 _this.pointsObj = {
 id: 'points' + _this.opts.modelNum + _this.numIndex, // 终点顶牌 span 标签 id
 parent: 'div' + _this.opts.modelNum + _this.numIndex, // 终点顶牌 div 标签 id
 coor: _this.opts.currPosition, // 终点坐标
 distance: 0
 };
 _this.pointsObjArr.push(_this.pointsObj);
 _this.cardClick();} else {if (_this.coordinatesArr.length < 2) {_this.destroyAll();
 _this.rianleyDom.css('display', 'none');
 return;
 };
 _this.end();}
 _this.rianleyDom.css('display', 'none');
 }, "点击");
 
 // 鼠标挪动继续绘制测量线段
 _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';
 if (_this.pointsArr.length >= 2) {_this.moveDistance = THING.Math.getDistance(_this.pointsArr[_this.pointsArr.length - 1], _this.pointsArr[_this.pointsArr.length - 2]);
 let countNum = 0;
 _this.disArr.forEach(v => {countNum += parseFloat(v);
 });
 countNum = 1 * parseFloat(countNum).toFixed(2) + 1 * parseFloat(_this.moveDistance).toFixed(2);
 _this.rianleyDom.css('display', 'block');
 _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、var _this = 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.8
15、}
16、});
17、}
18、createLine(coordinates) {19、if (this.line) {20、this.line.destroy();
21、}
22、let 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.9
32、}
33、});
34、}

3、面积测量的对象是带有地理位置（coordinates）的多边形因素，须要创立一个 Constructor () 结构器，设置结构参数。

constructor(option) {
 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; // 判断是否绘制完结值为 false 为未完结 true 为完结
 this.pointsObjArr = []; // 存储所有节点的 id 与顶牌 id
 this.rianleyDom = $('#marker'); // 追随鼠标的提醒
 this.pointCardDom = $('#pointMarker'); // 鼠标挪动至节点的提醒
 this.init();
 this.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/