请选择 进入手机版 | 继续访问电脑版
分享
查看: 4342|回复: 2

[求助] Panel的显示问题

[复制链接]

Panel的显示问题

发表于 2019-1-26 09:57:56 来自 求助 阅读模式 倒序浏览
zzv_icon4342 zzr_icon2 查看全部

图1:Panel的显示问题

图2:Panel的显示问题

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

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

avatar

97

主题

218

帖子

120

积分

游客

积分
120
ThingJS 发表于 2019-1-26 11:04:13 显示全部楼层

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

avatar

8

主题

11

帖子

0

积分

游客

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

本版积分规则

130700ppkpl8x3t7tt1b1t