21世纪物联网可视化备受各行各业的关注，我们都知道，实现可视化应用一般有两种形式，一种是全部委托开发公司，还有一种使用pass平台自己开发。今天我们讲讲第二种。。企业开发可视化应用首先要有技术人员，使用thingjs平台有前端开发经验是必须的，熟悉webgl，熟练掌握js，就可以通过上传或拖拽模型、快捷代码、对接数据进行项目部署等操作完成可视化应用的开发。
至于开发成本，大家一定要认清楚，自己开发能做成什么样就是什么样了，技术上的问题都可以解决，但做得好不好完全要看技术人员的水平了。如果委托开发公司自然又是不一样的效果。大家想清楚就好。
/**
* 说明：创建界面元素，作为UIAnchor连接到物体上，使其能跟随物体
* 操作：点击按钮 创建、删除 UIAnchor
* 教程：ThingJS教程——>界面——>2D html界面
* 难度：★★☆☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});
// 创建按钮
function createUI() {
new THING.widget.Button('物体界面', test_create_ui);
new THING.widget.Button('位置界面', test_create_ui_at_point);
new THING.widget.Button('删除界面', test_destroy_ui);
}
createUI();
// 添加html
function create_html() {
var sign =
`<div class="sign" id="board" style="font-size: 12px;width: 120px;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="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
<span class="span-l font1" style="float: left;margin: 0px 10px 0px 10px;">数值</span>
<span class="span-l font2" style="float: left;width: 70px;background-color: #2480E3;">0.14MPa</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($(sign));
}
create_html();
// 生成一个新面板
function create_element() {
var srcElem = document.getElementById('board');
var newElem = srcElem.cloneNode(true);
newElem.style.display = "block";
app.domElement.insertBefore(newElem, srcElem);
return newElem;
}
// 物体顶界面
var ui = null;
function test_create_ui() {
ui = app.create({
type: 'UIAnchor',
parent: app.query('car02')[0],
element: create_element(),
localPosition: [0, 2, 0],
pivot: [0.5, 1] // [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
});
}
// 位置界面
var ui2 = null;
function test_create_ui_at_point() {
ui2 = app.create({
type: 'UIAnchor',
element: create_element(),
position: [0, 1, 0]
});
}
// 删除界面
function test_destroy_ui() {
if (ui) {
ui.destroy();
ui = null;
}
if (ui2) {
ui2.destroy();
ui2 = null;
}
}
