物聯網開發商通常要集成很多監控設備，再利用傳感器傳輸數據，如今2D可視化逐漸升級為3D，需要開發人員要再學習一門新手藝，為此，ThingJS的簡約而不簡單的代碼開發能力就在這里。
ThingJS如何去展示房屋？這個太簡單了，首先我們要知道，ThingJS 是物聯網可視化PaaS開發平台，能幫助物聯網開發商輕松集成 3D 可視化界面。ThingJS 名稱源於 物聯網Internet of Things (IoT)中的 Thing (物)，ThingJS 使用當今最熱門的 JavaScript 語言進行開發。不僅可以針對單棟或多棟建築組成的園區場景進行可視化開發，搭載豐富插件后，也可以針對地圖級別場景進行開發。廣泛應用於數據中心、倉儲、學校、醫院、安防、預案等多種領域。
也就是說，ThingJS主要是幫助物聯網開發商來去開發項目的，是一個平台，而不是說thingjs去開發項目，是使用thingjs平台去開發物聯網可視化項目，而thingjs在線開發中的160個官方示例可不是就干擺在那的，這些示例都是用戶在開發中可能遇到的各種需求，然后被thingjs給拆卸出來，形成了一個個官方示例，所以thingjs的官方人員會說，看完這個160個官方示例，就能迅速的開發物聯網可視化項目了。
這次為大家分享的是thingjs樓層地板展示的Demo，源碼位於thingjs網站的在線開發示例中，該Demo處於【建築結構-地板屋頂】，有興趣的可以進入thingjs中查看該示例：https://www.thingjs.com/s/c8eb6656283e1e8aa19b1f0c?params=105b0f77fd24654d4eebc434e9
官方示例：
/**
* 說明：展示樓層與房間 地板與屋頂的區別
* 只有在 CampusBuilder 中編輯了UserID、Name 或自定義屬性的房間，
* 才能在 ThingJS 中創建為 Room 對象，否則將合並到樓層
* 因此，樓層下的地板與天花板即為這些被合並的房間的
*
* 操作：點擊復選框
*/
var app = new THING.App({
// 場景地址
"url": "https://www.thingjs.com/./uploads/wechat/emhhbmd4aWFuZw==/scene/建築測試03"
});
var panel;
// 創建數據對象
var dataObj = {
checkbox: {
'樓層地板': false,
'房間地板': false,
'樓層屋頂': false,
'房間屋頂': false
}
};
app.on('load', function (ev) {
var campus = ev.campus;
var floor = app.query('.Floor')[0];
app.level.change(floor);
createCheckBox();
})
app.on(THING.EventType.EnterLevel, '.Floor', function (ev) {
panel.visible = true;
}, '進入樓層顯示面板')
app.on(THING.EventType.LeaveLevel, '.Floor', function (ev) {
panel.visible = false;
var checkboxState = dataObj.checkbox;
checkboxState['樓層地板'] = false;
checkboxState['房間地板'] = false;
checkboxState['樓層屋頂'] = false;
checkboxState['房間屋頂'] = false;
}, '退出樓層隱藏面板')
function createCheckBox() {
// 界面組件
panel = new THING.widget.Panel({
titleText: '地板 屋頂',
hasTitle: true, // 是否有標題
});
panel.visible = false;
// 界面綁定對象
var checkbox = panel.addCheckbox(dataObj, 'checkbox');
checkbox[0].on('change', function (ev) {
if (app.level.current instanceof THING.Floor) {
var curFloor = app.level.current;
var plan = curFloor.plan;
if (ev) {
plan.style.color = '#ff0000';
}
else {
plan.style.color = null;
}
}
});
checkbox[1].on('change', function (ev) {
if (app.level.current instanceof THING.Floor) {
var curFloor = app.level.current;
var rooms = curFloor.rooms;
rooms.forEach(function (room) {
var plan = room.plan;
if (ev) {
plan.style.color = '#ffff00';
}
else {
plan.style.color = null;
}
})
}
});
checkbox[2].on('change', function (ev) {
if (app.level.current instanceof THING.Floor) {
var curFloor = app.level.current;
var roof = curFloor.roof;
roof.visible = ev;
if (ev) {
roof.style.color = '#0000ff';
roof.style.opacity = 0.6;
}
else {
roof.style.color = null;
}
}
})
checkbox[3].on('change', function (ev) {
if (app.level.current instanceof THING.Floor) {
var curFloor = app.level.current;
var rooms = curFloor.rooms;
rooms.forEach(function (room) {
var roof = room.roof;
roof.visible = ev;
if (ev) {
roof.style.color = '#0000ff';
roof.style.opacity = 0.3;
}
else {
roof.style.color = null;
}
})
}
})
}
示例結束。
通過官方教程和前端代碼的示例，一一對照，在場景下實現某種事件動畫，展示房屋就是這么簡單！