ThingJS学习

ThingJs学习

---

开启层级切换

app.on("load",function(ev){
    var campus = ev.campus; // 获取园区对象
    app.level.change(campus); // 开启层级切换
})

监听层级切换事件

//第二个参数可以输入.Building/.Floor/.Thing，来监听是建筑、楼层、物体的层级切换，不输入默认监听所有层级
// 监听进入楼层事件
app.on(THING.EventType.EnterLevel, '', function (ev) {
    if (ev.current.name == '1楼') {
        //进入一楼显示两个设备数据
    	//todo
		//...
    }else{
    	//todo
		//...
    }
}, '进入楼层显示面板')

获取当前选中物体

app.on(THING.EventType.EnterLevel, '.Thing', function (ev) {
	var object = ev.object;
}, 'customEnterThingOperations')

返回层级

app.level.back();

停止进入物体层级默认行为

// 停止进入物体层级的默认行为
app.pauseEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);

添加摄像头panel

// 视频url地址，但是url必须是https协议的，
// 其本质是将https协议的一个摄像头html网页引入一个iframe的panel面板中。
var panel2 = null;
// 将视频嵌入到3D场景中
if (panel2) {
    panel2.destroy();
    panel2 = null;
} else {
    // 将视频页面作2D界面元素 通过快捷界面库 panel 的iframe组件进行添加
    panel2 = new THING.widget.Panel({
        titleText: "视频监控",
        dragable: true,
        hasTitle: true,
        width: "400px",
        closeIcon: true
    });
    var iframe = panel2.addIframe({ url: 'https://jiafei.imdo.co/test2/play.html?serial=34020000001320001293&code=34020000001320000001' }, 'url').caption("").setHeight('400px');
    panel2.position = [50, 50];
    // 关闭 panel 时，移除嵌入视频的 iframe 页面
    panel2.on("close", function() {
        // panel.remove(iframe);
        panel2.destroy();
        panel2 = null;
    });
}

创建面板顶标

/**
 * 创建 UIAnchor
 * 需要传入一个obj对象，就是顶标所属于的对象
 */
class CreateUIAnchor {
    constructor(obj) {
        this.ui = null;
        this.init(obj);
    }

    /**
     * 初始化面板
     */
    init(obj) {
        var _this = this;
        var template =
            `<div class="sign" id="`+obj.id+`" style="font-size: 12px;width: 380px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 3px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display:none">
                <div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
                    <span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://www.thingjs.com/static/images/example/hydrant.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>
                    <span class="span-l font" style="float: left;margin: 0px 0px 0px 3px;">设备信息</span>
                    <span class="span-r point" style="float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;"></span>
                </div>
                <div class="point-top" style="position: absolute;top: -7px;right: -7px;background-color: #3F6781;width: 10px;height: 10px;border: 3px solid #eee;border-radius: 50%;"></div>
            </div>`
        $('#div3d').append($(template));

        this.test_create_ui(obj);
    }

    /**
     * 创建UIAnchor
     */
    test_create_ui(obj) {
        var _this = this;
        _this.ui = app.create({
            type: 'UIAnchor',
            parent: obj,
            element: _this.create_element(obj),
            localPosition: [0, 2, 0],
            pivot: [0.5, 1] //  [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
        });
    }

    /**
     * 创建dom元素
     */
    create_element(obj) {
        var srcElem = document.getElementById(obj.id);
        var newElem = srcElem.cloneNode(true);
        newElem.style.display = "block";
        app.domElement.insertBefore(newElem, srcElem);
        return newElem;
    }
}

创建管线

 var pos = [[10.298, 3, -6.635], [-8.702, 3, -6.635], [-8.702, 3, 3.365], [-5.702, 3, 3.365], [-5.702, 3, 1.365]];
 // 创建管线
 line1 = app.create({
     type: 'PolygonLine',
     points: pos,
     width: 0.15,
     style: {
         image: 'https://www.thingjs.com/static/images/poly_line_01.png', // 管线中的纹理资源
     }
 });
 line1.scrollUV = true;
 app.query('.PolygonLine').style.alwaysOnTop = true;
 line1.play(
     {
         time: 8000
     }
 )

管线切换图标

var pos = [[10.298, 3, -6.635], [-8.702, 3, -6.635], [-8.702, 3, 3.365], [-5.702, 3, 3.365], [-5.702, 3, 1.365]];
// 创建管线
line1 = app.create({
    type: 'PolygonLine',
    points: pos,
    width: 0.1,
    style: {
        image: 'https://www.thingjs.com/static/images/line01.png', // 管线中的纹理资源
    }
});
line1.scrollUV = true;
app.query('.PolygonLine').style.alwaysOnTop = true;
line1.play(
    {
        time: 8000
    }
)

鼠标操作

app.on(THING.EventType.MouseEnter,'.Deploy',(ev)=>{
	//触发事件后执行的操作
	ev.object.hoverState();
},'mouseEnterDeploy');

app.on(THING.EventType.MouseLeave,'.Deploy',(ev)=>{
	//触发事件后执行的操作
	ev.object.hoverState();
},'mouseLeaveDeploy');

app.on(THING.EventType.Click,'.Deploy',(ev)=>{
	//触发事件后执行的操作
	ev.object.hoverState();
});

获取物体

/**
 * 获取当前楼层中的门
 */
function getDoor() {
    var floor = app.level.current; // 当前楼层
    var doors = floor.doors; // 楼层中的门
    doors.forEach(function (item) {
        // 创建标注
        createUIAnchor('ui', item);
    })
}

/**
 * 生成一个新面板
 */
function createUIAnchor(type, obj, value) {
    if (type == 'ui') {
        // 创建UIAnchor
        var ui = app.create({
            type: 'UIAnchor',
            parent: obj,
            element: createElement(obj.id), // 此参数填写要添加的Dom元素
            localPosition: [0, 1, 0],
            pivot: [0.5, 1] //[0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
        });
        if (!value) value = obj.name;
        $('#' + obj.id + ' .text').text(value);

    } else if (type == 'text') {
        // 创建文本
        var areaTxt = app.create({
            type: 'TextRegion',
            id: 'areaTxt_' + obj.id,
            parent: obj,
            localPosition: [0, 3.8, 0],
            text: value,
            inheritStyle: false,
            style: {
                fontColor: '#ff0000',
                fontSize: 20, // 文本字号大小
            }
        });
        areaTxt.rotateX(-90); // 旋转文本
    }
}

设置物体透明度等style

/**
 * 获取当前楼层的屋顶
 */
function getFloorRoof() {
    var floor = app.level.current; // 当前楼层
    var roof = floor.roof; // 楼层屋顶
    roof.style.opacity = 0.8; // 设置屋顶透明度
    roof.style.color = '#0000ff'; // 设置屋顶颜色
    roof.visible = true;
}

循环动作

function carmove(){
    car.moveTo({
        // position: [-8.967, 0.02, -2.714], // 移动到世界位置
        offsetPosition: [0, 10, 0], // 相对自身 向后移动到 10m 处
        time: 0.5 * 1000,
        'complete': function () {
            carinit();
        }
        // lerpType:null, // 插值类型 默认为线性插值
    });
}

function carinit(){
    car.moveTo({
        // position: [-8.967, 0.02, -2.714], // 移动到世界位置
        offsetPosition: [0, -10, 0], // 相对自身 向后移动到 10m 处
        time: 0 * 1000,
        'complete': function () {
            carmove();
        }
        // lerpType:null, // 插值类型 默认为线性插值
    });
}