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

第一步:新建一个卡片标注图层 （以下代码都要在 map.on('loadComplete') 中调用）

// 根据ID为test666锁定三维场景建筑，并取得楼层对象
var floor = map.getBuildingById('test666').getFloor(1);  
// 在此楼层上新建卡片标注图层
self.cardLayer = floor.getOrCreateLayerByName("cards", esmap.ESLayerType.CARD_MARKER); 

第二步:配置卡片标注

var config = {
    id: 1,                    // 标注id
    name: "myCardMarker",     // 标注名称
    x:122465.123,             // 标注坐标(使用三维场景墨卡托坐标)
    y:12345.123,
    scale: 2,                 // 标注缩放比例
    showLevel: 20,            // 显示级别
    height: 10,         // 标注高度偏移
    opacity: 1,               // 标注透明度
    animateHeight: 3,         // 动画高度起伏 /m
    animateTime: 0.7,         // 动画时间 /s
    // url图片和template内容任选其一展示
    url: "./image/cardMarker.png", // 标注图片标注
    template:"<div>卡片标注支持HTML代码</div>"  // 卡片标注的内容,需要引入html2canvas插件
}

第三步:创建卡片标注，并且添加到三维场景

var cardMarker = new esmap.ESCardMarker(config);
self.cardLayer.addMarker(cardMarker);

标注常用配置和方法

参数说明:

名称	类型	描述
id	string	标注id
name	string	标注名称
url	string	标注图片地址
coord	object	标注坐标属性名称类型描述xnumber标注x坐标ynumber标注y坐标
scale	number	标注缩放比例
showLevel	number | Array	显示级别,可以是一个数组(区间显隐)，也可以是一个数字(到达指定级别才显示)
height	number	标注高度偏移
opacity	number	标注透明度
template	string	template和url参数任选其一展示卡片标注的内容,template支持HTML代码(需要引入html2canvas插件)

cardMarker.hide()    // 隐藏卡片标注
cardMarker.show()    // 显示卡片标注