Merge branch 'master' of http://192.168.0.105:10010/r/school-web

shuishen

2022-01-12 acb45c731c3ccd0a67061efb4e7bdf4f56005672

 src/store/modules/mobile.js

@@ -1,4 +1,5 @@
import $store from "../index";
import axios from "axios";
const mobile = {
  state: {
    mviewer: null, // 地图实体类
@@ -30,7 +31,7 @@
    },
    // 默认起始点函数
    startPointFn: "",
    dimension: "3D", // 维度
    dimension: "2.5D", // 维度
    dimensionData: {
      // 维度镜头数据
      heading: 0,
@@ -45,6 +46,21 @@
    tilesetLayer: null, //2.5d模型
    usetowpointfive: null,
    tilesetLayer: null, //瀑布流

    vecLayer: null, //3D底图
    cvaLayer: null, //3D底图

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

    navigationStartLngLat: "", //导航起点
    navigationEndLngLat: "", //导航终点
    drawALineLayer: null, //导航路径图层
    isOpenDrawALine: false, //是否开启路径
    endPosition: "", //传送终点经纬度--
    isendPosition: false, //传送终点经纬度--感应数据
    routerS: [], //所有路径
    choiceRouterS: 0, //当前选择路径
  },
  mutations: {
    MSET_VIEWER(state, viewer) {
@@ -111,7 +127,6 @@
    //切换2D和2.5D
    MSET_DIMENSION(state, data) {
      //关闭弹窗

      //3d，2.5d转换事件
      state.dimension = data;
      if (data == "3D") {
@@ -122,25 +137,50 @@
          pitch: -45,
          roll: 0,
        };
        //加载底图
        state.vecLayer = state.mviewer.imageryLayers.addImageryProvider(
          new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            url: " http://t1.tianditu.gov.cn/vec_w/wmts?tk=9ae78c51a0a28f06444d541148496e36",
            type: "wmts",
            layer: "vec",
            style: "default",
            format: "tiles",
            tileMatrixSetID: "w",
            show: true,
            maximumLevel: 18,
          })
        );
        state.cvaLayer = state.mviewer.imageryLayers.addImageryProvider(
          new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            url: " http://t1.tianditu.gov.cn/cva_w/wmts?tk=9ae78c51a0a28f06444d541148496e36",
            type: "wmts",
            layer: "cva",
            style: "default",
            format: "tiles",
            tileMatrixSetID: "w",
            show: true,
            maximumLevel: 18,
          })
        );
        // console.log(1321)
        state.wallLayer.show = false; //关闭瀑布   以及2.5d图形贴片
        state.mviewer.imageryLayers.remove(state.newLayer);
        state.newLayer = null;
        // state.silhouetteBlue.selected = []
        state.tilesetLayer.changesilhouetteBlue(); //清空silhouetteBlue.selected = [];
        // state.tilesetLayer.changesilhouetteBlue(); //清空silhouetteBlue.selected = [];
        // console.log(state.tileset)
        state.tilesetLayer.show = true; //显示3d图形
        state.startPointFn(); //移动默认视角
        // state.mviewer.flyTo(state.tileset);

        //3D视角不限制
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 80;
        // 最大
        state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = 4000000;
        // 设置相机缩小时的速率
        state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 3000;
        state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 10000;
        // 设置相机放大时的速率
        state.mviewer.scene.screenSpaceCameraController._maximumZoomRate = 3000;
        state.mviewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000;
        // 视角平移
        state.mviewer.scene.screenSpaceCameraController.enableRotate = true;
        // 视角缩放
@@ -154,17 +194,22 @@
          pitch: -90,
          roll: 0,
        };
        //取消3D底图
        state.mviewer.imageryLayers.remove(state.vecLayer);
        state.vecLayer = null;
        state.mviewer.imageryLayers.remove(state.cvaLayer);
        state.cvaLayer = null;
        state.tilesetLayer.show = false; //隐藏3d图形
        state.newLayer = state.usetowpointfive(); //添加2.5d图形贴片
        state.wallLayer.show = true; //打开瀑布
        state.wallLayer.show = false; //打开瀑布
        state.startPointFn(); //移动默认视角

        //2.5D视角限制
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 500;
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 0;
        // 最大
        state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = 6000;
        state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = 4000;
        // 设置相机缩小时的速率
        state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 30000;
        // state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 30000;
        // 设置相机放大时的速率
        state.mviewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000;
        // 视角平移
@@ -186,6 +231,49 @@
      state.wallLayer = data.wallLayer;
      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;
      }
    },
    //传送终点数据
    set_endPosition(state, data) {
      state.isendPosition = !state.isendPosition;
      state.endPosition = data;
    },
    //传送当前选择的路径
    set_choiceRouterS(state, data) {
      state.choiceRouterS = data;
    },
  },
  actions: {
@@ -213,20 +301,20 @@
          data.from == "PopupOurOnce"
            ? +data.lntLat[1] - 0.00108
            : +data.lntLat[1] - 0.00048,
          data.from == "PopupOurOnce" ? 0 : 90.648862227,
          data.from == "PopupOurOnce" ? 0 : 30.648862227,
        ];
      } else if (state.dimension == "2.5D") {
        Flys = [
          +data.lntLat[0] + 0.01197,
          +data.lntLat[1] - 0.0001,
          +data.lntLat[1] + 0.00048,
          // +data.lntLat[1] - 0.0022,
          nowHeight,
          // nowHeight,
          360,
        ];
        // console.log(nowHeight);
        clas = [
          data.from == "PopupOurOnce" ? +data.lntLat[0] : +data.lntLat[0],
          data.from == "PopupOurOnce"
            ? +data.lntLat[1] - 0.00108
            : +data.lntLat[1],
          data.from == "PopupOurOnce" ? +data.lntLat[1] : +data.lntLat[1],
          // data.from == 'PopupOurOnce' ? +data.lntLat[1] - 0.00108 : +data.lntLat[1] - 0.00048,
          // data.from == 'PopupOurOnce' ? 0 : 90.648862227
          data.from == "PopupOurOnce" ? 0 : 0,
@@ -286,21 +374,51 @@
        0,
        state.dimensionData.pitch
      );
      dispatch("mapFlyTo", {
        //飞入
        lntLat: [Position.lng, Position.lat, Position.alt],
        heading: Position.heading,
        pitch: Position.pitch,
        roll: Position.roll,
      });
      // console.log(state.dimension);
      if (state.dimension != "2.5D") {
        // if (true) {
        dispatch("mapFlyTo", {
          //飞入
          lntLat: [Position.lng, Position.lat, Position.alt],
          heading: Position.heading,
          pitch: Position.pitch,
          roll: Position.roll,
        });
      } else {
        state.mviewer.camera.setView({
          // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
          // fromDegrees()方法，将经纬度和高程转换为世界坐标
          destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
            // 114.0351,
            // 27.6314,
            // 200.0
            Position.lng - 0.012,
            Position.lat,
            Position.alt || 15000.0
          ),
          orientation: {
            heading: global.DC.Namespace.Cesium.Math.toRadians(
              Position.heading
            ),
            pitch: global.DC.Namespace.Cesium.Math.toRadians(Position.pitch),
            // heading: data.heading,
            // pitch: data.pitch,
            roll: Position.roll,
          },
        });
        commit("MSET_MOBILEWINDOWSHIDE", false); // 显示弹窗
      }
      // })
      commit("MSET_POPUPDOM", popupsDom);
    },
    closeMobileWindowsDom({ state, commit }) {
    closeMobileWindowsDom({ state, commit, dispatch }) {
      if (!state.MobileWindowsHide && state.popupsDom) {
        state.popupsDom.closeOur();
        commit("MSET_MOBILEWINDOWSHIDE", true);
      }
        if (state.audioData) {
          dispatch("MSET_GETAUDIOBEGIN", "notOpen");
        }
      } //cancel
    },
    CHANGETOC3({ state, commit }, data) {
      // //转换经纬度坐标 成世界坐标cartesian3
@@ -483,6 +601,144 @@
        },
      });
    },
    //文字转语音控制↓
    MSET_GETAUDIO({ state, commit, dispatch }, val) {
      state.audioData = new window.SpeechSynthesisUtterance();
      state.audioData.text = val;
      state.audioData.onstart = function (e) {
        state.audioState = true;
      };
      state.audioData.onend = function (event) {
        state.audioState = false;
      };
    },
    MSET_GETAUDIOBEGIN({ state, commit, dispatch }, val) {
      if (state.audioState) {
        window.speechSynthesis.cancel();
        state.audioState = false;
      } else {
        if (val != "notOpen") {
          window.speechSynthesis.speak(state.audioData);
        }
      }
    },
    //文字转语音控制↑
    //导航系统↓
    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,
          };
          state.routerS.push(dataS);
          return val.fn(dataS);
        } else {
          dispatch("MSET_DRAWALINELAYER", Str); //绘画线路
        }
      };
    },
    //导航系统↑
    //绘画线路
    MSET_DRAWALINELAYER({ state, commit, dispatch }, Str) {
      //检查是否存在路线
      commit("removePolyline");
      let color =
        global.DC.Namespace.Cesium.Color.fromCssColorString("#409EFF");
      let material = new global.DC.PolylineTrailMaterialProperty({
        color: color,
        speed: 10,
      });
      let drawALineLayer = new global.DC.VectorLayer("layer");
      state.mviewer.addLayer(drawALineLayer);
      let polyline = new global.DC.Polyline(Str); //加入绘画点
      polyline.setStyle({
        width: 3,
        material: material,
        clampToGround: true,
      });
      drawALineLayer.addOverlay(polyline);
      state.drawALineLayer = drawALineLayer;
      state.isOpenDrawALine = true;
      // commit("cameraSetView", state.navigationStartLngLat); //移动
    },
  },
};