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

第一步:新建一个定位标注实例 (以下代码都要在 map.on('loadComplete') 中调用)

var locationMarker = new esmap.ESLocationMarker({
    url: '../image/avatar.png',
    arrow: true,               // 是否显示朝向箭头
    arrowSize: 90,             // 箭头大小
    arrowColor: '#50C1E9',     // 箭头颜色
    // arrowOffset: 1          // 箭头偏移大小
    clip: {                    
        type: 'circle',        // 设置为圆形形状
        strokeColor: '#FFF',   // 边框颜色
        strokeWidth: 3,        // 边框宽度
    },
    fixedAngle: true,          // 是否固定角度
    size: 150,                 // 定位标注大小
    height: 30,                // 距离地面的高度
    callback:()=>{             // 创建成功后的回调函数

    }
});

第二步:添加到三维场景

map.addLocationMarker(locationMarker);

第三步:设置定位标注的位置

locationMarker.setPosition({
    x: map.center.x,     // 坐标
    y: map.center.y,
    fnum: 1,             // 楼层层数
    height: 1            // 距离地面的高度
})

删除定位标注

map.removeLocationMarker(locationMarker)

更新定位标注方向和位置

locationMarker.rotateTo(-40);     // 有过渡效果的更新定位标注方向
locationMarker.direction = -40;   // 改变定位标注的方向
locationMarker.moveTo({
    x: map.center.x + 10,
    y: map.center.y + 10,
    fnum: 1,                      // 楼层层数
    height: 1                     // 离地面的偏移量
    time: 1.5                     // 位移动画时间,单位(秒/s)
});

动态添加箭头、固定角度

locationMarker.arrow = true;      // 显示箭头  默认为false
locationMarker.fixedAngle = true; // 固定角度  默认为false (图标不随三维场景旋转)

标注支持手动控制显隐:

locationMarker.visible = false  // 隐藏标注
locationMarker.visible = true   // 显示标注