Panel的显示问题

图1：

图2：

如图1：创建了一个消防栓的THING。图2：是thingjs提供的物体顶牌（panel）例子。想让图一点击消防栓可以如图2一样显示信息。但图1的消防栓是用代码创建的，点击从后台返回数据，把返回的数据显示在panel上时会报错，说是这个属性没有被发现。那该如何把后台返回的数据如图2一样显示？

1. //加载场景代码
2. var app = new THING.App({
3. // 场景地址
4. "url": "http://www.thingjs.com/./uploads/wechat/5buW6IyC5b2s/scene/CB20190121182605",
5. //背景设置
6. "skyBox" : "BlueSky"
7. });
9. app.on('load', function () {
10. renderHydrant();//渲染消防栓
11. });
13. var panel = null;// 统计面板
14. //仿造消防栓数据
15. var demoData = [
16. {
17. id: 1,
18. position: [-60, 0, 0],
19. angle: 0,
20. title: null,
21. wed: null,
22. },
23. {
24. id: 2,
25. position: [26, 0, 20],
26. angle: 0,
27. title: null,
28. wed: null,
29. },
30. {
31. id: 3,
32. position: [60, 0, 42],
33. angle: 0,
34. title: null,
35. wed: null,
36. }
37. ];
38. var demoDataInfo = [
39. {
40. title: '消防栓_001',
41. dataNumber: 123,
42. },
43. {
44. title: '消防栓_002',
45. dataNumber: 456,
46. },
47. {
48. title: '消防栓_003',
49. dataNumber: 789,
50. }
51. ];
53. function renderHydrant(){
54. for(var i=0;i<demoData.length;i++){
55. // 创建Thing
56. var obj = app.create({
57. type: 'Thing',
58. name: '消防栓_01',
59. id: demoData[i]['id'],
60. url: 'http://model.3dmomoda.com/models/298638300036400398675e7e4c35ef61/0/gltf/',
61. // 模型地址
62. position: demoData[i]['position'],
63. // 位置
64. angle: demoData[i]['angle'],
65. });
66. }
67. }
70. // 给所有建筑对象，添加鼠标滑过事件
71. app.on('mouseon', '.Thing', '#0000FF', function (ev) {
72. this.style.outlineColor = ev.data;
73. });
74. app.on('mouseoff', '.Thing', function (ev) {
75. this.style.outlineColor = null;
76. });
78. app.on('click', '.Thing', '#0000FF', function (ev) {
79. // alert(this);
80. changeText(this);
81. });
83. function changeText(obj){
84. // 创建widget (绑定数据用)
85. var panel = new THING.widget.Panel({
86. // 模板样式
87. template: 'default',//模板样式提供两个样式 default 和 default2
88. // 设置面板宽度
89. width: '120px',
90. //cornerType 角标样式
91. //没有角标none，没有线的角标noline，折线角标polyline，直线角标straightline
92. cornerType: 'polyline'
94. });
96. var id_data = obj.id; //获取id值
98. var name = demoDataInfo[id_data - 1]['title'];//根据id值获取到所需的name；
99. var data_number = demoDataInfo[id_data - 1]['dataNumber'];//根据id值获取到所需的name；
101. //绑定物体身上相应的属性数据
102. panel.addString(name, 'name').caption('名称');
103. panel.addString(data_number, 'power').caption('马力');
106. // 创建UIAnchor面板
107. var uiAnchor = app.create({
108. // 类型
109. type: 'UIAnchor',
110. // 父节点设置
111. parent: obj,
112. // 要绑定的页面的 element 对象
113. element: panel.domElement,
114. // 设置 localPosition 为 [0, 0, 0]
115. localPosition: [0, 0, 0],
116. // 指定页面的哪个点放到localPosition位置上(百分比)
117. pivot: [-0.2, 2.1]
118. });
120. // 将对应的 Panel 存下来 便于后续使用
121. uiAnchor["panel"]=panel;
123. return uiAnchor;
124. }

复制代码

报错：Uncaught TypeError: Cannot create property 'name' on string '消防栓_003'。
获取到的数据该如何显示到panel中呢？

您好，建议您提供一下代码，或者加我们的开发群：1057489240

1. //加载场景代码
2. var app = new THING.App({
3. // 场景地址
4. "url": "http://www.thingjs.com/./uploads/wechat/5buW6IyC5b2s/scene/CB20190121182605",
5. //背景设置
6. "skyBox" : "BlueSky"
7. });
9. app.on('load', function () {
10. renderHydrant();//渲染消防栓
11. });
13. var panel = null;// 统计面板
14. //仿造消防栓数据
15. var demoData = [
16. {
17. id: 1,
18. position: [-60, 0, 0],
19. angle: 0,
20. title: null,
21. wed: null,
22. },
23. {
24. id: 2,
25. position: [26, 0, 20],
26. angle: 0,
27. title: null,
28. wed: null,
29. },
30. {
31. id: 3,
32. position: [60, 0, 42],
33. angle: 0,
34. title: null,
35. wed: null,
36. }
37. ];
38. var demoDataInfo = [
39. {
40. title: '消防栓_001',
41. dataNumber: 123,
42. },
43. {
44. title: '消防栓_002',
45. dataNumber: 456,
46. },
47. {
48. title: '消防栓_003',
49. dataNumber: 789,
50. }
51. ];
53. function renderHydrant(){
54. for(var i=0;i<demoData.length;i++){
55. // 创建Thing
56. var obj = app.create({
57. type: 'Thing',
58. name: '消防栓_01',
59. id: demoData[i]['id'],
60. url: 'http://model.3dmomoda.com/models/298638300036400398675e7e4c35ef61/0/gltf/',
61. // 模型地址
62. position: demoData[i]['position'],
63. // 位置
64. angle: demoData[i]['angle'],
65. });
66. }
67. }
70. // 给所有建筑对象，添加鼠标滑过事件
71. app.on('mouseon', '.Thing', '#0000FF', function (ev) {
72. this.style.outlineColor = ev.data;
73. });
74. app.on('mouseoff', '.Thing', function (ev) {
75. this.style.outlineColor = null;
76. });
78. app.on('click', '.Thing', '#0000FF', function (ev) {
79. // alert(this);
80. changeText(this);
81. });
83. function changeText(obj){
84. // 创建widget (绑定数据用)
85. var panel = new THING.widget.Panel({
86. // 模板样式
87. template: 'default',//模板样式提供两个样式 default 和 default2
88. // 设置面板宽度
89. width: '120px',
90. //cornerType 角标样式
91. //没有角标none，没有线的角标noline，折线角标polyline，直线角标straightline
92. cornerType: 'polyline'
94. });
96. var id_data = obj.id; //获取id值
98. var name = demoDataInfo[id_data - 1]['title'];//根据id值获取到所需的name；
99. var data_number = demoDataInfo[id_data - 1]['dataNumber'];//根据id值获取到所需的name；
101. //绑定物体身上相应的属性数据
102. panel.addString(name, 'name').caption('名称');
103. panel.addString(data_number, 'power').caption('马力');
106. // 创建UIAnchor面板
107. var uiAnchor = app.create({
108. // 类型
109. type: 'UIAnchor',
110. // 父节点设置
111. parent: obj,
112. // 要绑定的页面的 element 对象
113. element: panel.domElement,
114. // 设置 localPosition 为 [0, 0, 0]
115. localPosition: [0, 0, 0],
116. // 指定页面的哪个点放到localPosition位置上(百分比)
117. pivot: [-0.2, 2.1]
118. });
120. // 将对应的 Panel 存下来 便于后续使用
121. uiAnchor["panel"]=panel;
123. return uiAnchor;
124. }

复制代码

报错：Uncaught TypeError: Cannot create property 'name' on string '消防栓_003'。
获取到的数据该如何显示到panel中呢？