Panel的显示问题

回复

图1： Panel的显示问题

图2： Panel的显示问题

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

//加载场景代码
var app = new THING.App({
// 场景地址
"url": "http://www.thingjs.com/./uploads/wechat/5buW6IyC5b2s/scene/CB20190121182605",
//背景设置
"skyBox" : "BlueSky"
});
app.on('load', function () {
renderHydrant();//渲染消防栓
});
var panel = null;// 统计面板
//仿造消防栓数据
var demoData = [
{
id: 1,
position: [-60, 0, 0],
angle: 0,
title: null,
wed: null,
},
{
id: 2,
position: [26, 0, 20],
angle: 0,
title: null,
wed: null,
},
{
id: 3,
position: [60, 0, 42],
angle: 0,
title: null,
wed: null,
}
];
var demoDataInfo = [
{
title: '消防栓_001',
dataNumber: 123,
},
{
title: '消防栓_002',
dataNumber: 456,
},
{
title: '消防栓_003',
dataNumber: 789,
}
];
function renderHydrant(){
for(var i=0;i<demoData.length;i++){
// 创建Thing
var obj = app.create({
type: 'Thing',
name: '消防栓_01',
id: demoData[i]['id'],
url: 'http://model.3dmomoda.com/models/298638300036400398675e7e4c35ef61/0/gltf/',
// 模型地址
position: demoData[i]['position'],
// 位置
angle: demoData[i]['angle'],
});
}
}
// 给所有建筑对象，添加鼠标滑过事件
app.on('mouseon', '.Thing', '#0000FF', function (ev) {
this.style.outlineColor = ev.data;
});
app.on('mouseoff', '.Thing', function (ev) {
this.style.outlineColor = null;
});
app.on('click', '.Thing', '#0000FF', function (ev) {
// alert(this);
changeText(this);
});
function changeText(obj){
// 创建widget (绑定数据用)
var panel = new THING.widget.Panel({
// 模板样式
template: 'default',//模板样式提供两个样式 default 和 default2
// 设置面板宽度
width: '120px',
//cornerType 角标样式
//没有角标none，没有线的角标noline，折线角标polyline，直线角标straightline
cornerType: 'polyline'
});
var id_data = obj.id; //获取id值
var name = demoDataInfo[id_data - 1]['title'];//根据id值获取到所需的name；
var data_number = demoDataInfo[id_data - 1]['dataNumber'];//根据id值获取到所需的name；
//绑定物体身上相应的属性数据
panel.addString(name, 'name').caption('名称');
panel.addString(data_number, 'power').caption('马力');
// 创建UIAnchor面板
var uiAnchor = app.create({
// 类型
type: 'UIAnchor',
// 父节点设置
parent: obj,
// 要绑定的页面的 element 对象
element: panel.domElement,
// 设置 localPosition 为 [0, 0, 0]
localPosition: [0, 0, 0],
// 指定页面的哪个点放到localPosition位置上(百分比)
pivot: [-0.2, 2.1]
});
// 将对应的 Panel 存下来便于后续使用
uiAnchor["panel"]=panel;
return uiAnchor;
}

复制代码

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

ThingJS · 发表于 2019-1-26 11:04:13

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

廖茂彬 · 发表于 2019-1-26 11:22:41

//加载场景代码
var app = new THING.App({
// 场景地址
"url": "http://www.thingjs.com/./uploads/wechat/5buW6IyC5b2s/scene/CB20190121182605",
//背景设置
"skyBox" : "BlueSky"
});
app.on('load', function () {
renderHydrant();//渲染消防栓
});
var panel = null;// 统计面板
//仿造消防栓数据
var demoData = [
{
id: 1,
position: [-60, 0, 0],
angle: 0,
title: null,
wed: null,
},
{
id: 2,
position: [26, 0, 20],
angle: 0,
title: null,
wed: null,
},
{
id: 3,
position: [60, 0, 42],
angle: 0,
title: null,
wed: null,
}
];
var demoDataInfo = [
{
title: '消防栓_001',
dataNumber: 123,
},
{
title: '消防栓_002',
dataNumber: 456,
},
{
title: '消防栓_003',
dataNumber: 789,
}
];
function renderHydrant(){
for(var i=0;i<demoData.length;i++){
// 创建Thing
var obj = app.create({
type: 'Thing',
name: '消防栓_01',
id: demoData[i]['id'],
url: 'http://model.3dmomoda.com/models/298638300036400398675e7e4c35ef61/0/gltf/',
// 模型地址
position: demoData[i]['position'],
// 位置
angle: demoData[i]['angle'],
});
}
}
// 给所有建筑对象，添加鼠标滑过事件
app.on('mouseon', '.Thing', '#0000FF', function (ev) {
this.style.outlineColor = ev.data;
});
app.on('mouseoff', '.Thing', function (ev) {
this.style.outlineColor = null;
});
app.on('click', '.Thing', '#0000FF', function (ev) {
// alert(this);
changeText(this);
});
function changeText(obj){
// 创建widget (绑定数据用)
var panel = new THING.widget.Panel({
// 模板样式
template: 'default',//模板样式提供两个样式 default 和 default2
// 设置面板宽度
width: '120px',
//cornerType 角标样式
//没有角标none，没有线的角标noline，折线角标polyline，直线角标straightline
cornerType: 'polyline'
});
var id_data = obj.id; //获取id值
var name = demoDataInfo[id_data - 1]['title'];//根据id值获取到所需的name；
var data_number = demoDataInfo[id_data - 1]['dataNumber'];//根据id值获取到所需的name；
//绑定物体身上相应的属性数据
panel.addString(name, 'name').caption('名称');
panel.addString(data_number, 'power').caption('马力');
// 创建UIAnchor面板
var uiAnchor = app.create({
// 类型
type: 'UIAnchor',
// 父节点设置
parent: obj,
// 要绑定的页面的 element 对象
element: panel.domElement,
// 设置 localPosition 为 [0, 0, 0]
localPosition: [0, 0, 0],
// 指定页面的哪个点放到localPosition位置上(百分比)
pivot: [-0.2, 2.1]
});
// 将对应的 Panel 存下来便于后续使用
uiAnchor["panel"]=panel;
return uiAnchor;
}

复制代码

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

[求助] Panel的显示问题

Panel的显示问题

相关帖子