2D标签

通过 marker.addMarker 方法添加2D 标签，标签样式允许自定义。

初始化场景

默认已经设置了一个 div 宽度为 600px，高度为 400px， id 设置为 TO 的容器。
且已经完成初始化导入模型操作，请参考导入模型章节。

2D标签数据

具体参数含义请参考 2D标签含义章节。

let markerInfo ={
    name: '',
    modelName: '',
    id: '',
    type: 'text',
    bg: 'bg1',
    configs: {
    title: 'ABB机械臂',
    content: 'ABB 机械臂，高精度、强性能的工业好帮手'
    },
    markerName: '',
    position: {x: 0, y: 40, z: 0},
    base: {
        offset: {x: 0, y: 0, z: 0},
        ratio: 1.1,
        intervalY: 40,
    },
    width: 460,
    height: 180,
    code:``
};

标签样式

通过创建html + css代码，设置标签容器和样式。

//创建html
const imageUrl = './image/load/10';

let innerHtml = `<div class="marker-text-title" style="">`+markerInfo.configs.title+`</div>
                            <div class="marker-text-content">`+markerInfo.configs.content+`</div>`

const mainHtml = `<div id="markerDiv" style="width:`+markerInfo.width+`px;height:`+markerInfo.height+`px;position:relative">`+
        `<img src="`+imageUrl+`" alt="" style="width: 100%">`+
`<div class="marker-innerDiv">`+
        innerHtml+
        `</div></div>`

添加2D标签

首先找到“fileModel-abb”模型，将标签附着到此模型上，随着此模型移动。

//找到模型
let model = TO.scene.getObjectByProperty('name', 'fileModel-abb');
const marker = TO.marker.addMarker(model, mainHtml, {position: markerInfo.position, base: markerInfo.base});

删除2D标签

首先找到“fileModel-abb”模型，将标签从此模型上移除。

//找到模型
let model = TO.scene.getObjectByProperty('name', 'fileModel-abb');
TO.marker.removeMarker(model, "markerDiv");

2D标签 ​

初始化场景 ​

2D标签数据 ​

标签样式 ​