#前端# #CAD# #物联网可视化开发#
1. 创建参数构造器
2. 绘制测量线生命周期
3. 坐标点距离计算
简介：CAD图纸上测量线段是常见功能，3D场景中如何测量线段呢？不需要选取、合并等手动操作，3D界面的测量自带量角功能，实现起来更加流畅。
demo链接：http://www.thingjs.com/guide/?m=sample
创建参数构造器
js是基于对象的编程语言，创建对象的方式多样，常见的有JSON格式创建、构造函数创建。ThingJS使用 Constructor () 作为对象构造器函数，用来构造一种“对象类型”，即创建相同类型的对象框架。在对象中使用this，指的就是新对象， 当一个新对象被创建时，this 的值会成为这个新对象。但是this本身不是变量，而是作为关键词。对象中一切都是属性， Constructor () 构造器为对象的属性赋初始值，JS中可以任意扩展构造参数option，实现动态绑定。例如绘制测量线的构造参数创建如下：
/** * 绘制测量线 */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();
// 调用方法 }
绘制测量线生命周期在BIM系统中，绘制测量线是常见的操作，在线实现自由拖拽，并能够实现可视化数据的动态显示。ThingJS平台轻量化这一测量操作，基于逻辑简单的绘制生命周期，包括创建对象、测量可视化、展示动态信息。
首先创建节点、线段和节点顶牌这些基本元素，确定起点、各个节点的坐标。其中线段属于所有鼠标点击后的坐标点集合，即测量的总距离。
其次添加注册事件，就可以进行实际的测量操作步骤。点击左键添加节点，鼠标右键结束绘制。如果是多线段测量，移动鼠标可以持续绘制。点击左键创建一个节点，点击删除图标消除此节点。
坐标点距离计算
网页开发如何做到坐标点的距离计算？JS逻辑参考ThingJS官方示例，坐标点的距离计算使用函数getdistance来调用构造器参数，不仅可以测量单个线段和多线段，连续测量的方法也能轻松实现。
/** * 计算两个坐标点间的距离 */
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); }
若要公开测量详情信息，一般在2D面板实时展现，鼠标测量的同时，决策分析需求也能通过面板信息满足。结尾3D模型的线测量沿用了2D图纸的测量方式，不光直线测量，还可以加入弧线测量方式哦！
快速测量连续线段是必备的物联网3D开发技能，快来试试看吧！
关于ThingJS
ThingJS平台提供物联网3D可视化组件，让3D开发更轻松！直接Javascript调用3D脚本，基于200个3D开发源码示例，让你全面了解物联网可视化开发逻辑。场景搭建-3D脚本开发-数据对接-项目部署的一站式服务让开发更高效，同20万个开发者一起成为数字孪生技术创新者！
1. 创建参数构造器
2. 绘制测量线生命周期
3. 坐标点距离计算
简介：CAD图纸上测量线段是常见功能，3D场景中如何测量线段呢？不需要选取、合并等手动操作，3D界面的测量自带量角功能，实现起来更加流畅。
demo链接：http://www.thingjs.com/guide/?m=sample
创建参数构造器
js是基于对象的编程语言，创建对象的方式多样，常见的有JSON格式创建、构造函数创建。ThingJS使用 Constructor () 作为对象构造器函数，用来构造一种“对象类型”，即创建相同类型的对象框架。在对象中使用this，指的就是新对象， 当一个新对象被创建时，this 的值会成为这个新对象。但是this本身不是变量，而是作为关键词。对象中一切都是属性， Constructor () 构造器为对象的属性赋初始值，JS中可以任意扩展构造参数option，实现动态绑定。例如绘制测量线的构造参数创建如下：
/** * 绘制测量线 */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();
// 调用方法 }
绘制测量线生命周期在BIM系统中，绘制测量线是常见的操作，在线实现自由拖拽，并能够实现可视化数据的动态显示。ThingJS平台轻量化这一测量操作，基于逻辑简单的绘制生命周期，包括创建对象、测量可视化、展示动态信息。
首先创建节点、线段和节点顶牌这些基本元素，确定起点、各个节点的坐标。其中线段属于所有鼠标点击后的坐标点集合，即测量的总距离。
其次添加注册事件，就可以进行实际的测量操作步骤。点击左键添加节点，鼠标右键结束绘制。如果是多线段测量，移动鼠标可以持续绘制。点击左键创建一个节点，点击删除图标消除此节点。
坐标点距离计算
网页开发如何做到坐标点的距离计算？JS逻辑参考ThingJS官方示例，坐标点的距离计算使用函数getdistance来调用构造器参数，不仅可以测量单个线段和多线段，连续测量的方法也能轻松实现。
/** * 计算两个坐标点间的距离 */
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); }
若要公开测量详情信息，一般在2D面板实时展现，鼠标测量的同时，决策分析需求也能通过面板信息满足。结尾3D模型的线测量沿用了2D图纸的测量方式，不光直线测量，还可以加入弧线测量方式哦！
快速测量连续线段是必备的物联网3D开发技能，快来试试看吧！
关于ThingJS
ThingJS平台提供物联网3D可视化组件，让3D开发更轻松！直接Javascript调用3D脚本，基于200个3D开发源码示例，让你全面了解物联网可视化开发逻辑。场景搭建-3D脚本开发-数据对接-项目部署的一站式服务让开发更高效，同20万个开发者一起成为数字孪生技术创新者！
