1.三维可视化场景绘制图片+文字标注
第一步:新建一个文字标注图层（以下代码都要在 map.on('loadComplete') 中调用）
map.on('loadComplete',function(){
var layer = new esmap.ESLayer(esmap.ESLayerType.TEXT_MARKER);
})第二步:创建一个文字标注实例
var marker = new esmap.ESTextMarker({
x: map.center.x,
y: map.center.y,
scale: 1.5, //设置整体缩放比例
text: "图片+文字",
image: "image/card.png",
imageStyle: {
align: 'center',
scale: 1, //单独设置图片缩放比例
},
textStyle: {
fontSize: 14,
fillStyle: '#FFFFFF', //填充色
strokeWidth: 2, //边框厚度
strokeStyle: '#000000', //边框色
shadowBlur: 3, //阴影
shadowColor: '#000000', //阴影颜色
},
height: 3,
showLevel: 20,
});参数说明:
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必填 |
|---|---|---|---|---|---|
| x | x轴位置,如果不添加x和y，则默认坐标在场景中心。 | Number | —— | map.center.x | 否 |
| y | y轴位置,如果不添加x和y，则默认坐标在场景中心。 | Number | —— | map.center.y | 否 |
| height | 距离地面高度 | Number | —— | 6 | 否 |
| scale | 标注整体缩放比例 | Number | —— | 1 | 否 |
| text | 文字内容 | String | —— | —— | 否 |
| image | 图片路径 | String | —— | —— | 否 |
| imageStyle | 图片样式 | Object | —— | —— | 否 |
| imageStyle.align | 图片对齐方式 | String | center(背景居中),left(左),right(右), top(上),bottom(下) |
center | 否 |
| imageStyle.space | 图片与文字间距 | Number | —— | 5 | 否 |
| imageStyle.size | 图片比例 | String|Number|Object | "auto":(图片比例自适应) 64: 将图片比例设置为64*64 {w:64,h:256}将图片尺寸设置为64*256 |
"auto" | 否 |
| imageStyle.scale | 图片缩放大小 | Number | 当有文字,但需要单独控制图片大小可以使用此参数 | 1 | 否 |
| textStyle | 文字样式 | Object | —— | —— | 否 |
| textStyle.fontSize | 文字大小 | Number | —— | 12 | 否 |
| textStyle.fillStyle | 文字填充色 | String | —— | #FFFFFF | 否 |
| textStyle.strokeStyle | 文字边框色 | String | —— | #000000 | 否 |
| textStyle.strokeWidth | 文字边框厚度 | Number | —— | 2 | 否 |
| textStyle.shadowBlur | 文字阴影 | Number | —— | 4 | 否 |
| textStyle.shadowColor | 文字阴影颜色 | String | —— | "rgba(0, 0, 0, 1.0)" | 否 |
| textStyle.shadowOffsetX | 文字阴影X偏移 | Number | —— | 0 | 否 |
| textStyle.shadowOffsetY | 文字阴影Y偏移 | Number | —— | 0 | 否 |
| name | 标注名称 | String | —— | —— | 否 |
| id | 标注id,可自定义 | Number | —— | —— | 否 |
| fixedSize | 是否固定大小 | Boolean | —— | true | 否 |
| showLevel | 到达场景缩放等级隐藏或者显示标注 | Number|Array|null | Number: 0 - 23, 如配置 15, 则超过15级隐藏 Array:[10, 20]: 在10~20级显示 null: 一直显示 |
null | 否 |
| pickable | 控制是否可被点击 | Boolean | true/false | true | 否 |
| renderOrder | 控制渲染等级 | Number | —— | esmap.ESRenderOrder.TEXT_MARKER | 否 |
| callback | 标注完成创建的回调函数，参数会返回marker对象本身 | Function | —— | —— | 否 |
第三步:添加到楼层对象
map.on('loadComplete',function(){
var building = map.getBuildingById('test666');
var floorLayer = building.getFloor(1) // 通过层数获取楼层对象
layer.addMarker(marker); // 将文字标注添加到图层
floorLayer.addLayer(layer); // 将图层添加到楼层对象
})通过名称获取或者创建一个文字标注图层
map.on('loadComplete',function(){
var building = map.getBuildingById('test666');
var floorLayer = building.getFloor(1); // 获取第一层的楼层对象
// 获取或者创建一个名字为camera的文字标注图层
var layer=floorLayer.getOrCreateLayerByName('camera',esmap.ESLayerType.TEXT_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.TEXT_MARKER);
// 根据图层名字删除某个楼层的文字标注图层
floorLayer.removeLayersByNames('camera');也可以从图层中删除文字标注:
layer.remove(marker); // 删除某一个标注
layer.removeAll(); // 删除所有标注标注支持手动控制显隐:
marker.visible = false // 隐藏标注
marker.visible = true // 显示标注通过名称或者id搜索 更多参数请查看 三维场景数据信息检索 页面
var queryParams = {
nodeType: esmap.ESNodeType.TEXT_MARKER, // nodeType指定为图片标注类型
ID: 56, // 根据id搜索
// name: 根据name搜索，可以选id或name为条件搜索
};
// 根据条件查询文字标注
esmap.ESMapUtil.search(map, 'all', queryParams, function (e) {
// 输出查询结果
console.log(e)
})标注动画
// 1.跳跃动画
marker.jump({
times: 100, // 跳跃执行100次
duration: 1, // 间隔1秒
delay: 0.5, // 0.5秒后执行
height: 10 // 跳跃的三维场景高度
});
// 停止跳跃
marker.stopJump();
// 2.闪烁动画(缓慢放大后缩小)
marker.flash({
times: 20,
duration: 1,
scale: 1.5,
});
marker.stopFlash();
// 3.更换图片
marker.url = '新图片url';
// 4.动态更改标注内容
marker.text = 'new content'
// 5.移动图片位置(如果是移动到另外一层,需要自行删除此marker,然后新建立一个到另外一层layer上面)
marker.moveTo({
x: floorLayer.mapCoord.x + 10, // 目标点x在中心点坐标基础上再加10米
y: floorLayer.mapCoord.y + 10, // 目标点y在中心点坐标基础上再加10米
time: 0 // 位移动画时间，单位（秒/s）
})
// 6.支持沿着路径移动
var points = [
{ x: 12683430.372837566, y:2557865.873825156 },
{ x:12683449.227296317, y: 2557858.790532097 },
{ x: 12683474.629938643, y: 2557870.3107861327 }
]
marker.movePath({
path: points,
offsetHeight: 3,
speed: 3,
loop: true,
})
// 7.如果配置了angle属性，则可已通过以下两种方法改变marker角度:
marker.angle = angle; // 方法1：直接设置角度旋转
marker.rotateTo(angle) // 方法2：有过渡效果的旋转
// 如需配置过渡时间，则angle为一个对象，配置如下
var angle = {
to: 150, // 单位(度/°)
time: 1 // 1秒,默认为0.3秒
}
// 8.设置标注隐藏，不显示
marker.visible = false;
// 9.文字标注发光
marker.glow('#FFFFFF');
// 10.设置文字样式
marker.updateTextStyle({
fontSize: 15,
fillStyle: "#FF0000",
strokeStyle: "#00FF00",
strokeWidth: 6,
})
// 11.设置高度
marker.setHeight(20);
// 12.设置大小
marker.setSize({
width: 200,
height: 200,
})
// 13.设置颜色
marker.setColor("#FF0000");
// 14.恢复颜色
marker.setColor(false);
// 15.设置比例
marker.setScale(2);
// 16.设置透明度
marker.setAlpha(0.2);
2.纯文字标注创建
map.on('loadComplete',function(){
var floorLayer = building.getFloor(1) // 通过层数获取楼层对象
var marker = new esmap.ESTextMarker({
height: 3,
text: "测试标签2",
showLevel: 20,
textStyle: {
fontSize: 14,
fillStyle: '#FFFFFF', //填充色
strokeWidth: 4, //边框厚度
strokeStyle: '#000000', //边框色
shadowBlur: 3, //阴影
shadowColor: '#000000', //阴影颜色
}
x: map.center.x,
y: map.center.y,
});
layer.addMarker(marker); // 将文字标注添加到图层
floorLayer.addLayer(layer); // 将图层添加到楼层对象
})
3.纯图片标注创建
map.on('loadComplete',function(){
var floorLayer = building.getFloor(1) // 通过层数获取楼层对象
var marker = new esmap.ESTextMarker({
image: 'image/user.png',
scale: 2,
showLevel: 20,
height: 3,
id: 1,
name: 'myMarker',
x: map.center.x,
y: map.center.y,
});
layer.addMarker(marker); // 将图片标注添加到图层
floorLayer.addLayer(layer); // 将图层添加到楼层对象
})