Cesium结合高德SDK路径规划

Cesium结合高德SDK路径规划

申请高德SDK的使用

链接: 点这里
按官网的提示申请，具体流程这里就不在赘述了。
路径规划API:点这里

注意：其中的sig签名：点这里
![在这里插入图片描述](https://img-blog.csdnimg.cn/aef7ef0464024edfa2f9fbaec54ada61.png

有两则注意的地方一：参数要按照字母的升序排列，并且还需要md5加密

const modelRef = reactive({
    key: '',
    origin: '',
    destination: '',
    show_fields: 'polyline' //返回路径经纬度 方便画线
})
const APPsign = '' //秘钥
let obj: any = {}
for (const key in modelRef) {
     if (Object.prototype.hasOwnProperty.call(modelRef, key)) {
         const element = (modelRef as any)[key]
         if (element) obj[key] = element
     }
 }
 let arr: any[] = Object.keys(obj).sort()
 let sigList: any[] = []
 arr.forEach((item: any) => {
     sigList.push(item.trim() + "=" + obj[item]);
 })
 obj.sig = md5(sigList.join('&') + APPsign)

接收请求数据格式

• 接口地址：https://restapi.amap.com/v5/direction/walking

接口请求回来的数据格式官网也有说明。

 gdApiWalking({ ...obj }).then((res: any) => {
   const { info, infocode } = res
    if (info === 'OK' && infocode === '10000') {
        const { route: { paths } } = res
        const { steps, cost: { duration }, distance } = paths[0]
        console.log(steps)
        let arr: string[] = []
        steps.forEach((item: any) => {
            let lines = item.polyline.split(';')
            if (arr.length === 0) arr = arr.concat(lines)
            else {
                lines.forEach((line: string) => {
                    if (!arr.some((i: string) => { i === line })) {
                        arr.push(line)
                    }
                })
            }
        })
        let arr1: number[] = []
        arr1 = arr.map(i => i.split(",").map(j => Number(j))).flat()
        console.log(Cesium.Cartesian3.fromDegreesArray(arr1.flat())) //cesium需要的画线坐标
    }
})

最后的成果：