利用电子标注判断物联网设备的位置

回复

人的一生当中有80%的时间是在室内度过的，个人用户、服务机器人、新型物联网设备等大量的定位需求也发生在室内，然而室内场景受到建筑物的遮挡，室内场景中导航定位比较困难。

如果将线下地址信息标注到互联网电子地图、手机电子地图或导航地图中，用户在可视化界面就可以根据顶牌信息判断物体在区域内位置，实现物联网的全景安全管控方式。

3D可视化的前端技术可以实现多种多样的标注，在场景内添加不同的标注样式，例如纯文本标注、图片加文字标注、普通图片标注、定位标注、气泡标注，ThingJS把标注类型都封装成js类库，代码示例如下：

// 添加纯文本标注
new THING.widget.Button('纯文本标注', function () {
removeMark();
if ($('.textMarker').length > 0) {
$('.textMarker').css('display', 'block')
} else {
createElement(null, "textMarker");
}
})
// 更新文本标注内容
new THING.widget.Button('更新文本标注内容', function () {
// 根据获取已创建的文本
if ($('.textMarker').length > 0) {
$('.textMarker .text').html('ThingJS文字标注');
}
})
// 添加图片加文字标注
new THING.widget.Button('图片加文字标注', function () {
removeMark();
if ($('.textAndPictureMarker').length > 0) {
$('.textAndPictureMarker').css('display', 'block')
} else {
createElement(null, "textAndPictureMarker");
}
})
// 添加普通图片标注
new THING.widget.Button('普通图片标注', function () {
removeMark();
// 创建图片标注
if ($('.pictureMarker').length > 0) {
$('.pictureMarker').css('display', 'block')
} else {
createElement(null, "pictureMarker");
}
})
// 添加带角度的图片标注
new THING.widget.Button('带角度的图片标注', function () {
removeMark();
// 创建图片标注
if ($('.pictureMarker').length > 0) {
$('.pictureMarker').css('display', 'block');
} else {
createElement(null, "pictureMarker");
}
$('.pictureMarker').addClass('rotateAnimation');
})
// 添加定位标注
new THING.widget.Button('定位标注', function () {
removeMark();
var box = app.create({
type: 'Box',
position: [85, 2, 60],
style: {
opacity: 0,
}
});
var marker = app.create({
type: "Marker",
name: "pictureMarker",
parent: box,
url: "/guide/examples/images/navigation/navigation.png",
localPosition: [0, 0.5, 0],
size: 1.5,
useSpriteMaterial: false
})
marker.rotateX(90);
})
// 更新定位标注
new THING.widget.Button('更新定位标注', function () {
var box = app.query('.Box')[0];
if (box) {
box.moveTo({
position: [70, 2, 51], // 移动到世界位置
time: 2 * 1000,
orientToPath: true,
lerpType: null, // 插值类型默认为线性插值
});
}
})
// 动态添加图片标注
new THING.widget.Button('动态添加图片标注', function () {
removeMark();
// 鼠标单击事件，动态添加图片标注
app.on('click', function (ev) {
if (ev.picked) {
app.create({
type: 'Marker',
name: "marker",
url: "/guide/examples/images/navigation/pointer.png",
size: 1.1,
position: ev.pickedPosition,
keepSize: true,
pivot: [0.5, 1],
style: {
alwaysOnTop: true
}
});
}
}, '动态添加图片标注');
})
var marker01 = null;
var marker02 = null;
var time = 0;
// 气泡标注
new THING.widget.Button('气泡标注', function () {
removeMark();
// 创建普通图片标注
if (marker01 == null) {
marker01 = app.create({
type: "Marker",
name: "marker01",
url: "/guide/examples/images/navigation/pointer.png",
position: [80, 3, 70],
size: 1.1
})
}

复制代码

了解更多demo请点击注册>>

[分享] 利用电子标注判断物联网设备的位置

利用电子标注判断物联网设备的位置

相关帖子