三维可视化场景路径规划 ESMap路径规划功能支持在有导航数据的三维场景中,根据起点和终点规划最短路径的功能

第一步,创建导航对象实例 (以下代码都要在 map.on('loadComplete') 中调用)

// 初始化导航对象
var navi = new esmap.ESNavigation({
    lineStyle: {             // 路径规划线样式配置
        color: '#33cc61',         // 导航线颜色
        lineType: esmap.ESLineType.ESARROW, // 设置导航线样式      
        lineWidth: 6,             // 设置导航线的宽度
        offsetHeight: 0.5,        // 设置导航线的高度
        smooth: true,             // 设置导航线的转角线平滑效果
        seeThrough: false,        // 设置导航线的穿透楼层地板总是显示的效果
        noAnimate: false,         // 设置导航线的动画效果
        godEdgeColor: '#920000',  // 设置边线的颜色
        godArrowColor: '#ff0000'  // 设置箭头颜色
    },
});

更多lineType导航线样式可参考 绘制线标注 页面

第二步,确定起点和终点位置

// 通过楼层名称来获取三维场景内部层数
var building = map.getBuilding();//获取Building对象方式1
var building = map.getBuildingById('test666');//获取Building对象方式2
var fnum = building.getFloorNumByName('F1'); 

// 确定起点
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:{
        // scale: 1,   // 单独设置图片缩放比例
    // },
    // 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:{
        // scale: 1,   
    // },
    // callback: (marker)=> {
        // console.log(marker) 
    // }
});

第三步,调用导航对象画线函数,显示路径规划路线

navi.getRouteResult({
    drawRoute: true,
})

高级功能

获取三维场景里面建筑所有导航点线数据

var allroad_data = building.naviData;

获取路径规划结果集合

var roads = navi.outcome;

获取路径规划提示信息

var prompt = navi.naviDescriptions;

监听导航规划结果事件

navi.on('checkStatus',function(e){
    console.log(e);   // e参数返回1和0,代表路径规划成功和失败
});