ThingJS官方示例（二）：利用电子标注判断物联网设备的位置

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

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

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

// 添加纯文本标注
    new THING.widget.Button('纯文本标注', function () {
        removeMark();
        if ($('.textMarker').length > 0) {
            $('.textMarker').css('display', 'block')
        } else {
            createElement(null, "textMarker");
        }
    })

    // 更新文本标注内容
    new THING.widget.Button('更新文本标注内容', function () {
        // 根据获取已创建的文本
        if ($('.textMarker').length > 0) {
            $('.textMarker .text').html('ThingJS文字标注');
        }
    })

    // 添加图片加文字标注
    new THING.widget.Button('图片加文字标注', function () {
        removeMark();
        if ($('.textAndPictureMarker').length > 0) {
            $('.textAndPictureMarker').css('display', 'block')
        } else {
            createElement(null, "textAndPictureMarker");
        }
    })

    // 添加普通图片标注
    new THING.widget.Button('普通图片标注', function () {
        removeMark();
        // 创建图片标注
        if ($('.pictureMarker').length > 0) {
            $('.pictureMarker').css('display', 'block')
        } else {
            createElement(null, "pictureMarker");
        }
    })

    // 添加带角度的图片标注
    new THING.widget.Button('带角度的图片标注', function () {
        removeMark();
        // 创建图片标注
        if ($('.pictureMarker').length > 0) {
            $('.pictureMarker').css('display', 'block');
        } else {
            createElement(null, "pictureMarker");
        }
        $('.pictureMarker').addClass('rotateAnimation');
    })

    // 添加定位标注
    new THING.widget.Button('定位标注', function () {
        removeMark();
        var box = app.create({
            type: 'Box',
            position: [85, 2, 60],
            style: {
                opacity: 0,
            }
        });
        var marker = app.create({
            type: "Marker",
            name: "pictureMarker",
            parent: box,
            url: "/guide/examples/images/navigation/navigation.png",
            localPosition: [0, 0.5, 0],
            size: 1.5,
            useSpriteMaterial: false
        })
        marker.rotateX(90);
    })

    // 更新定位标注
    new THING.widget.Button('更新定位标注', function () {
        var box = app.query('.Box')[0];
        if (box) {
            box.moveTo({
                position: [70, 2, 51],  // 移动到世界位置
                time: 2 * 1000,
                orientToPath: true,
                lerpType: null,  // 插值类型 默认为线性插值 
            });
        }
    })

    // 动态添加图片标注
    new THING.widget.Button('动态添加图片标注', function () {
        removeMark();
        // 鼠标单击事件，动态添加图片标注
        app.on('click', function (ev) {
            if (ev.picked) {
                app.create({
                    type: 'Marker',
                    name: "marker",
                    url: "/guide/examples/images/navigation/pointer.png",
                    size: 1.1,
                    position: ev.pickedPosition,
                    keepSize: true,
                    pivot: [0.5, 1],
                    style: {
                        alwaysOnTop: true
                    }
                });
            }
        }, '动态添加图片标注');
    })

    var marker01 = null;
    var marker02 = null;
    var time = 0;
    // 气泡标注
    new THING.widget.Button('气泡标注', function () {
        removeMark();
        // 创建普通图片标注
        if (marker01 == null) {
            marker01 = app.create({
                type: "Marker",
                name: "marker01",
                url: "/guide/examples/images/navigation/pointer.png",
                position: [80, 3, 70],
                size: 1.1
            })
        }


[了解更多demo请注册官网>>](https://www.thingjs.com/guide/?m=sample)