1三维场景模拟导航开发支持-室内园区城市三维可视化引擎室内导航及制作|易景空间三维可视化云平台ESMap

三维可视化场景模拟导航

根据路径规划结果，进行第一人称或第三人称的模拟导航
在线演示访问地址：模拟导航示例

创建导航对象实例

必须要触发"map.on('loadComplete')"场景加载完成后的时机调用包括导航对象实例创建，起点终点选择，画导航线等等。(同路径规划步骤相同)

// 第一步：初始化导航对象
const navi = new esmap.ESNavigation({
    locationMarkerUrl: './image/pointer.png', // 定位标注图片地址
    locationMarkerSize: 150,                  // 定位标注图片大小
    locationMarkerSeeThough: true,            // 定位标注图片穿透显示
    speed: 5,             // 模拟导航速度
    maxEnd: 5,            // 距离终点多少米时结束导航(单位: 米/m)
    followAngle: true,    // 三维场景视角是否跟随旋转方向
    followPosition: true, // 三维场景视角是否跟随位置移动
    followGap: 3,         // 导航视角跟随间隔(单位: 秒/s)
    scaleAnimate: true,   // 模拟导航时是否自动缩放及移动到合适视角
    tiltAngle: 30,        // 模拟导航时的倾斜角
    audioPlay: true,      // 是否开启语音播报
    offsetHeight: 1,      // 模拟导航时定位标注距离地面的高度
    ladderType: 1,        // 跨层方案选择(其他选项参考下表)  
    tipDistance: 3,       // 拐弯处提前多少米播报转弯语音(单位: 米/m)
    reRouteDis: 10,       // 偏差多少米就进行重新路径规划(单位: 米/m)
    linkStartEnd: false,  // 设置导航时起点终点是否连接导航线
    showMultiFloor: true  // 第三人称导航时是否展示多楼层 （2024-04-18新增加参数）
});

// 第二步：确定起点和终点

// 确定起点
navi.setStartPoint({
    name: '起点1',
    x: map.center.x + 10,
    y: map.center.y + 10,
    fnum: 1,         // 楼层
    height: 10,      // 起点距离地面的高度
    url: './image/start.png', // 图片路径,
    size: 64,        // 图片尺寸
    showLevel: 23,   // 到达三维场景缩放等级隐藏导航对象
    // text: '起点位置', // 场景中展示的文字内容
    // textStyle:{
        // fontSize: 20,           // 字体大小
        // fillStyle: '#ff0000',   // 填充色
    // }
    // imageStyle:{
        // align:'bottom'   // 图片位置
        // scale: 1,        // 单独设置图片缩放比例
    // },
    // renderOrder: 79,     // 渲染等级
    // pickable: false,     // 是否可被点击
    // callback: (marker)=> {
        // console.log(marker)    // 输出起点实例
    // }
});

// 确定终点
navi.setEndPoint({
    name: '终点1',
    x: map.center.x - 10,
    y: map.center.y - 10,
    fnum: 1,
    height: 10,
    url: './image/end.png',
    size: 64,
    showLevel: 23,
    // text: '终点位置', 
    // textStyle:{
        // fontSize: 20,           
        // fillStyle: '#ff0000',   
    // }
    // imageStyle:{
        // align:'bottom' 
        // scale: 1, 
    // },
    // renderOrder: 79,
    // pickable: false, 
    // callback: (marker)=> {
        // console.log(marker)
    // }
});

// 第三步：绘制导航线
navi.getRouteResult({
    drawRoute: true,
})

// 第四步完成：根据导航的模式选择语音播报，导航开始
if( navi.mode == 1 ){
    map.ESAudioTool.playSoundByName('startNaving')    // 开始步行导航
}else{
    map.ESAudioTool.playSoundByName('startCarNaving') // 开始车行导航
}
// 导航开始
navi.simulate();

ESNavigation参数说明:

参数	说明	类型	可选值	默认值	是否必填
map	三维场景对象，默认当前的三维场景对象	——	——	——	否
locationMarkerUrl	定位标注图片地址(开启导航轨迹的时候才会显示的标注图片)	String	——	——	否
locationMarkerSize	定位标注图片尺寸大小	Number	——	——	否
locationMarkerSeeThough	定位标注图片是否穿透显示	Boolean	——	false	否
speed	模拟导航速度	Number	——	4	否
maxEnd	离终点多少米时候就结束导航(单位: 米/m)	Number	——	2	否
followAngle	三维场景是否跟随旋转	Boolean	——	false	否
followPosition	三维场景视角是否跟随位置	Boolean	——	false	否
followGap	导航视角跟随间隔(单位: 秒/s,followPosition为true时有效)	Number	——	3	否
scaleAnimate	模拟导航时是否自动缩放及移动到合适视角(followPosition为true时有效)	Boolean	——	true	否
tiltAngle	模拟导航时的倾斜角	Number	——	80	否
audioPlay	是否开启语音播报	Boolean	——	false	否
scaleLevel	模拟导航时三维场景的缩放等级	Number	——	1	否
mode	导航模式	Number	1 (人行)2 (车行)	1	否
offsetHeight	模拟导航时定位标注距离地面的高度	Number	——	1	否
ladderType	跨层方案选择	Number	1 (距离最近)2 (电梯)3 (楼梯)4 (扶梯)	1	否
tipDistance	拐弯处提前多少米播报转弯语音(单位: 米/m)	Number	——	6	否
reRouteDis	偏差多少米就进行重新路径规划(单位: 米/m)	Number	——	——	否
linkStartEnd	设置导航时起点终点是否连接导航线	Boolean	——	true	否
lineStyle	路径规划线样式配置	Object	——	——	否
showMultiFloor	第三人称导航时是否展示多楼层（2024-04-18新增加参数）	Boolean	——	false	否

导航的常用方法：

navi.pause = true;  // 暂时停止导航

navi.pause = false; // 继续导航

navi.stop()         // 停止导航

navi.clearAll()     // 清空所有有关模型与效果

navi.reset()        // 重新规划导航路线，建议先调用stop方法停止导航再调用reset方法

// 绘制导航路线，如果修改了起点或者终点,必须重新调用getRouteResult方法
navi.getRouteResult({
    drawRoute: true,
}) 

navi.simulate();    // 模拟导航开始

针对导航的监听事件：

监听路径规划成功事件

navi.on('success', function(){
    // 路径规划成功
});

监听路径规划失败事件

navi.on('error', function(){
    // 路径规划失败
});

监听导航进行中事件

navi.on('walking', function(data){
    // data为模拟导航数据
    console.log(data)
});

在行走过程中打印的数据日志


    {
        "remain": 11.228550348100331,   //还剩余多少距离
        "walk": 5.997480000648615,      //已经走的距离
        "distanceToNext": 3.063522710961344,  //离下一个转弯点剩余多少距离
        "angle": 26.964873807185032,          //当前角度
        //当前坐标
        "point": {
            "fnum": 1,
            "x": 12683475.861041496,
            "y": 2557872.88830583,
            "z": 0,
            "bid": "test666"
        },
        "linesProgress": 0.3487981930444608,
        "pIndex": 0,
        "index": 0,
        "isReal": true,
        "descriptionIndex": 0,
        "offset": 0,
        "nexbid": null,      //要去的下一个建筑编号
        "nexfnum": null,    //要去的下一个建筑楼层
        "disToNexBid": null,      //要去的下一个建筑距离
        "disToNexFnum": null,     //要去的下一个建筑楼层距离
        "crossing": false
    }

监听导航完成事件

navi.on('complete',function(){
    console.log('模拟导航结束')
});

监听导航提示事件

navi.on('naviTip',function(message){
    // 导航提示回调
});

监听跨楼层事件

navi.on('crossFloor', function (e) {
    // e为楼层号
    console.log(e)
});

监听重新规划路径事件

navi.on('reRouting',function(){
    // 重新规划路径
});