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

一般测量功能主要表现在两方面，一是测量距离，二是测量面积。面积的测量是根据鼠标绘制的范围，通过地理坐标系的转换而计算出实际面积大小，距离的测量是根据鼠标在地图上绘制的点，实时计算出两点之间的实际距离。如何在3D场景中测量面积？下面我就在ThingJS平台实现鼠标任意点绘制多边形面积，计算绘制总长度和占地面积，支持在数字孪生可视化场景内任意绘制多边形并测量面积。

先来看一下实现效果：





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

1. appClick() {
   
2. let _this = this;
   
3. // 点击左键添加节点右键结束绘制
   
4. _this.opts.app.on('SingleClick', function(e) {
   
5. if (e.button == 0) {
   
6. if (!e.picked) return;
   
7. _this.numIndex++;
   
8. _this.ePosition = e.pickedPosition;
   
9. _this.createPoint(_this.ePosition);
   
10. _this.coordinatesArr.push(_this.ePosition);
    
11. _this.lineCoor.push(_this.ePosition);
    
12.   _this.createLine(_this.coordinatesArr);
    
13. _this.getDistance();
    
14. _this.template =
    
15. `<div id="div` + _this.opts.modelNum + _this.numIndex + `" class="card-label card-label` + _this.opts.modelNum + `">
    
16. <span class="text">`;
    
17. if (_this.lineDistanceAll != null) {
    
18. _this.template += _this.lineDistanceAll + `米`;
    
19. } else {
    
20. _this.template += `<span style="color:#f45905; border-right: 1px solid #ccc;margin-right: 5px">` + _this.planeId + `</span> 起点`
    
21. }
    
22. _this.template +=
    
23. `</span>
    
24. <span><img id="points` + _this.opts.modelNum + _this.numIndex + `" src="/guide/examples/images/measure/remove.png"></span>
    
25. </div>`;
    
26. _this.boardId = 'div' + _this.opts.modelNum + _this.numIndex;
    
27. _this.createCard(_this.regionPoint);
    
28. _this.pointsObj = {
    
29. id: 'points' + _this.opts.modelNum + _this.numIndex, // 起点顶牌span标签id
    
30. parent: 'div' + _this.opts.modelNum + _this.numIndex, // 起点顶牌div标签id
    
31. coor: _this.opts.currPosition, // 起点坐标
    
32. distance: 0
    
33. };
    
34. _this.pointsObjArr.push(_this.pointsObj);
    
35. _this.cardClick();
    
36. } else {
    
37. if (_this.coordinatesArr.length < 2) {
    
38. _this.destroyAll();
    
39. _this.rianleyDom.css('display', 'none');
    
40. return;
    
41. };
    
42. _this.end();
    
43. }
    
44. _this.rianleyDom.css('display', 'none');
    
45. }, "点击");
    
46. 
    
47. // 鼠标移动持续绘制测量线段
    
48. _this.opts.app.on('MouseMove', function(e) {
    
49. if (e.picked) {
    
50. _this.ePosition = e.pickedPosition;
    
51. _this.pointsArr = [..._this.coordinatesArr, _this.ePosition];
    
52. _this.createLine(_this.pointsArr);
    
53. _this.line.style.color = '#f88020';
    
54. if (_this.pointsArr.length >= 2) {
    
55. _this.moveDistance = THING.Math.getDistance(_this.pointsArr[_this.pointsArr.length - 1], _this.pointsArr[_this.pointsArr.length - 2]);
    
56. let countNum = 0;
    
57. _this.disArr.forEach(v => {
    
58. countNum += parseFloat(v);
    
59. });
    
60. countNum = 1 * parseFloat(countNum).toFixed(2) + 1 * parseFloat(_this.moveDistance).toFixed(2);
    
61. _this.rianleyDom.css('display', 'block');
    
62. _this.rianleyDom.find('span.value').text(countNum.toFixed(2));
    
63. _this.rianleyDom.css('left', e.clientX + 10 + 'px');
    
64. _this.rianleyDom.css('top', e.clientY + 'px');
    
65. }
    
66. }
    
67. }, '移动');
    
68. 
    
69. // 结束绘制当前测量线段
    
70. _this.opts.app.on('DBLClick', function(ev) {
    
71. if (_this.coordinatesArr.length < 2) {
    
72. _this.destroyAll();
    
73. _this.rianleyDom.css('display', 'none');
    
74. return;
    
75. };
    
76. if (_this.coordinatesArr.length >= 3) {
    
77. _this.createPolygon(_this.coordinatesArr);
    
78. }
    
79. _this.end();
    
80. }, '双击');
    
81. }

复制代码

2、创建节点、线段和生成测量吗这些基本元素，确定起点、各个节点的坐标。通过节点和线段来创建参数组，统一所有鼠标点击后的坐标点集合，生成不规则图形的测量面积。

1. 1、 createPoint(ePosition) {
   
2. 2、  var _this = this;
   
3. 3、  _this.regionPoint = app.create({
   
4. 4、  type: 'Sphere',
   
5. 5、  id: 'points' + _this.opts.modelNum + _this.numIndex,
   
6. 6、  name: 'points' + _this.opts.modelNum,
   
7. 7、  radius: 0.2, // 半径
   
8. 8、  widthSegments: 16,
   
9. 9、  heightSegments: 16,
   
10. 10、  position: ePosition, // 球体坐标
    
11. 11、  style: {
    
12. 12、  color: '#c10000',
    
13. 13、  roughness: 50,
    
14. 14、  opacity: 0.8
    
15. 15、  }
    
16. 16、  });
    
17. 17、  }
    
18. 18、 createLine(coordinates) {
    
19. 19、  if (this.line) {
    
20. 20、  this.line.destroy();
    
21. 21、  }
    
22. 22、  let id = this.opts.modelNum > 10 ? this.opts.modelNum : '0' + this.opts.modelNum;
    
23. 23、  this.line = app.create({
    
24. 24、  type: 'PolygonLine',
    
25. 25、  name: 'line',
    
26. 26、  id: 'line' + id,
    
27. 27、  width: 0.03,
    
28. 28、  points: coordinates,
    
29. 29、  style: {
    
30. 30、  image: '/guide/examples/images/measure/redLine.png',
    
31. 31、  opacity: 0.9
    
32. 32、  }
    
33. 33、  });
    
34. 34、  }

复制代码

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

1. constructor(option) {
   
2. this.opts = option;
   
3. this.pointsArr = [this.opts.currPosition]; // 鼠标移动中坐标点的集合
   
4. this.coordinatesArr = [this.opts.currPosition]; // 存储鼠标点击后坐标点的集合
   
5. this.ePosition = null; // 存储触发事件后鼠标的位置
   
6. this.lineCoor = [this.opts.currPosition]; // 存储当前两个坐标点
   
7. this.disArr = []; // 存储所有坐标点与坐标点间的距离
   
8. this.numIndex = 0; // 自增变量
   
9. this.reSetDistance = 0; // 两点间的距离
   
10. this.lastStatus = false; // 判断是否绘制结束值为false为未结束true为结束
    
11. this.pointsObjArr = []; // 存储所有节点的id与顶牌id
    
12. this.rianleyDom = $('#marker'); // 跟随鼠标的提示
    
13. this.pointCardDom = $('#pointMarker'); // 鼠标移动至节点的提示
    
14. this.init();
    
15. this.appClick();
    
16. }

复制代码

4、创建完一个测量多边形面积的方法，停止画图的时候就会触发选定部分的面积的大小了，然后我们就需要在测量结束的时候弹出一个顶牌来显示测量的面积。

1. createTopCard(position) {
   
2. $('#div3d').append(this.template);
   
3. this.polygonCard = document.getElementById(this.boardId);
   
4. this.uiTop = app.create({
   
5. type: 'UIAnchor',
   
6. element: this.polygonCard,
   
7. position: [position[0], position[1], position[2]]
   
8. });
   
9. }

复制代码

是不是非常简单就可以实现在数字孪生可视化场景中测量多边形面积？