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


(注意：图片标注ESImageMarker已经被功能强大的文字标注ESTextMarker代替，后期不再支持2023-06-01)

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

map.on('loadComplete',function(){
    var layer = new esmap.ESLayer(esmap.ESLayerType.IMAGE_MARKER);
})

第二步:创建一个图片标注实例

var im = new esmap.ESImageMarker({
    x: map.center.x,
    y: map.center.y,
    url: 'image/user.png',
    size: 64
});
参数说明:
参数 说明 类型 可选值 默认值 是否必填
x x轴位置,如果不添加x和y,则默认坐标在三维场景中心。 Number —— —— 否
y y轴位置,如果不添加x和y,则默认坐标在三维场景中心。 Number —— —— 否
url 图片路径 String —— —— 是
size 图片大小,数字 或者 size:{w:32,h:64} Number || Object —— 32 否
center 图片转动锚点相对位置偏移,x和y取值区间为-1~1,默认以中间转动,可选参数 Object { x: 0~1, y: 0~1 } —— 否
height 距离地面高度 Number —— —— 否
showLevel 到达三维场景缩放等级隐藏标注 Number 0 - 23 18 否
seeThrough 是否可以穿透楼层一直显示 Boolean —— false 否
up 图片形态是否竖直 Boolean —— true 否
glow 是否发光 Boolean —— false 否
angle 如果设置了就是固定marker角度,与三维场景一起旋转。(size需要重新设置) Number —— 0 否
id 标注id,可自定义 * —— —— 否
canvasSize 图片清晰度,图片非竖直状态(up为false)时生效,数值越大图片越清晰,但性能也会有影响。 Number —— —— 否
name 标注名称,可自定义 * —— —— 否
callback 标注完成创建的回调函数 Function —— —— 否

第三步:添加到楼层对象

map.on('loadComplete',function(){
    var building = map.getBuildingById('test666');  // 根据ID获取建筑对象
    var floorLayer = building.getFloor(1)           // 通过层数获取楼层对象
    layer.addMarker(im);              // 将imageMarker添加到图层
    floorLayer.addLayer(layer);       // 将图层添加到楼层对象
})

通过名称获取或者创建一个图片标注图层 

map.on('loadComplete',function(){
    var floorLayer = building.getFloor(1);     // 获取第一层的楼层对象

    // 获取或者创建一个名字为camera的图片标注图层
    var layer = floorLayer.getOrCreateLayerByName('camera',esmap.ESLayerType.IMAGE_MARKER);
})

在楼层中根据类型获取第一个匹配的图层 

map.on('loadComplete',function(){
    var floor = building.getFloor(1);
    var layer = floor.getFirstLayer(esmap.ESLayerType.IMAGE_MARKER);
})

根据名字搜索一层楼里的图层

map.on('loadComplete',function(){
    var building = map.getBuildingById('test666'); 
    var floorLayer = building.getFloor(1);       // 获取第一层的楼层对象
    // 返回图层数组，可一次查询一个名字,也可以多个名字
    var layers1 = floorLayer.getLayersByNames(['camera']);
    var layers2 = floorLayer.getLayersByNames(['camera','device']);
})

删除标注

您可以通过楼层对象删除图片标注图层:

// 删除某个楼层所有的图片标注图层
floorLayer.removeLayersByTypes(esmap.ESLayerType.IMAGE_MARKER);
// 根据图层名字删除某个楼层的图片标注图层
floorLayer.removeLayersByNames('camera');

也可以从图片标注图层中删除图片标注:

layer.remove(im);   // 删除某一个标注
layer.removeAll();  // 删除所有标注

通过名称或者id搜索 更多参数请查看 三维场景数据信息检索 页面 

var queryParams = {
    nodeType: esmap.ESNodeType.IMAGE_MARKER, // nodeType指定为图片标注类型
    ID: 56,   // 根据id搜索
    // name:     根据name搜索，可以选id或name为条件搜索
};

// 根据条件查询图片标注
esmap.ESMapUtil.search(map, 'all', queryParams, function (e) {
    // 输出查询结果
    console.log(e)
})

标注动画

// 1.跳跃动画
im.jump({
    times: 100,    // 跳跃执行100次
    duration: 1,   // 间隔1秒
    delay: 0.5,    // 0.5秒后执行
    height: 10	   // 跳跃的三维场景高度
});

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

// 2.闪烁动画(缓慢放大后缩小)
im.flash();   
im.stopFlash();

图片标注发光报警光圈效果(收费功能) 

// 1.开始图片标注发光报警光圈效果(收费功能,新SDK1.6版本以上)
var glowOpacity = 0.5           // 发光透明度（范围0-1）
im.glow('#FFFFFF',glowOpacity); // 发光颜色

// 2.停止图片标注发光报警光圈效果(收费功能,新SDK1.6版本以上)
im.stopGlow();

其他方法

// 1.更换图片
im.url = '新图片url';   

// 2.移动图片位置(如果是移动到另外一层,需要自行删除此marker,然后新建立一个到另外一层layer上面) 

im.moveTo({
    x: floorLayer.mapCoord.x + 10,   // 目标点x在中心点坐标基础上再加10米
    y: floorLayer.mapCoord.y + 10,   // 目标点y在中心点坐标基础上再加10米
    time: 0                        // 位移动画时间，单位（秒/s）
}) 


// 3.如果配置了angle属性，则可已通过以下两种方法改变marker角度:
im.angle = angle;  // 方法1：直接设置角度旋转

im.rotateTo(angle) // 方法2：有过渡效果的旋转
// 如需配置过渡时间，则angle为一个对象，配置如下
var angle = {
    to: 150,  // 单位(度/°)
    time: 1   // 1秒,默认为0.3秒
}

标注支持手动控制显隐:

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