cesium 实战010--路线规划（基于百度地图api路线规划能力）

小垃圾gg

已于 2024-09-12 09:18:33 修改

阅读量548

点赞数 3

文章标签：前端 vue.js javascript 开发语言

于 2024-09-12 09:18:00 首次发布

本文链接：https://blog.csdn.net/weixin_47907069/article/details/142165509

版权

路线规划交互功能

点击地图点位数据，出现导航弹框，点击导航按钮，实现路线规划，并将路程的耗时、距离、路况等信息展示出来。

效果图

在这里插入图片描述

代码

  采用百度地图的api-路线规划接口，获取路线数据。
  由于百度地图是bd09坐标系，Cesium是wgs84坐标系，使用时需要转换成相同的坐标系

    //导航路线
    getDaohang(data) {
      let that = this
      if (this.DaohangPrimitive) {
        this.webGlobe.scene.primitives.remove(that.DaohangPrimitive)
      }
      let origin = gws84().wgs84togcj02(data.data.driving.split(",")[0], data.data.driving.split(",")[1])
      origin = gws84().gcj02tobd09(origin.lng, origin.lat)
      let obj = {
        destination:start.lat + "," + start.lng ,
        origin: origin.lat + "," + origin.lng,
        ak: "百度ak",
      }
      const instances = []
      driving(obj).then(res => {
       //获取路况信息
        let trafficConditionList={
          '0':'无路况',
          '1':'畅通',
          '2':'缓行',
          '3':'拥堵',
          '4':'严重拥堵',
        }
        res["data"]["result"]["routes"][0]['traffic_conditionName']=trafficConditionList[res["data"]["result"]["routes"][0]['traffic_condition']]
        this.bus.$emit("daohangData",res["data"]["result"]["routes"][0] )
        //绘制路线
        res["data"]["result"]["routes"][0].steps.forEach((ele, i) => {
          let arr1 = []
          ele["path"].split(";").forEach(e => {
            let center = gws84().bd09togcj02(e.split(",")[0], e.split(",")[1])
            center = gws84().gcj02towgs84(center.lng, center.lat)
            arr1.push(center.lng)
            arr1.push(center.lat)
          })
          // console.log(arr1)
          const polyline = new Cesium.PolylineGeometry({
            positions: Cesium.Cartesian3.fromDegreesArray(arr1),
            width: that.option.lineStrokeWeight || 2,
            vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
          })
          const polygon = new Cesium.GeometryInstance({
            geometry: polyline,
            id: i,
          })
          instances.push(polygon)
        })
        const material = new Cesium.Material({
          fabric: {
            // type: "Spriteline1",
            type: "Color",
            uniforms: {
              color: Cesium.Color.fromCssColorString(that.option.lineColor),
              speed: that.option.lineStrokespeed || 0,
            },
          },
        })

        that.DaohangPrimitive = that.webGlobe.scene.primitives.add(
          new Cesium.Primitive({
            geometryInstances: instances,
            appearance: new Cesium.PolylineMaterialAppearance({
              flat: true,
              material: material,
            }),
          }),
        )
      })
    },