创建纯图片标注实例

这里是纯图片标注的创建配置说明，效果如下图所示：

map.on('loadComplete',()=>{
    const textMarker = new esmap.ESTextMarker({
        image: 'image/user.png',
        scale: 2,
        showLevel: 20,
        height: 3,
        id: 1,
        name: '纯图片',
        x: map.center.x,
        y: map.center.y,
    });

    /* 获取"一楼"的楼层对象，并且创建"一楼"的图文标注层,其他楼层以此类推 */
    floor = map.getBuildingById(0).getFloor(1);
    textLayer = floor.getOrCreateLayerByName('textLayer',esmap.ESLayerType.TEXT_MARKER);

    textLayer.addMarker(textMarker); // 将图文标注添加进"对应楼层"的标注层，创建完成
})

创建纯文字标注实例

这里是纯文字标注的创建配置说明，效果如下图所示：

map.on('loadComplete',()=>{
    const textMarker = new esmap.ESTextMarker({
        height: 3,
        text: "测试标签2",
        showLevel: 20,
        textStyle: {
            fontSize: 14,
            fillStyle: '#FFFFFF',  //填充色
            strokeWidth: 4, //边框厚度
            strokeStyle: '#000000',  //边框色
            shadowBlur: 3, //阴影
            shadowColor: '#000000', //阴影颜色
        }
        id: 2,
        name: '纯文字',
        x: map.center.x,
        y: map.center.y,
    });

    /* 获取"一楼"的楼层对象，并且创建"一楼"的图文标注层,其他楼层以此类推 */
    floor = map.getBuildingById(0).getFloor(1);
    textLayer = floor.getOrCreateLayerByName('textLayer',esmap.ESLayerType.TEXT_MARKER);
    
    textLayer.addMarker(textMarker); // 将图文标注添加进"对应楼层"的标注层，创建完成
})

图文标注的销毁和显隐方法

销毁方法：

// 首先获取"对应楼层"的楼层对象
floor = map.getBuildingById(0).getFloor(1); // 这里获取到"一楼"楼层对象

// 方法1：销毁某个楼层所有的图文标注层
floor.removeLayersByTypes(esmap.ESLayerType.TEXT_MARKER);

// 方法2：根据标注层名字销毁某个楼层的图文标注层
floor.removeLayersByNames('textLayer');

// 方法3： 销毁该标注层里的某一个图文标注
textLayer.remove(marker); 

// 方法4： 销毁该标注层的所有标注
textLayer.removeAll(); 

标注支持手动控制显隐：

marker.visible = false  // 隐藏标注
marker.visible = true   // 显示标注

图文标注常用方法：

---

图文标注-检测碰撞显示

// 当多个图文标注的位置发生重叠碰撞时，会动态隐藏部分标注
textLayer.enableCollide()

图文标注-跳跃动画

marker.jump({
    times: 100,  // 跳跃执行100次
    duration: 1, // 持续1秒
    delay: 0.5,  // 每次跳跃的间隔，默认为0
    height: 10   // 跳跃的三维场景高度
});

// 停止跳跃
marker.stopJump();

图文标注-闪烁动画(缓慢放大后缩小)和发光动画

marker.flash({
    times: 20,      // 执行次数
    scale: 1.5,     // 缩放倍数
    delay: 5,       // 每次跳跃的间隔，默认为0
});

// 停止闪烁
marker.stopFlash();

// 标注发光
marker.glow({
    color: '#00FF00',   // 设置光圈颜色
    scale: 2,           // 设置光圈效果大小
    opacity: 0.2,       // 设置光圈效果透明度
    height:2, // 设置光圈高度
});

//停止光圈效果
marker.stopGlow();

图文标注-更换图片或文字内容

marker.url = '新图片url';        // 动态更改图片资源
await marker.updateImage('新图片url');    // 针对需要确保更换图片资源后进行异步操作使用

marker.text = 'new content';     // 动态更改标注内容

图文标注-移动图片位置

// 如果是移动到另外楼层,需要自行删除此marker,然后新建立一个标注添加到对应楼层的标注层上面
marker.moveTo({
    x: marker.mapCoord.x + 10, // 目标点x轴
    y: marker.mapCoord.y + 10, // 目标点y轴
    time: 0 // 位移动画时间，单位（秒/s）
})

图文标注-支持沿着路径移动(movePath)

let points =[       // 线段数据
    { "x":map.center.x, "y":map.center.y, "fnum":1, "offset":2 },
    { "x":map.center.x + 20, "y":map.center.y + 20, "fnum":1, "offset":2 },
    { "x":map.center.x - 20, "y":map.center.y - 20, "fnum":1, "offset":2 },
];
marker.movePath({
    path: points,
    offsetHeight: 3,
    speed: 3,   // speed为完成速度，time为完成时间，两个参数选其一
    //time: 5,
    loop: true,
    onMoving: (e) => {
        // 返回移动中信息的回调函数
        // 不建议在该回调里做marker.url资源更改，建议使用气泡标注或者使用防抖函数控制
    },
})

图文标注-设置文字样式

marker.updateTextStyle({
    fontSize: 15,
    fillStyle: "#FF0000",
    strokeStyle: "#00FF00",
    strokeWidth: 6,
})

图文标注-设置高度和大小

marker.setHeight(20);   // 设置高度

marker.setSize({        // 设置大小
    width: 200,
    height: 200,
})

marker.setScale(2);     // 设置比例

图文标注-设置颜色和透明度

marker.setColor("#FF0000");  //设置颜色
marker.setColor(false);     // 恢复颜色

marker.setAlpha(0.2);       // 设置透明度