thing.js 为物体绑定面板,重置时避免清楚所有面板

472 阅读1分钟

为场景中的物体绑定信息面板,点击时展示,重置时避免清除所有面板

//加载场景
var app = new THING.App({
    // 场景地址
    "url": "/api/scene/url",
    //背景设置
    "skyBox": "BlueSky"
});

app.on('load', function (ev) {
    let things = app.query('.Thing');
    things.forEach((obj) => {
        obj.on('click', ()=>{
            reset();
            new CreatePanel(obj);
        })
    })
})

/**
* 创建Panel面板
*/
class CreatePanel {
    constructor(o) {
        this.init(o);
    }
    /**
     * 初始化面板
     */
    init(o) {
        var obj = o;
        // 创建widget (绑定数据用)
        var panel = new THING.widget.Panel({
            // 设置面板宽度
            width: '150px',
            // cornerType 角标样式
            // 没有角标 none ,没有线的角标 noline ,折线角标 polyline
            cornerType: 'polyline'
        })
        
        // 添加一个class,以作区分,官方文档会清除所有面板
        panel.diydomElement.classList.add('myPanel');

        // 绑定物体身上相应的属性数据
        panel.addString(obj, 'name').caption('名称');
        panel.addString(obj, 'id').caption('ID');

        if (uiAnchor) {
            console.log(uiAnchor)
        }
        // 创建UIAnchor面板
        var uiAnchor = app.create({
            // 类型
            type: 'UIAnchor',
            // 父节点设置
            parent: obj,
            // 要绑定的页面的 element 对象
            element: panel.domElement,
            // 设置 localPosition 为 [0, 0, 0]
            localPosition: [0, 0, 0],
            // 相对于Element左上角的偏移像素值
            pivotPixel: [-16, 109] // 当前用值是角标的中心点
        });
    }
}

function reset(){
    $(".myPanel").remove();  // 移除面板
}

image.png