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

您现在的位置: 首页 > 室内三维可视化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},
    center:{x:0.5,y:0.5},   //图片转动锚点相对位置偏移,x和y取值区间为-1~1,默认以中间转动,可选参数(2021.11新增参数)
    spritify:true,			//跟随三维场景缩放变化大小，默认为true，可选参数
    height:6, 			    //距离地面高度
    showLevel: 20,  		//三维场景缩放等级达到多少时隐藏,可选参数
    seeThrough: true,		//是否可以穿透楼层一直显示,可选参数
    //angle:30,  	//如果设置了就是固定marker角度，与三维场景一起旋转。(size需要重新设置)
    id: 2017,   			//id，可自定义
    name: 'myMarker',   		//name可自定义
    //需要添加完成事件的可以加上下面的代码，默认下面代码不加
    callback: function () {
        //加载完成事件
    }
});

第三步:添加到楼层对象


map.on('loadComplete',function(){
    var fnum=map.getFloorNumByName('F1');//通过楼层名称来获取三维场景内部楼层fnum
	layer.addMarker(im);              //将imageMarker添加到图层
	var floorLayer = map.getFloor(1)  //获取第一层的楼层对象
	floorLayer.addLayer(layer);       //将图层添加到楼层对象
})

根据名字创建同一类型不同名字的图层


map.on('loadComplete',function(){
    var fnum=map.getFloorNumByName('F1');//通过楼层名称来获取三维场景内部楼层fnum
	//通过名字区别创建不同的layer
	var floorLayer = map.getFloor(1);  //获取第一层的楼层对象
	var layer=floorLayer.getOrCreateLayerByName("camera",esmap.ESLayerType.IMAGE_MARKER);
})

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


map.on('loadComplete',function(){
    var fnum=map.getFloorNumByName('F1');//通过楼层名称来获取三维场景内部楼层fnum
	//通过名字区别创建不同的layer
	var floorLayer = map.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();  //删除所有标注

通过名称或者id搜索

(更多参数请查看 )


var queryParams = {
    nodeType: esmap.ESNodeType.IMAGE_MARKER, //nodeType指定为图片标注类型
    ID: 56,   //根据id搜索
    //name: '名称'  或者根据name搜索
};
//根据条件查询图片标注
esmap.ESMapUtil.search(map, 'all', queryParams, function (e) {
    console.log(e)
})

图片标注点击返回事件


map.on('mapClickNode', function(event) {
    console.log(event);//此处打印处如上图（比如点击中房间）所示的调试信息
    switch (event.nodeType) {
        case esmap.ESNodeType.MODEL:        //返回三维场景房间信息                                            
            break; 
        case esmap.ESNodeType.FACILITY:     //返回三维场景POI信息
            break;
        case esmap.ESNodeType.IMAGE_MARKER:  //返回代码添加的图片标注信息
            break;
            case esmap.ESNodeType.TEXT_MARKER:  //返回代码添加的文字标注信息
            break; 
        case esmap.ESNodeType.MODEL3D:      //返回三维模型标注信息
            break;
        case esmap.ESNodeType.LINE:         //返回线信息
            break;
    }
});

标注动画


//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秒
}

//4.设置标注隐藏，不显示
marker.visible=false;