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

三维可视化场景绘制定位标注

定位标注支持显示箭头方向和定位范围，更加适用于导航场景
在线演示访问地址：创建定位标注示例

创建定位标注实例

必须要触发"map.on('loadComplete')"场景加载完成后的时机调用

// 第一步: 添加定位标注
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,                    // 添加到对应的楼层
})

ESLocationMarker参数说明:

参数	说明	类型	可选值	默认值	是否必填
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