绘制路径规划实例

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

// 第一步：初始化导航对象(navi只能全局唯一，不能多次new)
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'  // 设置箭头颜色
    },
});

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

// 确定起点
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,
})

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

路径规划常用方法

---

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

const allroad_data = building.naviData;

获取路径规划结果合集

const roads = navi.outcome;

获取路径规划提示信息

const prompt = navi.naviDescriptions;

监听导航规划结果事件

navi.on("success", function (e) {
    console.log(e,"路线规划成功");
})

navi.on("error", function (e) {
    console.log(e,"路线规划失败");
})