请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 268|回复: 0

[发布] 3D开辟机关器参数丈量多边形面积 ThingJS

[复制链接]
avatar

52

主题

57

帖子

79

积分

注册会员

Rank: 2

积分
79
ico_lz  楼主| 发表于 2021-1-28 13:24:06 | 显示全部楼层 |阅读模式
#前端# #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不是为了丈量自己,而是为了更轻易在线丈量面积,实现快速分析决议,所以更多是治理方式的改变,利用到数字孪生技术处理计划中。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则