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

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

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

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

1. // 添加纯文本标注
2. new THING.widget.Button('纯文本标注', function () {
3. removeMark();
4. if ($('.textMarker').length > 0) {
5. $('.textMarker').css('display', 'block')
6. } else {
7. createElement(null, "textMarker");
8. }
9. })
11. // 更新文本标注内容
12. new THING.widget.Button('更新文本标注内容', function () {
13. // 根据获取已创建的文本
14. if ($('.textMarker').length > 0) {
15. $('.textMarker .text').html('ThingJS文字标注');
16. }
17. })
19. // 添加图片加文字标注
20. new THING.widget.Button('图片加文字标注', function () {
21. removeMark();
22. if ($('.textAndPictureMarker').length > 0) {
23. $('.textAndPictureMarker').css('display', 'block')
24. } else {
25. createElement(null, "textAndPictureMarker");
26. }
27. })
29. // 添加普通图片标注
30. new THING.widget.Button('普通图片标注', function () {
31. removeMark();
32. // 创建图片标注
33. if ($('.pictureMarker').length > 0) {
34. $('.pictureMarker').css('display', 'block')
35. } else {
36. createElement(null, "pictureMarker");
37. }
38. })
40. // 添加带角度的图片标注
41. new THING.widget.Button('带角度的图片标注', function () {
42. removeMark();
43. // 创建图片标注
44. if ($('.pictureMarker').length > 0) {
45. $('.pictureMarker').css('display', 'block');
46. } else {
47. createElement(null, "pictureMarker");
48. }
49. $('.pictureMarker').addClass('rotateAnimation');
50. })
52. // 添加定位标注
53. new THING.widget.Button('定位标注', function () {
54. removeMark();
55. var box = app.create({
56. type: 'Box',
57. position: [85, 2, 60],
58. style: {
59. opacity: 0,
60. }
61. });
62. var marker = app.create({
63. type: "Marker",
64. name: "pictureMarker",
65. parent: box,
66. url: "/guide/examples/images/navigation/navigation.png",
67. localPosition: [0, 0.5, 0],
68. size: 1.5,
69. useSpriteMaterial: false
70. })
71. marker.rotateX(90);
72. })
74. // 更新定位标注
75. new THING.widget.Button('更新定位标注', function () {
76. var box = app.query('.Box')[0];
77. if (box) {
78. box.moveTo({
79. position: [70, 2, 51], // 移动到世界位置
80. time: 2 * 1000,
81. orientToPath: true,
82. lerpType: null, // 插值类型 默认为线性插值
83. });
84. }
85. })
87. // 动态添加图片标注
88. new THING.widget.Button('动态添加图片标注', function () {
89. removeMark();
90. // 鼠标单击事件，动态添加图片标注
91. app.on('click', function (ev) {
92. if (ev.picked) {
93. app.create({
94. type: 'Marker',
95. name: "marker",
96. url: "/guide/examples/images/navigation/pointer.png",
97. size: 1.1,
98. position: ev.pickedPosition,
99. keepSize: true,
100. pivot: [0.5, 1],
101. style: {
102. alwaysOnTop: true
103. }
104. });
105. }
106. }, '动态添加图片标注');
107. })
109. var marker01 = null;
110. var marker02 = null;
111. var time = 0;
112. // 气泡标注
113. new THING.widget.Button('气泡标注', function () {
114. removeMark();
115. // 创建普通图片标注
116. if (marker01 == null) {
117. marker01 = app.create({
118. type: "Marker",
119. name: "marker01",
120. url: "/guide/examples/images/navigation/pointer.png",
121. position: [80, 3, 70],
122. size: 1.1
123. })
124. }

复制代码

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