请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 177|回复: 0

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

[复制链接]
avatar

41

主题

41

帖子

292

积分

中级会员

Rank: 3Rank: 3

积分
292
ico_lz  楼主| 发表于 2021-8-13 15:40:51 | 显示全部楼层 |阅读模式
一般丈量功用首要表示在两方面,一是丈量间隔,二是丈量面积。面积的丈量是按照鼠标绘制的范围,经过地理坐标系的转换而计较出现实面积巨细,间隔的丈量是按照鼠标在舆图上绘制的点,实时计较出两点之间的现实间隔。若何在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. _this.opts.app.on('MouseMove', function(e) {
  48. if (e.picked) {
  49. _this.ePosition = e.pickedPosition;
  50. _this.pointsArr = [..._this.coordinatesArr, _this.ePosition];
  51. _this.createLine(_this.pointsArr);
  52. _this.line.style.color = '#f88020';
  53. if (_this.pointsArr.length >= 2) {
  54. _this.moveDistance = THING.Math.getDistance(_this.pointsArr[_this.pointsArr.length - 1], _this.pointsArr[_this.pointsArr.length - 2]);
  55. let countNum = 0;
  56. _this.disArr.forEach(v => {
  57. countNum += parseFloat(v);
  58. });
  59. countNum = 1 * parseFloat(countNum).toFixed(2) + 1 * parseFloat(_this.moveDistance).toFixed(2);
  60. _this.rianleyDom.css('display', 'block');
  61. _this.rianleyDom.find('span.value').text(countNum.toFixed(2));
  62. _this.rianleyDom.css('left', e.clientX + 10 + 'px');
  63. _this.rianleyDom.css('top', e.clientY + 'px');
  64. }
  65. }
  66. }, '移动');

  67. // 竣事绘制当前丈量线段
  68. _this.opts.app.on('DBLClick', function(ev) {
  69. if (_this.coordinatesArr.length < 2) {
  70. _this.destroyAll();
  71. _this.rianleyDom.css('display', 'none');
  72. return;
  73. };
  74. if (_this.coordinatesArr.length >= 3) {
  75. _this.createPolygon(_this.coordinatesArr);
  76. }
  77. _this.end();
  78. }, '双击');
  79. }
复制代码

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



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. }
复制代码


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



能否是很是简单便可以实现在数字孪生可视化场景中丈量多边形面积?

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则