Panel的显示问题

廖茂彬 28天前 154

图1:  

图2:

如图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中呢?

最后于 28天前 被廖茂彬编辑 ,原因:
最新回复 (2)
  • ThingJS 28天前
    0 引用 2
    您好,建议您提供一下代码,或者加我们的开发群:225986500
  • 廖茂彬 28天前
    0 引用 3
    //加载场景代码
    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中呢?

你可以在 登录 or 注册 后,对此帖发表评论!

返回