您现在的位置: 首页 > 城市三维场景SDK开发 > 开发指南
图片标注绘制
第一步:新建一个图片标注图层（以下代码都要在三维场景加载完成后调用map.on('loadComplete'）
map.on('loadComplete',function(){
var layer = new esmap.ESLayer(esmap.ESLayerType.IMAGE_MARKER);
})
第二步:创建一个图片标注实例
im = new esmap.ESImageMarker({
x: gpos.x + 30,
y: gpos.y - 30, //如果不添加x和y，则默认坐标在三维场景中心。
url: 'image/user.png', //图片标注的图片地址
size: 64, //图片大小 或者 size:{w:32,h:64},
spritify:true, //跟随三维场景缩放变化大小，默认为true，可选参数
height:6, //距离地面高度
showLevel: 20, //三维场景缩放等级达到多少时隐藏,可选参数
seeThrough: true, //是否可以穿透楼层一直显示,可选参数
//angle:30, //如果设置了就是固定marker角度，与三维场景一起旋转。(size需要重新设置)
id: 2017, //id，可自定义
name: 'myMarker' //name可自定义
});
第三步:添加到楼层对象
map.on('loadComplete',function(){
layer.addMarker(im); //将imageMarker添加到图层
//获取室外层对象
var floorLayer = map.getBuildingById(0).getFloor(1);
floorLayer.addLayer(layer); //将图层添加到楼层对象
})
根据名字创建同一类型不同名字的图层
map.on('loadComplete',function(){
//通过名字区别创建不同的layer
//获取室外层对象
var floorLayer = map.getBuildingById(0).getFloor(1);
var layer=floorLayer.getOrCreateLayerByName("camera",esmap.ESLayerType.IMAGE_MARKER);
})
根据名字搜索一楼层里面的图层
map.on('loadComplete',function(){
//通过名字区别创建不同的layer
//获取室外层对象
var floorLayer = map.getBuildingById(0).getFloor(1);
//返回图层数组，可一次查询一个名字，也可以多个名字
var layers1=floorLayer.getLayersByNames(['camera']);
var layers2=floorLayer.getLayersByNames(['camera','device']);
})
删除标注
您可以删除一整个图片标注图层:
//楼层上根据类型删除图层
floorLayer.removeLayersByTypes(esmap.ESLayerType.IMAGE_MARKER);
//楼层上根据名字删除图层
floorLayer.removeLayersByNames("name");
也可以从图片标注图层中删除图片标注：
layer.remove(im); //删除某一个标注
layer.removeAll(); //删除所有标注
标注动画
//1.跳跃动画
mark.jump({
times: 100, //跳跃执行100次
duration: 1, //间隔1秒
delay: 0.5, //0.5秒后执行
height: 10 //跳跃的三维场景高度
});
//停止跳跃
mark.stopJump();
//2.闪烁动画(缓慢放大后缩小)
mark.flash();
mark.stopFlash();
图片标注发光报警光圈效果(收费功能，新SDK1.6版本以上)
//1.开始图片标注发光报警光圈效果(收费功能，新SDK1.6版本以上)
var color = '#FFFFFF' //发光颜色
mark.glow(color);
//2.停止图片标注发光报警光圈效果(收费功能，新SDK1.6版本以上)
mark.stopGlow();
其他方法
//1.更换图片
mark.url=新图片url;
//2.移动图片位置(如果是移动到另外一层,需要自行删除此marker,然后新建立一个到另外一层layer上面)
//x,y是坐标，time=0是无动画效果移动，time=3是花费3秒钟过度效果移动过去
mark.moveTo({x: floorLayer.mapCoord.x,y: floorLayer.mapCoord.y+10,time:0})
//3.如果配置了angle属性，则可已通过以下两种方法改变marker角度:
//直接设置角度旋转
marker.angle = angle;
//或者
//有过渡效果的旋转
marker.rotateTo(angle)
//如需配置过渡时间，则angle为一个对象，配置如下
{
to:angle,
time:1 //1秒,默认为0.3秒
}
//楼层上根据类型删除图层
floorLayer.removeLayersByTypes(esmap.ESLayerType.IMAGE_MARKER);
//楼层上根据名字删除图层
floorLayer.removeLayersByNames("name");
layer.remove(im); //删除某一个标注
layer.removeAll(); //删除所有标注
//1.跳跃动画
mark.jump({
times: 100, //跳跃执行100次
duration: 1, //间隔1秒
delay: 0.5, //0.5秒后执行
height: 10 //跳跃的三维场景高度
});
//停止跳跃
mark.stopJump();
//2.闪烁动画(缓慢放大后缩小)
mark.flash();
mark.stopFlash();
图片标注发光报警光圈效果(收费功能，新SDK1.6版本以上)
//1.开始图片标注发光报警光圈效果(收费功能，新SDK1.6版本以上)
var color = '#FFFFFF' //发光颜色
mark.glow(color);
//2.停止图片标注发光报警光圈效果(收费功能，新SDK1.6版本以上)
mark.stopGlow();
其他方法
//1.更换图片
mark.url=新图片url;
//2.移动图片位置(如果是移动到另外一层,需要自行删除此marker,然后新建立一个到另外一层layer上面)
//x,y是坐标，time=0是无动画效果移动，time=3是花费3秒钟过度效果移动过去
mark.moveTo({x: floorLayer.mapCoord.x,y: floorLayer.mapCoord.y+10,time:0})
//3.如果配置了angle属性，则可已通过以下两种方法改变marker角度:
//直接设置角度旋转
marker.angle = angle;
//或者
//有过渡效果的旋转
marker.rotateTo(angle)
//如需配置过渡时间，则angle为一个对象，配置如下
{
to:angle,
time:1 //1秒,默认为0.3秒
}
//1.开始图片标注发光报警光圈效果(收费功能，新SDK1.6版本以上)
var color = '#FFFFFF' //发光颜色
mark.glow(color);
//2.停止图片标注发光报警光圈效果(收费功能，新SDK1.6版本以上)
mark.stopGlow();
//1.更换图片
mark.url=新图片url;
//2.移动图片位置(如果是移动到另外一层,需要自行删除此marker,然后新建立一个到另外一层layer上面)
//x,y是坐标，time=0是无动画效果移动，time=3是花费3秒钟过度效果移动过去
mark.moveTo({x: floorLayer.mapCoord.x,y: floorLayer.mapCoord.y+10,time:0})
//3.如果配置了angle属性，则可已通过以下两种方法改变marker角度:
//直接设置角度旋转
marker.angle = angle;
//或者
//有过渡效果的旋转
marker.rotateTo(angle)
//如需配置过渡时间，则angle为一个对象，配置如下
{
to:angle,
time:1 //1秒,默认为0.3秒
}