卡片标注绘制开发支持-室内园区城市三维可视化引擎室内导航及制作|易景空间三维可视化云平台ESMap

三维可视化场景绘制卡片标注

卡片标注支持永远朝向视窗，并且支持放置成任意角度
在线演示访问地址：创建卡片标注示例

创建卡片标注实例

必须要触发"map.on('loadComplete')"场景加载完成后的时机调用

const cardMarker = new esmap.ESCardMarker({
    id: 1,                    // 标注id
    name: "myCardMarker",     // 标注名称
    x: map.center.x,
    y: map.center.y,
    scale: 2,                 // 标注缩放比例
    showLevel: 20,            // 显示级别
    height: 10,               // 标注高度偏移
    opacity: 1,               // 标注透明度
    url: "./image/cardMarker.png",    // 标注图片标注
    text: '文字动态生成',      // 支持结合图片背景加文字
    textStyle: {
        fontSize: 12,
    },
    /* callback: function (marker) {    // 标注创建完成回调
        marker.float({   // 设置起伏动画
            height: 3,   // 动画高度起伏/m
            time: 1.5,   // 动画时间/s
        })
    }*/
});

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

carLayer.addMarker(cardMarker); // 将卡片标注添加进"对应楼层"的标注层，创建完成

ESCardMarker参数说明:

名称	类型	描述
id	String	标注id
name	String	标注名称
x	Number	标注x坐标属性
y	Number	标注y坐标属性
url	String	标注图片地址
text	String	标注的文字内容
textStyle	Object	标注的文字内容
textStyle.fontSize	Number	文字大小
textStyle.fillStyle	String	文字填充色
textStyle.strokeStyle	String	文字边框色
textStyle.strokeWidth	Number	文字边框厚度
textStyle.shadowBlur	Number	文字阴影
textStyle.shadowColor	String	文字阴影颜色
textStyle.shadowOffsetX	Number	文字阴影X偏移
textStyle.shadowOffsetY	Number	文字阴影Y偏移
scale	Number	标注缩放比例
showLevel	Number \|\| Array	显示级别,可以是一个数组(区间显隐)，也可以是一个数字(到达指定级别才显示)
height	Number	标注高度偏移
opacity	Number	标注透明度(取值范围：0-1)
template	String	template和url参数任选其一展示卡片标注的内容,template支持HTML代码(需要引入html2canvas插件)
lookAt	Boolean	开启标注是否总是朝向视窗
angle	Object	当lookAt设为false时，可以调整卡片的角度。
angle.x	Number	调整卡片的x轴角度
angle.y	Number	调整卡片的y轴角度
renderOrder	Number	更改渲染等级，值越大显示等级越优先
callback	Function	标注完成创建的回调函数，参数会返回marker对象本身

卡片标注的销毁和显隐方法

销毁方法：

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

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

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

// 方法3： 销毁该标注层里的某一个卡片标注
cardLayer.remove(marker); 

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

标注支持手动控制显隐：

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

卡片标注常用方法：

卡片标注-更改图片资源

marker.url = '新图片url';     //动态更改图片资源

卡片标注-移动卡片位置

// 如果是移动到另外楼层,需要自行删除此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({        // 设置大小倍数
    value: 20,
    time: 2,            // 动画时间/s
})

marker.setAlpha({       // 设置透明度
    value:0.2,
    time: 2,            // 动画时间/s
});

卡片标注-设置高低起伏动画

marker.float({ 
    height: 3,  // 动画高度起伏 /m
    time: 1.5,  // 动画时间 /s
})