可视化场景内任意绘制线段并测量距离

在数字孪生可视化场景中，可能会遇到这个问题，即需要测量数字孪生可视化场景中的不同目标之间的距离。通过这个测量，可以明确的知道可视化场景中各个目标的位置以及各个目标之间的距离，便于做出合理的规划。这个需求并不难，我们需要做的是确定需要测量的对象的坐标点起点和终点位置。

运行效果如下：





在ThingJS中要知道场景中两点间的空间距离可以通过调用三维空间内所有坐标点，计算两个坐标点的距离去量算出两点之间的空间距离，需要通过鼠标点击才能获取到两点之间的空间距离。比如我要知道场景中某两个场景距离有多长，就可以通过鼠标点击两个甚至多个场景位置，来计算三维场景中任意三维点的空间距离。下面一起看一下操作步骤：

1、添加注册事件，注册测量详情界面拖拽事件，设置可拖拽范围不能超出屏幕。

1. registerEvent() {
   
2. var _this = this;
   
3. // 注册测量详情界面关闭按钮点击事件
   
4. $('#dataDetails .tj-close').on('click', function() {
   
5. $('#dataDetails').css('display', 'none');
   
6. });
   
7. 
   
8. // 注册测量详情界面拖拽事件，设置可拖拽范围，不能超出屏幕
   
9. $('#dataDetails .tj-title').on('mousedown', function(ev) {
   
10. ev.preventDefault();
    
11. var domEle = $('#dataDetails .tj-panel');
    
12. var spacX = ev.pageX - domEle[0].offsetLeft;
    
13. var spacY = ev.pageY - domEle[0].offsetTop;
    
14. $(document).bind('mousemove', function(event) {
    
15. var x = event.pageX - spacX;
    
16. var y = event.pageY - spacY;
    
17. if (event.pageX < 0 || event.pageX > $(window).width() || event.pageY < 0 || event.pageY > $(window).height()) {
    
18. $(document).unbind('mousemove');
    
19. }
    
20. if (x <= 0) x = 0;
    
21. if (x > ($(window).width() - domEle.width())) {
    
22. x = $(window).width() - domEle.width();
    
23. }
    
24. if (y <= 0) y = 0;
    
25. if (y > ($(window).height() - domEle.height())) {
    
26. y = $(window).height() - domEle.height();
    
27. }
    
28. domEle.css('left', x + 'px').css('top', y + 'px');
    
29. });
    
30. }).on('mouseup', function() {
    
31. $(document).unbind('mousemove');
    
32. });
    
33. 
    
34. // 注册单击事件，创建测距线段实例
    
35. app.on(THING.EventType.SingleClick, '*', function(e) {
    
36. if (e.button == 0) {
    
37. _this.lineNum++;
    
38. let line = new DrawLine({
    
39. app: app,
    
40. modelNum: _this.lineNum,
    
41. currPosition: e.pickedPosition
    
42. })
    
43. app.pauseEvent(THING.EventType.SingleClick, '*', '创建测距线');
    
44. }
    
45. }, "创建测距线");
    
46. }
    
47. }

复制代码

2、ThingJS使用 Constructor () 作为对象构造器函数，用来构造一种“对象类型”，即创建相同类型的对象框架。Constructor () 构造器为对象的属性赋初始值，JS中可以任意扩展构造参数option，实现动态绑定。绘制测量线的构造参数创建如下：

1. class DrawLine {
   
2. /**
   
3. * 构造器
   
4. * @param {JSON} option - 构造参数
   
5. */
   
6. constructor(option) {
   
7. this.opts = option;
   
8. this.pointsArr = [this.opts.currPosition]; // 鼠标移动中坐标点的集合
   
9. this.coordinatesArr = [this.opts.currPosition]; // 存储鼠标点击后坐标点的集合
   
10. this.ePosition = null; // 存储触发事件后鼠标的位置
    
11. this.lineCoor = [this.opts.currPosition]; // 存储当前两个坐标点
    
12. this.disArr = []; // 存储所有坐标点与坐标点间的距离
    
13. this.numIndex = 0; // 自增变量
    
14. this.reSetDistance; // 存储两点间的距离
    
15. this.lastStatus = false; // 判断是否绘制结束值为false为未结束true为结束
    
16. this.pointsObjArr = [];
    
17. this.rianleyDom = $('#marker'); // 跟随鼠标的提示
    
18. this.pointCardDom = $('#pointMarker'); // 鼠标移动至节点的提示
    
19. this.init(); // 初始化
    
20. this.appClick(); // 调用方法
    
21. }

复制代码

3、单击鼠标左键添加点位，双击或单击鼠标右键结束。如果是多线段测量，移动鼠标可以持续绘制。

1. appClick() {
   
2. var _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="line` + _this.opts.modelNum + _this.numIndex + `" class="card-label card-line` + _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.lineId + `</span> 起点`
    
21. }
    
22. _this.template +=
    
23. `</span>
    
24. <span><img id="linePoints` + _this.opts.modelNum + _this.numIndex + `" src="/guide/examples/images/measure/remove.png"></span>
    
25. </div>`;
    
26. _this.boardId = 'line' + _this.opts.modelNum + _this.numIndex;
    
27. _this.createCard(_this.regionPoint);
    
28. _this.pointsObj = {
    
29. id: 'linePoints' + _this.opts.modelNum + _this.numIndex,
    
30. parent: 'line' + _this.opts.modelNum + _this.numIndex,
    
31. coor: _this.ePosition,
    
32. distance: _this.lineDistance
    
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. }, '点击');
    

复制代码

4、创建节点、线段和节点顶牌这些基本元素，确定起点、各个节点的坐标。其中线段属于所有鼠标点击后的坐标点集合，即测量的总距离。

1. <pre class="public-DraftStyleDefault-pre" data-offset-key="fa8nv-0-0" style="margin-top: 1.4em; margin-bottom: 1.4em; padding: 0.88889em; font-size: 0.9em; word-break: normal; overflow-wrap: normal; overflow: auto; background: rgb(246, 246, 246); border-radius: 4px; color: rgb(18, 18, 18);"><pre class="Editable-styled" data-block="true" data-editor="4ms4d" data-offset-key="fa8nv-0-0" style="font-size: 0.9em; word-break: normal; overflow-wrap: normal; overflow: initial; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-radius: 0px;"><div data-offset-key="fa8nv-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" style="max-width: 100%;"><span data-offset-key="fa8nv-0-0"><span data-text="true">createPoint(ePosition) {
   
2. var _this = this;
   
3. _this.regionPoint = _this.opts.app.create({
   
4. type: 'Sphere',
   
5. id: 'linePoints' + _this.opts.modelNum + _this.numIndex,
   
6. name: 'linePoints' + _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. 
    
19. /**
    
20. * 创建线段
    
21. * @param {Array} coordinates - 所有鼠标点击后的坐标点集合
    
22. */
    
23. createLine(coordinates) {
    
24. let id = this.opts.modelNum >= 10 ? this.opts.modelNum : '0' + this.opts.modelNum;
    
25. if (this.line) {
    
26. this.line.destroy();
    
27. }
    
28. this.lineId = 'Line' + id;
    
29. this.line = this.opts.app.create({
    
30. type: 'PolygonLine',
    
31. name: 'line',
    
32. id: 'Line' + id,
    
33. width: 0.05,
    
34. points: coordinates,
    
35. style: {
    
36. color: '#f45905',
    
37. roughness: 5,
    
38. opacity: 0.9
    
39. }
    
40. });
    
41. }
    
42. 
    
43. /**
    
44. * 计算两个坐标点间的距离
    
45. */
    
46. getDistance() {
    
47. if (this.lineCoor.length < 2) return;
    
48. if (this.coordinatesArr.length > 2) {
    
49. this.lineCoor.shift();
    
50. }
    
51. this.lineDistance = THING.Math.getDistance(this.lineCoor[0], this.lineCoor[1]);
    
52. this.lineDistance = this.lineDistance.toFixed(2);
    
53. this.disArr.push(this.lineDistance);
    
54. let countNum = 0;
    
55. this.disArr.forEach(v => {
    
56. countNum += parseFloat(v);
    
57. });
    
58. this.lineDistanceAll = countNum.toFixed(2);
    
59. }
    
60. 
    
61. /**
    
62. * 创建节点顶牌
    
63. * @param {Object} parent - 顶牌父物体
    
64. */
    
65. createCard(parent) {
    
66. $('#div3d').append(this.template);
    
67. this.srcElem = document.getElementById(this.boardId);
    
68. this.imgElem = document.getElementById('linePoints' + this.opts.modelNum + this.numIndex);
    
69. this.ui = this.opts.app.create({
    
70. type: 'UIAnchor',
    
71. parent: parent,
    
72. element: this.srcElem,
    
73. localPosition: [0.4, 0.3, 0.4],
    
74. pivotPixel: [0, 0]
    
75. });
    
76. }</span></span></div></pre></pre>

复制代码

通过以上的操作，可以实现多点线段绘制并计算出多点线段之间的距离。上图展示了多点线段长度的测试结果。快来试试看吧！