3D场景多线段绘制及测坐标点距离 ThingJS

zoom 7月前 566

#前端# #CAD# #物联网可视化开发#
  1. 创建参数构造器
  2. 绘制测量线生命周期
  3. 坐标点距离计算
简介:CAD图纸上测量线段是常见功能,3D场景中如何测量线段呢?不需要选取、合并等手动操作,3D界面的测量自带量角功能,实现起来更加流畅。

创建参数构造器

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开发技能,快来试试看吧!
最新回复 (0)

你可以在 登录 or 注册 后,对此帖发表评论!

返回