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

registerEvent() {

 var _this = this;

 // 注册测量详情界面关闭按钮点击事件

 $('#dataDetails .tj-close').on('click', function() {

 $('#dataDetails').css('display', 'none');

 });

 

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

 $('#dataDetails .tj-title').on('mousedown', function(ev) {

 ev.preventDefault();

 var domEle = $('#dataDetails .tj-panel');

 var spacX = ev.pageX - domEle[0].offsetLeft;

 var spacY = ev.pageY - domEle[0].offsetTop;

 $(document).bind('mousemove', function(event) {

 var x = event.pageX - spacX;

 var y = event.pageY - spacY;

 if (event.pageX < 0 || event.pageX > $(window).width() || event.pageY < 0 || event.pageY > $(window).height()) {

 $(document).unbind('mousemove');

 }

 if (x <= 0) x = 0;

 if (x > ($(window).width() - domEle.width())) {

 x = $(window).width() - domEle.width();

 }

 if (y <= 0) y = 0;

 if (y > ($(window).height() - domEle.height())) {

 y = $(window).height() - domEle.height();

 }

 domEle.css('left', x + 'px').css('top', y + 'px');

 });

 }).on('mouseup', function() {

 $(document).unbind('mousemove');

 });

 

 // 注册单击事件，创建测距线段实例

 app.on(THING.EventType.SingleClick, '*', function(e) {

 if (e.button == 0) {

 _this.lineNum++;

 let line = new DrawLine({

 app: app,

 modelNum: _this.lineNum,

 currPosition: e.pickedPosition

 })

 app.pauseEvent(THING.EventType.SingleClick, '*', '创建测距线');

 }

 }, "创建测距线");

 }

}

class DrawLine {

 /**

 * 构造器

 * @param {JSON} option - 构造参数

 */

 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; // 存储两点间的距离

 this.lastStatus = false; // 判断是否绘制结束值为false为未结束true为结束

 this.pointsObjArr = [];

 this.rianleyDom = $('#marker'); // 跟随鼠标的提示

 this.pointCardDom = $('#pointMarker'); // 鼠标移动至节点的提示

 this.init(); // 初始化

 this.appClick(); // 调用方法

 }

appClick() {

 var _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="line` + _this.opts.modelNum + _this.numIndex + `" class="card-label card-line` + _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.lineId + `</span> 起点`

 }

 _this.template +=

 `</span>

 <span><img id="linePoints` + _this.opts.modelNum + _this.numIndex + `" src="/guide/examples/images/measure/remove.png"></span> 

 </div>`;

 _this.boardId = 'line' + _this.opts.modelNum + _this.numIndex;

 _this.createCard(_this.regionPoint);

 _this.pointsObj = {

 id: 'linePoints' + _this.opts.modelNum + _this.numIndex,

 parent: 'line' + _this.opts.modelNum + _this.numIndex,

 coor: _this.ePosition,

 distance: _this.lineDistance

 }

 _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;

 };

 _this.end();

 }, '双击');

 }

 

 /**

 * 创建节点

 * @param {Array} ePosition - 坐标点

 */

 createPoint(ePosition) {

 var _this = this;

 _this.regionPoint = _this.opts.app.create({

 type: 'Sphere',

 id: 'linePoints' + _this.opts.modelNum + _this.numIndex,

 name: 'linePoints' + _this.opts.modelNum,

 radius: 0.2, // 半径

 widthSegments: 16,

 heightSegments: 16,

 position: ePosition, // 球体坐标

 style: {

 color: '#c10000',

 roughness: 50,

 opacity: 0.8

 }

 });

 }

createPoint(ePosition) {

 var _this = this;

 _this.regionPoint = _this.opts.app.create({

 type: 'Sphere',

 id: 'linePoints' + _this.opts.modelNum + _this.numIndex,

 name: 'linePoints' + _this.opts.modelNum,

 radius: 0.2, // 半径

 widthSegments: 16,

 heightSegments: 16,

 position: ePosition, // 球体坐标

 style: {

 color: '#c10000',

 roughness: 50,

 opacity: 0.8

 }

 });

 }

 

 /**

 * 创建线段

 * @param {Array} coordinates - 所有鼠标点击后的坐标点集合

 */

 createLine(coordinates) {

 let id = this.opts.modelNum >= 10 ? this.opts.modelNum : '0' + this.opts.modelNum;

 if (this.line) {

 this.line.destroy();

 }

 this.lineId = 'Line' + id;

 this.line = this.opts.app.create({

 type: 'PolygonLine',

 name: 'line',

 id: 'Line' + id,

 width: 0.05,

 points: coordinates,

 style: {

 color: '#f45905',

 roughness: 5,

 opacity: 0.9

 }

 });

 }

 

 /**

 * 计算两个坐标点间的距离

 */

 getDistance() {

 if (this.lineCoor.length < 2) return;

 if (this.coordinatesArr.length > 2) {

 this.lineCoor.shift();

 }

 this.lineDistance = THING.Math.getDistance(this.lineCoor[0], this.lineCoor[1]);

 this.lineDistance = this.lineDistance.toFixed(2);

 this.disArr.push(this.lineDistance);

 let countNum = 0;

 this.disArr.forEach(v => {

 countNum += parseFloat(v);

 });

 this.lineDistanceAll = countNum.toFixed(2);

 }

 

 /**

 * 创建节点顶牌

 * @param {Object} parent - 顶牌父物体

 */

 createCard(parent) {

 $('#div3d').append(this.template);

 this.srcElem = document.getElementById(this.boardId);

 this.imgElem = document.getElementById('linePoints' + this.opts.modelNum + this.numIndex);

 this.ui = this.opts.app.create({

 type: 'UIAnchor',

 parent: parent,

 element: this.srcElem,

 localPosition: [0.4, 0.3, 0.4],

 pivotPixel: [0, 0]

 });

 }