请选择 进入手机版 | 继续访问电脑版
分享
查看: 1392|回复: 0

[发布] 3D开发构造器参数测量多边形面积 ThingJS

[复制链接]

3D开发构造器参数测量多边形面积 ThingJS

发表于 2021-1-28 13:24:06 来自 发布 阅读模式 倒序浏览
zzv_icon1392 zzr_icon0 查看全部
#前端# #CAD# #物联网可视化开发#
  1. 1. 用于测量的构造器
  2. 2. 线与面的混合绘制
  3. 3. HTML元素
简介:如何在3D场景中测量面积?ThingJS平台实现多点测量开发,支持鼠标任意点绘制多边形面积,使用自带量角功能,计算绘制总长度和占地面积,结合3D场景更好理解。

用于测量的构造器

面积测量的对象是带有地理位置(coordinates)的多边形要素,与线段测量的开发方式类似,需要创建一个对象类型的构造器,可以添加属性字段以存储信息。
ThingJS平台创建 Constructor () 构造器为对象的属性赋初始值,JS中可以任意扩展构造参数option,实现动态绑定。

线与面的混合绘制

在图像中,四个点能够形成不规则的四边形或者矩形,ThingJS示例利用由点及面的原理,通过节点和线段来创建参数组,统一所有鼠标点击后的坐标点集合,生成不规则的测量面积。再通过修改多边区域的样式参数(如颜色、透明度),来提升测量面积可见度。

3D开发构造器参数测量多边形面积 ThingJS

 /**
     * 生成测量面
     * @param {Array} coordinates - 所有鼠标点击后的坐标点集合
     */
    createPolygon(coordinates) {
        var _this = this;
        if (_this.regionPolygon) {
            _this.regionPolygon.destroy();
            _this.polygonCard.remove();
            _this.opts.app.query('dashLine' + _this.opts.modelNum).destroy();
        }
        let coordinatesSort = [...coordinates];
        coordinatesSort.sort(function (a, b) {
            return a[1] - b[1];
        });
        let points01 = JSON.parse(JSON.stringify(coordinates));
        points01.forEach((v, k) => {
            v[1] = coordinatesSort[0][1];
        })
        let id = _this.opts.modelNum > 10 ? _this.opts.modelNum : '0' + _this.opts.modelNum;
        _this.regionPolygon = app.create({
            type: 'Shape',
            id: 'Area' + id,
            points: points01,  // 传入世界坐标系下点坐标
            height: 0.1,
            style: {
                color: '#F99D0B',  // 区域颜色
                opacity: 0.8  // 不透明度 (默认是 0.5 半透明)
            },
        })
测量的注册事件主要是以鼠标操作为主,点击左键添加节点,右键或双击结束绘制,鼠标移动持续绘制测量线段,单击删除节点,整体代码和测量线段的开发逻辑一致。

3D开发构造器参数测量多边形面积 ThingJS

添加HTML元素

屏幕上的2D面板一般用来动态展示测量详情,属于HTML表格,增加tbody标签以存储当前测量信息,形成一个HTML表格,让3D场景和数据分析结合起来。
3D场景开发并不高深,只要结合ThingJS的物联网接口能力,甚至使用HTML/CSS等网页开发元素,一样能够快速完成3D可视化开发。
/**
     * 为测量面板增加tbody标签存储当前测量信息
     */
    createPanel() {
        if ($('.empty')) {
            $('.empty').remove();
        }
        let tbody = `<tbody id="tb-polygon` + this.opts.modelNum + `" class="tj-group"></tbody>`
        $('.tj-table').prepend(tbody);
        this.table = $('#tb-polygon' + this.opts.modelNum);
    }
CAD测量面积需要很多按键操作,属于工具类软件,ThingJS不是为了测量本身,而是为了更容易在线测量面积,实现快速分析决策,所以更多是管理方式的转变,应用到数字孪生技术解决方案中。
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t