纯文字标注、图片+文字标注 绘制
1.创建一个纯文字标注
第一步:新建一个文字标注图层（以下代码都要在三维场景加载完成后调用map.on('loadComplete'）
map.on('loadComplete',function(){
var layer = new esmap.ESLayer(esmap.ESLayerType.TEXT_MARKER);
//可以给图层添加自定义name
layer.name = 'mylayer';
})
第二步:创建一个文字标注实例
var tm = new esmap.ESTextMarker({
x: gpos.x - 30,
y: gpos.y - 30,
id: 2017, //id，可自定义
name: "测试标签2",
spritify:true,//跟随三维场景缩放变化大小，默认为true，可选参数
height:1, //距离地面高度
showLevel: 20, //三维场景缩放等级达到多少时隐藏,可选参数
scale:1, //文字等级缩放默认为1,可选参数,0.1表明缩小10倍
fillcolor: "255,0,0", //填充色
fontsize: "12.0", //字体大小
strokecolor: "255,255,0", //边框色
strokewidth:2, //边框厚度 0表示无边框
//需要添加完成事件的可以加上下面的代码，默认下面代码不加
callback: function () {
//加载完成事件
}
});
第三步:添加到楼层对象
map.on('loadComplete',function(){
var fnum=map.getFloorNumByName('F1');//通过楼层名称来获取三维场景内部楼层fnum
var floorLayer = map.getFloor(1) //获取第一层的楼层对象
layer.addMarker(tm); //将文字标注添加到图层
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.TEXT_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.TEXT_MARKER);
//楼层上根据名字删除图层
floorLayer.removeLayersByNames("name");
也可以从文字标注图层中删除标注：
layer.remove(tm); //删除某个标注
layer.removeAll(); //删除所有标注
通过名称或者id搜索
(更多参数请
查看 )
var queryParams = {
nodeType: esmap.ESNodeType.TEXT_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.跳跃动画
tm.jump({
times: 100, //跳跃执行100次
duration: 1, //间隔1秒
delay: 0.5, //0.5秒后执行
height: 10 //跳跃的三维场景高度
});
//停止跳跃
tm.stopJump();
//2.闪烁动画(缓慢放大后缩小)
tm.flash();
tm.stopFlash();
2.创建一个图片+文字标注实例(图片方位left,top,right,bottom)
var tm = new esmap.ESTextMarker({
x: gpos.x - 30,
y: gpos.y - 30,
id: 2017, //id，可自定义
image: 'image/user.png', //图片标注的图片地址
imageAlign:'bottom', //图片方位left,top,right,bottom
imageSize:64, //图片大小
name: "图片文字标注", //文字名称
spritify:true, //跟随三维场景缩放变化大小,默认为true,可选参数
scale:1, //文字等级缩放默认为1,可选参数,0.1表明缩小10倍
height:1, //距离地面高度
showLevel: 20, //三维场景缩放等级达到多少时隐藏,可选参数
fillcolor: "255,0,0", //填充色
fontsize: "24", //字体大小
strokecolor: "255,255,0", //边框色
strokewidth:2 //边框厚度 0表示无边框
});
3.移动位置
//移动位置(如果是移动到另外一层,需要自行删除此marker,然后新建立一个到另外一层layer上面)
//x,y是坐标,time=0是无动画效果移动,time=3是花费3秒钟过度效果移动过去
tm.moveTo({x: floorLayer.mapCoord.x,y: floorLayer.mapCoord.y+10,time:0})
4.动态更改标注内容
tm.name = "new content"
其他方法
//1.更换图片
tm.url=新图片url;
//2.移动图片位置(如果是移动到另外一层,需要自行删除此marker,然后新建立一个到另外一层layer上面)
//x,y是坐标，time=0是无动画效果移动，time=3是花费3秒钟过度效果移动过去
tm.moveTo({x: floorLayer.mapCoord.x,y: floorLayer.mapCoord.y+10,time:0})
//3.如果配置了angle属性，则可已通过以下两种方法改变marker角度:
//直接设置角度旋转
tm.angle = angle;
//或者
//有过渡效果的旋转
tm.rotateTo(angle)
//如需配置过渡时间，则angle为一个对象，配置如下
{
to:angle,
time:1 //1秒,默认为0.3秒
}
//4.设置标注隐藏，不显示
tm.visible=false;