便利贴--4{Cesium+js高德地图获取路线路径点--通过转换WGS84和GCJ02实现路径的绘制}

• 直接上代码···

直接上代码···

//导航系统↓
    MSET_GOTOWHERE({ state, commit, dispatch }, val) {
      //本地图使用的是WGS84坐标，而高德使用的是火星坐标GCJ02，所以需要转换参数过去
      // 返回值需要转换为WGS84坐标
      state.navigationStartLngLat = val[0]; //导航起点
      state.navigationEndLngLat = val[1]; //导航终点
      //转换WGS84坐标为GCJ02
      let GCJ02StartLngLat = global.DC.CoordTransform.WGS84ToGCJ02(
        Number(state.navigationStartLngLat[0]),
        Number(state.navigationStartLngLat[1])
      );
      let GCJ02EndLngLat = global.DC.CoordTransform.WGS84ToGCJ02(
        Number(state.navigationEndLngLat[0]),
        Number(state.navigationEndLngLat[1])
      );
      // 获取路径，使用的是高德API
      axios
        .get("https://restapi.amap.com/v3/direction/walking", {
          params: {
            origin: `${Number(GCJ02StartLngLat[0]).toFixed(6)},${Number(
              GCJ02StartLngLat[1]
            ).toFixed(6)}`,
            destination: `${Number(GCJ02EndLngLat[0]).toFixed(6)},${Number(
              GCJ02EndLngLat[1]
            ).toFixed(6)}`,
            key: "******************************",
            output: "json",
          },
        })
        .then((res) => {
          //回调
          const paths = res.data.route.paths[0].steps;
          drawALine(paths);
        });

      let drawALine = (paths) => {
        //paths是个道路对象，其中polyline是String类型的经纬度
        let Str = state.navigationStartLngLat.join(",") + ";"; //加入起点
        for (let index = 0; index < paths.length; index++) {
          const path = paths[index];
          let polyline = path.polyline; //取到String类型的经纬度
          let polylineArr = polyline.split(";"); //转为数组
          let polylineArrLength = polylineArr.length; //获取长度，避免多次重复读取polylineArr.length
          for (let k = 0; k < polylineArrLength; k++) {
            let inPolylineArr = polylineArr[k].split(","); //转经纬度为单独的数组
            let outIn = global.DC.CoordTransform.GCJ02ToWGS84(
              //处理火星坐标转换成WGS84  GCJ02ToWGS84
              inPolylineArr[0],
              inPolylineArr[1]
            );
            polylineArr[k] = outIn.join(","); //每组经纬度转为String
          }
          polyline = polylineArr.join(";"); //合并转换后的经纬度合集

          Str += polyline; //自加
          Str += ";";
        }
        Str += state.navigationEndLngLat.join(","); //加入终点
        drawALineLayer(Str); //绘画线路
      };

      //绘画线路
      let drawALineLayer = (Str) => {
        let drawALineLayer = new global.DC.VectorLayer("layer");
        state.mviewer.addLayer(drawALineLayer);
        let polyline = new global.DC.Polyline(Str); //加入绘画点
        polyline.setStyle({
          width: 3,
          material: DC.Color.RED,
          clampToGround: true,
        });
        drawALineLayer.addOverlay(polyline);
        state.drawALineLayer = drawALineLayer;
        commit("cameraSetView", state.navigationStartLngLat); //移动
      };
    },
    //导航系统↑

暂时因为手机移动端看camera.flyTo会出现卡掉直接刷新并最后加载失败的问题 ，直接用camera.setView去移动，估计是消耗小了···

 //直接移动
    cameraSetView(state, data) {
      state.mviewer.camera.setView({
        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
        // fromDegrees()方法，将经纬度和高程转换为世界坐标
        destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
          // 114.0351,
          // 27.6314,
          // 200.0
          data[0] + 0.0,
          data[1] + 0.00028,
          data[2] || 300
        ),
        orientation: {
          heading: global.DC.Namespace.Cesium.Math.toRadians(
            state.dimensionData.heading
          ),
          pitch: global.DC.Namespace.Cesium.Math.toRadians(
            state.dimensionData.pitch
          ),
          // heading: data.heading,
          // pitch: data.pitch,
          roll: state.dimensionData.roll,
        },
      });
    },