+路线导航 单条改成可选路线

liuyg

2022-01-10 5f65206b6703c8a0f30b0606bd7ed8a631761b55

+路线导航  单条改成可选路线

 src/components/mobileCloseRouter/index.vue

@@ -1,10 +1,26 @@
<template>
  <!-- v-show="isOpenDrawALine" -->
  <div
    :class="['mobileCloseRouter', isOpenDrawALine ? 'mobileCloseActive' : '']"
    @click="mobileRouterClose"
  >
    退出导航
  <div class="routers">
    <div
      :class="['mobileCloseRouter', isOpenDrawALine ? 'mobileCloseActive' : '']"
      @click="mobileRouterClose"
    >
      退出导航
    </div>
    <div
      v-for="(item, index) in routerS"
      :key="item.Str"
      :style="{ bottom: 357 + index * 37 + 'px' }"
      :class="[
        'mobileCloseRouterOpen',
        index < lengthS && isOpenDrawALine ? 'mobileCloseActive' : '',
        choiceRouterS == index ? 'mobileCloseActiveOpen' : '',
      ]"
      @click="mobileRouterCloseOpen(item.Str, index)"
    >
      <!-- 路径{{ index + 1 }}：{{ item.titles }} -->
      路径{{ index + 1 }}
    </div>
  </div>
</template>

@@ -13,7 +29,12 @@
export default {
  name: "mobileCloseRouter",
  computed: {
    ...mapGetters(["isOpenDrawALine"]),
    ...mapGetters(["isOpenDrawALine", "routerS", "choiceRouterS"]),
  },
  data() {
    return {
      lengthS: 0,
    };
  },
  watch: {
    isOpenDrawALine() {
@@ -21,16 +42,35 @@
      } else {
      }
    },
    routerS() {
      if (this.routerS.length == 0) {
        this.lengthS = 0;
      }
      setTimeout(() => {
        this.lengthS++;
      }, 200);
    },
  },
  methods: {
    mobileRouterClose() {
      this.$store.commit("removePolyline");
    },
    mobileRouterCloseOpen(Str, index) {
      if (this.choiceRouterS == index) {
        return;
      }
      this.$store.commit("set_choiceRouterS", index);
      this.$store.dispatch("MSET_DRAWALINELAYER", Str);
    },
  },
};
</script>

<style lang="scss" scoped>
.routers {
  width: 0;
  height: 0;
}
.mobileCloseRouter {
  position: fixed;
  width: 80px;
@@ -48,8 +88,30 @@
  color: #fff;
  transition: all 0.5s;
}
.mobileCloseRouterOpen {
  position: fixed;
  // width: 127px;
  width: 80px;
  height: 32px;
  background-color: #fff;
  z-index: 600;
  right: -100px;
  opacity: 0;
  bottom: 357px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 0 0 8px;
  color: #000;
  transition: all 0.5s;
}
.mobileCloseActive {
  right: 0px;
  opacity: 1;
}
.mobileCloseActiveOpen {
  background-color: #409eff;
  color: #fff;
}
</style>

 src/components/mobileWindow/index.vue

@@ -204,11 +204,29 @@
  methods: {
    openOnce(val) {
      let that = this;
      that.routerS = [];
      let once = true;
      if (val == "去这") {
        //定位
        // console.log(this.query.query);
        // that.$store.commit("set_endPosition", this.query.query.lntLat);
        let ints = [[114.039946, 27.628475], that.query.query.lntLat];
        let ints = {
          // start: [114.039946, 27.628475],
          // end: that.query.query.lntLat,
          start: that.query.query.lntLat,
          end: [114.031946, 27.621475],
          type: "driving",
          fn: function (datas) {
            //获取回调路径
            that.routerS.push(datas);
            if (once) {
              once = false;
              //加载第一条线路
              that.$store.commit("set_choiceRouterS", 0);
              that.$store.dispatch("MSET_DRAWALINELAYER", datas.Str);
            }
          },
        };
        that.$store.dispatch("MSET_GOTOWHERE", ints);
      } else if (val == "实景") {
        this.$store.commit(

 src/store/getters.js

@@ -25,6 +25,8 @@
  isOpenDrawALine: (state) => state.mobile.isOpenDrawALine, //是否开启路线
  isendPosition: (state) => state.mobile.isendPosition, //路线导航终点数据改变
  endPosition: (state) => state.mobile.endPosition, //路线导航终点数据
  routerS: (state) => state.mobile.routerS, //所有路径
  choiceRouterS: (state) => state.mobile.choiceRouterS, //当前选择路径
};

const navigation = {

 src/store/modules/mobile.js

@@ -59,6 +59,8 @@
    isOpenDrawALine: false, //是否开启路径
    endPosition: "", //传送终点经纬度--
    isendPosition: false, //传送终点经纬度--感应数据
    routerS: [], //所有路径
    choiceRouterS: 0, //当前选择路径
  },
  mutations: {
    MSET_VIEWER(state, viewer) {
@@ -268,6 +270,10 @@
    set_endPosition(state, data) {
      state.isendPosition = !state.isendPosition;
      state.endPosition = data;
    },
    //传送当前选择的路径
    set_choiceRouterS(state, data) {
      state.choiceRouterS = data;
    },
  },
  actions: {
@@ -619,10 +625,12 @@
    //文字转语音控制↑
    //导航系统↓
    MSET_GOTOWHERE({ state, commit, dispatch }, val) {
      state.routerS = []; //清空存着的路径
      //单条步行
      //本地图使用的是WGS84坐标，而高德使用的是火星坐标GCJ02，所以需要转换参数过去
      // 返回值需要转换为WGS84坐标
      state.navigationStartLngLat = [+val[0][0], +val[0][1]]; //导航起点
      state.navigationEndLngLat = [+val[1][0], +val[1][1]]; //导航终点
      state.navigationStartLngLat = [+val.start[0], +val.start[1]]; //导航起点
      state.navigationEndLngLat = [+val.end[0], +val.end[1]]; //导航终点
      //转换WGS84坐标为GCJ02
      let GCJ02StartLngLat = global.DC.CoordTransform.WGS84ToGCJ02(
        Number(state.navigationStartLngLat[0]),
@@ -633,26 +641,45 @@
        Number(state.navigationEndLngLat[1])
      );
      // 获取路径，使用的是高德API

      let url = "https://restapi.amap.com/v3/direction/walking"; //默认api步行
      let data = {
        origin: `${Number(GCJ02StartLngLat[0]).toFixed(6)},${Number(
          GCJ02StartLngLat[1]
        ).toFixed(6)}`,
        destination: `${Number(GCJ02EndLngLat[0]).toFixed(6)},${Number(
          GCJ02EndLngLat[1]
        ).toFixed(6)}`,
        key: "4b3e1db3211054ce5b466407cbb9d221",
        output: "json",
      };
      let strategyType = [0];
      if (val.type) {
        //切换驾车模式
        url = "https://restapi.amap.com/v3/direction/driving";
        data["strategy"] = 10;
        strategyType = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      }
      // for (let index = 0; index < strategyType.length; index++) {
      // data["strategy"] = strategyType[index];
      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: "4b3e1db3211054ce5b466407cbb9d221",
            output: "json",
          },
        .get(url, {
          params: { ...data },
        })
        .then((res) => {
          //回调
          const paths = res.data.route.paths[0].steps;
          drawALine(paths);
          const paths = res.data.route.paths;
          for (let i = 0; i < paths.length; i++) {
            //多条路线
            drawALine(paths[i]);
          }
          // const paths = res.data.route.paths[0].steps;
          // drawALine(paths, res.data.route.paths[0].strategy);
        });

      let drawALine = (paths) => {
      // }
      let drawALine = (pathsour) => {
        let paths = pathsour.steps;
        let titles = pathsour.strategy;
        //paths是个道路对象，其中polyline是String类型的经纬度
        let Str = state.navigationStartLngLat.join(",") + ";"; //加入起点
        for (let index = 0; index < paths.length; index++) {
@@ -675,28 +702,37 @@
          Str += ";";
        }
        Str += state.navigationEndLngLat.join(","); //加入终点
        drawALineLayer(Str); //绘画线路
      };

      //绘画线路
      let drawALineLayer = (Str) => {
        //检查是否存在路线
        commit("removePolyline");
        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;
        state.isOpenDrawALine = true;
        commit("cameraSetView", state.navigationStartLngLat); //移动
        if (val.fn) {
          let dataS = {
            //返回数据
            titles: titles,
            Str: Str,
          };
          state.routerS.push(dataS);
          return val.fn(dataS);
        } else {
          dispatch("MSET_DRAWALINELAYER", Str); //绘画线路
        }
      };
    },
    //导航系统↑
    //绘画线路
    MSET_DRAWALINELAYER({ state, commit, dispatch }, Str) {
      //检查是否存在路线
      commit("removePolyline");
      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;
      state.isOpenDrawALine = true;
      commit("cameraSetView", state.navigationStartLngLat); //移动
    },
  },
};