+

liuyg

2022-01-17 a3fadb577e4d18c1d7ff60e23be4f3d27f63b9a3

 src/store/modules/mobile.js

@@ -1,4 +1,5 @@
import $store from "../index";
import axios from "axios";
const mobile = {
  state: {
    mviewer: null, // 地图实体类
@@ -51,6 +52,20 @@

    audioData: null, //语音
    audioState: false, //语音状态

    navigationStartLngLat: "", //导航起点
    navigationEndLngLat: "", //导航终点
    drawALineLayer: null, //导航路径图层
    drawALineLayerIcon: null, //导航路径图层图标
    isOpenDrawALine: false, //是否开启路径
    endPosition: "", //传送终点经纬度--
    isendPosition: false, //传送终点经纬度--感应数据
    routerS: [], //所有路径
    choiceRouterS: 0, //当前选择路径
    showActivity: false, //是否显示活动弹窗

    drawALineLayerMany: null, //活动路线图层
    isOpenDrawALineMany: null, //是否开启活动
  },
  mutations: {
    MSET_VIEWER(state, viewer) {
@@ -222,6 +237,66 @@
      state.tileset = data.tileset;
      state.usetowpointfive = data.usetowpointfive;
    },
    //直接移动
    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,
        },
      });
    },
    //删除路线
    removePolyline(state) {
      if (state.drawALineLayer) {
        state.drawALineLayer.remove();
        state.drawALineLayer = null;
        state.isOpenDrawALine = false;
      }
    },
    removerPolyLineIcon(state) {
      if (state.drawALineLayerIcon) {
        state.drawALineLayerIcon.remove();
        state.drawALineLayerIcon = null;
      }
    },
    removePolylineMany(state) {
      if (state.drawALineLayerMany) {
        state.drawALineLayerMany.remove();
        state.drawALineLayerMany = null;
        state.isOpenDrawALineMany = false;
      }
    },
    //传送终点数据
    set_endPosition(state, data) {
      state.isendPosition = !state.isendPosition;
      state.endPosition = data;
    },
    //传送当前选择的路径
    set_choiceRouterS(state, data) {
      state.choiceRouterS = data;
    },
    //活动窗口是否显示
    set_showActivity(state, data) {
      state.showActivity = data;
    },
  },
  actions: {
    MSET_CREADE({ state, commit, dispatch }) {
@@ -234,7 +309,7 @@
      const nowHeight = Math.ceil(
        state.mviewer.camera.positionCartographic.height
      );
      console.log(data);
      // console.log(data);
      if (state.dimension == "3D") {
        Flys = [
          +data.lntLat[0] + 0.01197,
@@ -321,6 +396,7 @@
        0,
        state.dimensionData.pitch
      );
      // console.log(state.dimension);
      if (state.dimension != "2.5D") {
        // if (true) {
        dispatch("mapFlyTo", {
@@ -331,7 +407,6 @@
          roll: Position.roll,
        });
      } else {
        // console.log(17878);
        state.mviewer.camera.setView({
          // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
          // fromDegrees()方法，将经纬度和高程转换为世界坐标
@@ -353,8 +428,7 @@
            roll: Position.roll,
          },
        });

        !state.MobileWindowsHide || commit("MSET_MOBILEWINDOWSHIDE", false); // 显示弹窗
        commit("MSET_MOBILEWINDOWSHIDE", false); // 显示弹窗
      }
      // })
      commit("MSET_POPUPDOM", popupsDom);
@@ -549,6 +623,7 @@
        },
      });
    },
    //文字转语音控制↓
    MSET_GETAUDIO({ state, commit, dispatch }, val) {
      state.audioData = new window.SpeechSynthesisUtterance();
      state.audioData.text = val;
@@ -569,6 +644,264 @@
        }
      }
    },
    //文字转语音控制↑
    //导航系统↓
    MSET_GOTOWHERE({ state, commit, dispatch }, val) {
      state.routerS = []; //清空存着的路径
      //单条步行
      //本地图使用的是WGS84坐标，而高德使用的是火星坐标GCJ02，所以需要转换参数过去
      // 返回值需要转换为WGS84坐标
      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]),
        Number(state.navigationStartLngLat[1])
      );
      let GCJ02EndLngLat = global.DC.CoordTransform.WGS84ToGCJ02(
        Number(state.navigationEndLngLat[0]),
        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(url, {
          params: { ...data },
        })
        .then((res) => {
          //回调
          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 = (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++) {
          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(","); //加入终点
        if (val.fn) {
          let dataS = {
            //返回数据
            titles: titles,
            Str: Str,
          };
          // console.log(Str);
          state.routerS.push(dataS);
          return val.fn(dataS);
        } else {
          dispatch("MSET_DRAWALINELAYER", Str); //绘画线路
        }
      };
    },
    //导航系统↑
    //绘画线路
    MSET_DRAWALINELAYER({ state, commit, dispatch }, value) {
      let Str = value[0];
      //检查是否存在路线
      commit("removePolyline");
      commit("removePolylineMany");
      let color =
        global.DC.Namespace.Cesium.Color.fromCssColorString("#409EFF");
      let material = new global.DC.PolylineTrailMaterialProperty({
        color: color,
        speed: 10,
      });
      state.drawALineLayer = new global.DC.VectorLayer("lineLayer");
      state.mviewer.addLayer(state.drawALineLayer);

      //如果是添加  给第一个点加入图标 和事件
      if (value[1]) {
        commit("removerPolyLineIcon");
        state.drawALineLayerIcon = new global.DC.VectorLayer("pointLayer");
        state.mviewer.addLayer(state.drawALineLayerIcon);
        let post = Str.split(";")[0].split(",");
        let position = new global.DC.Position(post[0], post[1]);
        let billboard = new global.DC.Billboard(
          position,
          "img/dingwei/dingwei1.png"
        ); //加入绘画点
        billboard.setStyle({
          pixelOffset: { x: 0, y: -17 }, //偏移像素
        });
        //订阅事件
        billboard.on(global.DC.MouseEventType.CLICK, (e) => {
          // console.log(e);
          // return;
          // 定制化窗体
          let position = e.position,
            lntLat = [e.overlay._position._lng, e.overlay._position._lat];
          let windowData = {
            position,
            lntLat,
            query: { ...(value[1] || {}), position, lntLat },
            useJWD: true, //仅使用经纬度
          };
          dispatch("setMobileWindows", windowData);
        });
        state.drawALineLayerIcon.addOverlay(billboard);
      }
      let polyline = new global.DC.Polyline(Str); //加入线
      polyline.setStyle({
        width: 3,
        material: material,
        clampToGround: true,
      });
      state.drawALineLayer.addOverlay(polyline);

      state.isOpenDrawALine = true;
      // commit("cameraSetView", state.navigationStartLngLat); //移动
    },
    //绘画线路活动多条
    MSET_DRAWALINELAYERMANY({ state, commit, dispatch }, value) {
      //检查是否存在路线
      commit("removePolylineMany");
      commit("removePolyline");
      let Strs = value[0];
      let red = global.DC.Namespace.Cesium.Color.fromCssColorString("#FF0000");
      let white = global.DC.Namespace.Cesium.Color.fromCssColorString("#fff");
      let blue = global.DC.Namespace.Cesium.Color.fromCssColorString("#2196F3");
      let material = new global.DC.PolylineTrailMaterialProperty({
        color: red,
        speed: 10,
      });
      let material1 = new global.DC.PolylineImageTrailMaterialProperty({
        color: global.DC.Color(255, 0, 0),
        speed: 60,
        image: "img/icon/right.png",
        repeat: { x: 320, y: 1 },
      });
      let drawALineLayerMany = new global.DC.VectorLayer("manyLinePointLayer");
      state.mviewer.addLayer(drawALineLayerMany);
      //多条线
      for (let k in Strs) {
        let polyline = new global.DC.Polyline(Strs[k].value); //加入绘画点
        polyline.setStyle({
          width: 3,
          material: material1,
          clampToGround: true,
        });
        drawALineLayerMany.addOverlay(polyline);
        // let post = Strs[k].value.split(";")[0].split(",");
        // let position = new global.DC.Position(post[0], post[1]);
        // let Label = new global.DC.Label(position, Strs[k].name);
        // Label.setStyle({
        //   font: "16px sans-serif", // CSS 字体设置
        //   scale: 1, //比例
        //   fillColor: white, //文字颜色
        //   showBackground: true, //是否显示背景
        //   backgroundColor: blue, //背景颜色
        //   // outlineColor: white, //边框颜色
        //   // outlineWidth: 10, //边框大小，
        // });
        // drawALineLayerMany.addOverlay(Label);
      }
      //多个点
      let point = value[1];
      for (let k in point) {
        let post = point[k].value;
        let position = new global.DC.Position(post[0], post[1]);

        let billboard = new global.DC.Billboard(
          position,
          "img/dingwei/dingwei1.png"
        ); //加入绘画点
        billboard.setStyle({
          pixelOffset: { x: 0, y: -17 }, //偏移像素
        });
        //订阅事件
        billboard.on(global.DC.MouseEventType.CLICK, (e) => {
          // console.log(e);
          // return;
          // 定制化窗体
          let position = e.position,
            lntLat = [e.overlay._position._lng, e.overlay._position._lat];
          let windowData = {
            position,
            lntLat,
            query: { ...(value[2] || {}), position, lntLat },
            useJWD: true, //仅使用经纬度
          };
          dispatch("setMobileWindows", windowData);
        });
        drawALineLayerMany.addOverlay(billboard);
        let Labels = new global.DC.Label(position, point[k].name);
        Labels.setStyle({
          font: "16px sans-serif", // CSS 字体设置
          scale: 1, //比例
          fillColor: white, //文字颜色
          showBackground: true, //是否显示背景
          backgroundColor: blue, //背景颜色
          // outlineColor: white, //边框颜色
          // outlineWidth: 1, //边框大小，
          pixelOffset: { x: 0, y: -47 }, //偏移像素
        });
        //订阅事件
        Labels.on(global.DC.MouseEventType.CLICK, (e) => {
          // console.log(e);
          // return;
          // 定制化窗体
          let position = e.position,
            lntLat = [e.overlay._position._lng, e.overlay._position._lat];
          let windowData = {
            position,
            lntLat,
            query: { ...(value[2] || {}), position, lntLat },
            useJWD: true, //仅使用经纬度
          };
          dispatch("setMobileWindows", windowData);
        });
        drawALineLayerMany.addOverlay(Labels);
        // console.log(point[k]);
      }
      state.drawALineLayerMany = drawALineLayerMany;
      state.isOpenDrawALineMany = value[2].name ? value[2].name : true;
      // commit("cameraSetView", state.navigationStartLngLat); //移动
    },
  },
};