// 第一步: 添加定位标注
const locationMarker = new esmap.ESLocationMarker({
url: '../image/avatar.png',
arrow: true, // 是否显示朝向箭头
arrowSize: 90, // 箭头大小
arrowColor: '#50C1E9', // 箭头颜色
// arrowOffset: 1 // 箭头基于圆心偏移量
direction: 90, // 朝向角度
clip: true, // 是否开启圆形裁剪
fixedAngle: true, // 固定角度配置
size: 150, // 定位标注大小
height: 30, // 距离地面的高度
callback:()=>{ // 创建成功后的回调函数
}
});
// 第二步:将定位标注添加到地图场景上
map.addLocationMarker(locationMarker);
// 第三步:再设置定位标注的楼层位置等信息
locationMarker.setPosition({
x: map.center.x, // 坐标
y: map.center.y,
fnum: 1, // 添加到对应的楼层
})
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 是否必填 |
|---|---|---|---|---|---|
| url | 标注的图片资源 | String | —— | —— | 是 |
| arrow | 是否显示朝向箭头 | Boolean | —— | false | 否 |
| arrowColor | 箭头的颜色 | String | —— | #50c1e9 | 否 |
| arrowOffset | 箭头相对圆心的偏移大小 | Number | —— | 0 | 否 |
| direction | 朝向角度 | Number | —— | 0 | 否 |
| clip | 是否开启圆形裁剪 | Boolean | —— | false | 否 |
| fixedAngle | 固定角度配置,开启时跟随视角旋转,关闭时固定不旋转 | Boolean | —— | false | 否 |
| size | 标注的尺寸大小 | Number | —— | auto | 否 |
| height | 标注相对楼层地板的高度 | Number | —— | 0 | 否 |
| callback | 创建完成的回调函数 | Function | —— | —— | 否 |
map.removeLocationMarker(marker) // 单独销毁定位标注
标注支持手动控制显隐:
marker.visible = false // 隐藏标注
marker.visible = true // 显示标注
// 方法1.移动位置(带过渡动画,无法跨楼层)
marker.moveTo({
x: map.center.x + 20, // 新坐标
y: map.center.y + 20,
time: 0 // 位移动画时间,单位(秒/s)
})
// 方法2.移动位置(不带过渡动画,支持跨楼层)
marker.setPosition({
x: map.center.x + 20, // 新坐标
y: map.center.y + 20,
fnum: 1, // 绑定对应楼层
height: 1, // 距离楼层地板的高度
})
marker.setSize(150)
marker.showBound({ // 显示范围
radius:20, // 范围半径
color:'#fff', // 颜色
opacity:0.8, // 透明度
})
marker.hideBound() // 隐藏范围
// 方法1
marker.rotateTo(150)
// 方法2
marker.rotateTo({
angle: 160,
time: 1,
onComplete:()=>{
console.log('旋转完成')
}
})
// 方法3
marker.direction = 180
