++

liuyg

2022-03-05 01f9c88fd0ee768155e5b341c2bb95a85bc11a08

 src/store/modules/mobile.js

@@ -1,7 +1,10 @@
import $store from "../index";
import axios from "axios";

import urlParameter from './mobiles/urlParameter'
const mobile = {
  state: {
    ...urlParameter.state, //url参数
    mviewer: null, // 地图实体类
    mBigPopup: false, // 全屏弹窗
    popupOurOpenData: [], // 全屏弹窗中下拉菜单数据
@@ -38,6 +41,8 @@
      pitch: -90,
      roll: 0,
    },
    zoomRange: [80, 200], //缩放程度
    frislayertHeight: 160, //默认弹窗高度
    perspectiveControl: "", //视角控制：高度、角度  ()=>{}
    perspectiveControls: "", //视角控制：高度、角度  ()=>{}

@@ -47,6 +52,11 @@
    usetowpointfive: null,
    tilesetLayer: null, //瀑布流
    areaLayer: null, //2.5d事件--绿色图层
    select: {
      //绿色图层控制显示
      overlay: undefined,
      color: undefined,
    },

    vecLayer: null, //3D底图
    cvaLayer: null, //3D底图
@@ -63,12 +73,17 @@
    isendPosition: false, //传送终点经纬度--感应数据
    routerS: [], //所有路径
    choiceRouterS: 0, //当前选择路径

    showActivity: false, //是否显示活动弹窗
    showActivityData: {}, //活动内容

    drawALineLayerMany: null, //活动路线图层
    drawAPointLayerMany: null, //活动点图层
    isOpenDrawALineMany: null, //是否开启活动
    seeRight: true, //右侧控制栏显影
  },
  mutations: {
    ...urlParameter.mutations, //url参数
    MSET_VIEWER(state, viewer) {
      state.mviewer = viewer;
    },
@@ -130,6 +145,14 @@
    //         state[state.pointLayerData.layer].show = false
    //     }
    // },
    //送入移动端缩放范围
    set_zoomRange(state, data) {
      state.zoomRange = data;
    },
    //送入默认弹窗高度
    set_frislayertHeight(state, data) {
      state.frislayertHeight = data;
    },
    //切换2D和2.5D
    MSET_DIMENSION(state, data) {
      //关闭弹窗
@@ -195,28 +218,57 @@
        // 视角旋转
        state.mviewer.scene.screenSpaceCameraController.enableTilt = true;
      } else if (data == "2.5D") {
        console.log("2.5");
        state.dimensionData = {
          // 维度镜头数据
          heading: 0,
          pitch: -90,
          roll: 0,
          // heading: global.DC.Namespace.Cesium.Math.toRadians(-9),
          // pitch: global.DC.Namespace.Cesium.Math.toRadians(-34.54),
          // roll: 0,
        };
        //取消3D底图
        state.mviewer.imageryLayers.remove(state.vecLayer);
        state.vecLayer = null;
        state.mviewer.imageryLayers.remove(state.cvaLayer);
        state.cvaLayer = null;
        // state.mviewer.imageryLayers.remove(state.vecLayer);
        // state.vecLayer = null;
        // state.mviewer.imageryLayers.remove(state.cvaLayer);
        // state.cvaLayer = null;
        //加载底图
        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,
          })
        );
        state.tilesetLayer.show = false; //隐藏3d图形
        state.newLayer = state.usetowpointfive(); //添加2.5d图形贴片
        state.wallLayer.show = false; //打开瀑布
        state.startPointFn(); //移动默认视角
        state.areaLayer.show = true; //绿布
        //2.5D视角限制
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 0;
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = state.zoomRange[0];
        // 最大
        state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = 4000;
        state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = state.zoomRange[1];
        // 设置相机缩小时的速率
        // state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 30000;
        state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 2000;
        // 设置相机放大时的速率
        state.mviewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000;
        // 视角平移
@@ -289,6 +341,15 @@
        state.drawALineLayerMany = null;
        state.isOpenDrawALineMany = false;
      }
      if (state.drawAPointLayerMany) {
        state.drawAPointLayerMany.remove();
        state.drawAPointLayerMany = null;
        state.isOpenDrawALineMany = false;
      }
    },
    //显影线路或者点
    showLineOrPoint(state, val) {
      state[val.layer].show = val.flag;
    },
    //传送终点数据
    set_endPosition(state, data) {
@@ -302,19 +363,44 @@
    //活动窗口是否显示
    set_showActivity(state, data) {
      state.showActivity = data;
      if (data.state) {
        state.showActivityData = data.value;
        state.showActivity = data.state;
      } else {
        state.showActivityData = {};
        state.showActivity = data.state;
      }
    },
    mset_changeSelect(state, data) {
      state.select.overlay = data[0];
      state.select.color = data[1];
    },
    SET_SeeAndNotSee(state, data) {
      state.seeRight = data;
    },
  },
  actions: {
    MSET_CREADE({ state, commit, dispatch }) {
    ...urlParameter.actions, //url参数
    MSET_CREADE({
      state,
      commit,
      dispatch
    }) {
      state.pointLayer = new global.DC.VectorLayer("pointLayer"); // 创建图标实体类
      state.mviewer.addLayer(state.pointLayer); // 添加到地图
    },
    setMobileWindows({ state, commit, dispatch }, data) {
    setMobileWindows({
      state,
      commit,
      dispatch
    }, data) {
      // 打开随地图移动窗口
      let clas, Flys;
      const nowHeight = Math.ceil(
        state.mviewer.camera.positionCartographic.height
      );
      // 传递响应数据
      commit("MSET_QUERY", data);
      // console.log(data);
      if (state.dimension == "3D") {
        Flys = [
@@ -326,9 +412,9 @@
        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] - 0.00108
            : +data.lntLat[1] - 0.00048,
          data.from == "PopupOurOnce" ?
          +data.lntLat[1] - 0.00108 :
          +data.lntLat[1] - 0.00048,
          data.from == "PopupOurOnce" ? 0 : 30.648862227,
        ];
      } else if (state.dimension == "2.5D") {
@@ -337,7 +423,7 @@
          +data.lntLat[1] + 0.00048,
          // +data.lntLat[1] - 0.0022,
          // nowHeight,
          360,
          state.frislayertHeight,
        ];
        // console.log(nowHeight);
        clas = [
@@ -360,8 +446,7 @@
        );
        data.position = ellipsoid.cartographicToCartesian(cartographic);
      }
      // 传递响应数据
      commit("MSET_QUERY", data);

      // 定制化窗体
      const popupsDom = new global.DC.mobileDivForms(state.mviewer, {
        domId: "mobilePopup",
@@ -402,8 +487,24 @@
        0,
        state.dimensionData.pitch
      );
      if (!state.MobileWindowsHide) {
        //关闭弹窗
        commit("MSET_MOBILEWINDOWSHIDE", true);
      }
      if (
        state.select.overlay != undefined &&
        data.query.fromTo != "mapClick"
      ) {
        //关闭绿色边框
        state.select.overlay.setStyle({
          material: state.select.color,
          outline: false,
        });
        commit("mset_changeSelect", [undefined, undefined]);
      }
      // console.log(state.dimension);
      if (state.dimension != "2.5D") {
        // if (true) {
        // if (true) {
        dispatch("mapFlyTo", {
          //飞入
@@ -413,33 +514,45 @@
          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,
          },
        dispatch("mapFlyTo", {
          //飞入
          lntLat: [Position.lng, +Position.lat - 0.0003, Position.alt],
          heading: Position.heading,
          pitch: Position.pitch,
          roll: Position.roll,
        });
        commit("MSET_MOBILEWINDOWSHIDE", false); // 显示弹窗
        // 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 - 0.0003,
        //     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, dispatch }) {
    closeMobileWindowsDom({
      state,
      commit,
      dispatch
    }) {
      commit("CLOSE_NOWPOSITION"); //中断定位获取
      if (!state.MobileWindowsHide && state.popupsDom) {
        state.popupsDom.closeOur();
        commit("MSET_MOBILEWINDOWSHIDE", true);
@@ -448,7 +561,10 @@
        }
      } //cancel
    },
    CHANGETOC3({ state, commit }, data) {
    CHANGETOC3({
      state,
      commit
    }, data) {
      // //转换经纬度坐标 成世界坐标cartesian3
      var ellipsoid = state.mviewer.scene.globe.ellipsoid;
      var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
@@ -459,7 +575,10 @@
      var position = ellipsoid.cartographicToCartesian(cartographic);
      return position;
    },
    SET_OPENWIDOWFIXED({ state, commit }, data) {
    SET_OPENWIDOWFIXED({
      state,
      commit
    }, data) {
      // 传递响应数据
      commit("MSET_QUERY", data);
      // 显示窗口
@@ -475,7 +594,10 @@
        )
      );
    },
    CLOSE_WIDOWFIXED({ state, commit }) {
    CLOSE_WIDOWFIXED({
      state,
      commit
    }) {
      // 隐藏窗口
      if (!state.MobileWindowsHideFixed) {
        console.log(state.MobileWindowsHideFixed);
@@ -483,9 +605,16 @@
      }
    },
    // 加入当时的选点
    JOIN_POINT({ state, commit }, data) {},
    JOIN_POINT({
      state,
      commit
    }, data) {},
    // flyTo
    mapFlyTo({ state, commit, dispatch }, data) {
    mapFlyTo({
      state,
      commit,
      dispatch
    }, data) {
      state.mviewer.camera.flyTo({
        destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
          data.lntLat[0] - 0.012,
@@ -500,21 +629,21 @@
          // pitch: data.pitch,
          roll: data.roll,
        },
        duration: 1.5, // 定位的时间间隔
        duration: 1, // 定位的时间间隔
        complete: () => {
          // 完成后的回调
          if (data.fn) {
            // 自定义回调
            setTimeout(() => {
              data.fn();
            }, 500);
            }, 200);
          }
          if (!data.noOpen) {
            setTimeout(() => {
              // dispatch("MSET_POINTDATA", data.lntLat);//传入标记点
              !state.MobileWindowsHide ||
                commit("MSET_MOBILEWINDOWSHIDE", false); // 显示弹窗
            }, 0);
            }, 100);
          }
        },
      });
@@ -549,7 +678,11 @@
      // });
    },
    // 飞入点加入位置
    MSET_POINTDATA({ state, commit, dispatch }, data) {
    MSET_POINTDATA({
      state,
      commit,
      dispatch
    }, data) {
      // 加入坐标
      const positions = new global.DC.Position(
        data[0] - 0.0119,
@@ -565,12 +698,18 @@
      billboard.on(DC.MouseEventType.CLICK, (e) => {
        // 定制化窗体
        console.log(e);
        const query = { name: "选择点" };
        const query = {
          name: "选择点"
        };
        const intLat = [e.wgs84Position.lng, e.wgs84Position.lat];
        const d = {
          position: null,
          lntLat: intLat,
          query: { ...(query || {}), introduce: null, address: intLat },
          query: {
            ...(query || {}),
            introduce: null,
            address: intLat
          },
          useJWD: true, // 仅使用经纬度
        };
        dispatch("setMobileWindows", d);
@@ -578,14 +717,22 @@
      state.pointLayer.addOverlay(billboard); // 实景
      // commit("MSET_OPENPOINTEL", true);
    },
    MSET_LOCKPERSPECTIVEL({ state, commit, dispatch }, val) {
    MSET_LOCKPERSPECTIVEL({
      state,
      commit,
      dispatch
    }, val) {
      // 锁定
      state.mviewer.camera.lookAtTransform(
        global.DC.Namespace.Cesium.Matrix4.IDENTITY
      );
      // console.log(global.DC.Namespace.Cesium.Matrix4.IDENTITY)
    },
    MSET_DIMENSIONS({ state, commit, dispatch }, val) {
    MSET_DIMENSIONS({
      state,
      commit,
      dispatch
    }, val) {
      //关闭弹窗
      dispatch("closeMobileWindowsDom");
      //3d，2.5d转换事件
@@ -611,7 +758,11 @@
        },
      });
    },
    MSET_GOTOCC({ state, commit, dispatch }, val) {
    MSET_GOTOCC({
      state,
      commit,
      dispatch
    }, val) {
      //测试移动位置
      // commit("MSET_DIMENSION", val);
      //控制高度
@@ -630,7 +781,11 @@
      });
    },
    //文字转语音控制↓
    MSET_GETAUDIO({ state, commit, dispatch }, val) {
    MSET_GETAUDIO({
      state,
      commit,
      dispatch
    }, val) {
      state.audioData = new window.SpeechSynthesisUtterance();
      state.audioData.text = val;
      state.audioData.onstart = function (e) {
@@ -640,7 +795,11 @@
        state.audioState = false;
      };
    },
    MSET_GETAUDIOBEGIN({ state, commit, dispatch }, val) {
    MSET_GETAUDIOBEGIN({
      state,
      commit,
      dispatch
    }, val) {
      if (state.audioState) {
        window.speechSynthesis.cancel();
        state.audioState = false;
@@ -652,7 +811,11 @@
    },
    //文字转语音控制↑
    //导航系统↓
    MSET_GOTOWHERE({ state, commit, dispatch }, val) {
    MSET_GOTOWHERE({
      state,
      commit,
      dispatch
    }, val) {
      state.routerS = []; //清空存着的路径
      //单条步行
      //本地图使用的是WGS84坐标，而高德使用的是火星坐标GCJ02，所以需要转换参数过去
@@ -692,7 +855,9 @@
      // data["strategy"] = strategyType[index];
      axios
        .get(url, {
          params: { ...data },
          params: {
            ...data
          },
        })
        .then((res) => {
          //回调
@@ -746,7 +911,11 @@
    },
    //导航系统↑
    //绘画线路
    MSET_DRAWALINELAYER({ state, commit, dispatch }, value) {
    MSET_DRAWALINELAYER({
      state,
      commit,
      dispatch
    }, value) {
      let Str = value[0];
      //检查是否存在路线
      commit("removePolyline");
@@ -765,14 +934,18 @@
        commit("removerPolyLineIcon");
        state.drawALineLayerIcon = new global.DC.VectorLayer("pointLayer");
        state.mviewer.addLayer(state.drawALineLayerIcon);
        let post = Str.split(";")[0].split(",");
        let useStr = Str.split(";");
        let post = useStr[useStr.length - 1].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 }, //偏移像素
          pixelOffset: {
            x: 0,
            y: -17
          }, //偏移像素
        });
        //订阅事件
        billboard.on(global.DC.MouseEventType.CLICK, (e) => {
@@ -808,7 +981,11 @@
      // commit("cameraSetView", state.navigationStartLngLat); //移动
    },
    //绘画线路活动多条
    MSET_DRAWALINELAYERMANY({ state, commit, dispatch }, value) {
    MSET_DRAWALINELAYERMANY({
      state,
      commit,
      dispatch
    }, value) {
      //检查是否存在路线
      commit("removePolylineMany");
      commit("removePolyline");
@@ -822,18 +999,23 @@
        speed: 10,
      });
      let material1 = new global.DC.PolylineImageTrailMaterialProperty({
        color: global.DC.Color(255, 0, 0),
        color: red,
        speed: 60,
        image: "img/icon/right.png",
        repeat: { x: 320, y: 1 },
        repeat: {
          x: 320,
          y: 1
        },
      });
      let drawALineLayerMany = new global.DC.VectorLayer("manyLinePointLayer");
      state.mviewer.addLayer(drawALineLayerMany);
      let drawAPointLayerMany = new global.DC.HtmlLayer("manyPointPointLayer");
      state.mviewer.addLayer(drawAPointLayerMany);
      //多条线
      for (let k in Strs) {
        let polyline = new global.DC.Polyline(Strs[k].value); //加入绘画点
        polyline.setStyle({
          width: 3,
          width: 6,
          material: material1,
          clampToGround: true,
        });
@@ -858,17 +1040,67 @@
        let post = point[k].value;
        let position = new global.DC.Position(post[0], post[1]);

        let billboard = new global.DC.Billboard(
        // let billboard = new global.DC.Billboard(
        //   position,
        //   // "img/dingwei/dingwei1.png"
        //   "img/icon/activity.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,
        //       notAddGoOn: "notAddGoOn",
        //     },
        //     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 }, //偏移像素
        // });
        let Labels = new global.DC.DivIcon(
          // new this.DC.Position(Number(item[0]), Number(item[1]), 0),
          position,
          "img/dingwei/dingwei1.png"
        ); //加入绘画点
        billboard.setStyle({
          pixelOffset: { x: 0, y: -17 }, //偏移像素
        });
          `
              <div class="point-entitys-box">
                  <div class="point-logo">
                      <img src="/img/icon/activity.png">
                  </div>
                  <div class="point-title">
                      ${point[k].name}
                  </div>
              </div>
          `
        );
        //订阅事件
        billboard.on(global.DC.MouseEventType.CLICK, (e) => {
        Labels.on(global.DC.MouseEventType.CLICK, (e) => {
          // console.log(e);
          // return;
          if (value[3]) {
            value[3]();
          }
          // 定制化窗体
          let position = e.position,
            lntLat = [e.overlay._position._lng, e.overlay._position._lat];
@@ -878,48 +1110,21 @@
            query: {
              ...(value[2] || {}),
              position,
              lntLat,
              notAddGoOn: "notAddGoOn",
              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);
        drawAPointLayerMany.addOverlay(Labels);
        // console.log(point[k]);
      }
      state.drawALineLayerMany = drawALineLayerMany;
      state.isOpenDrawALineMany = value[2].name ? value[2].name : true;
      state.drawAPointLayerMany = drawAPointLayerMany;
      // state.isOpenDrawALineMany = value[2].name ? value[2].name : true;
      // commit("cameraSetView", state.navigationStartLngLat); //移动
    },
  },
};

export default mobile;
export default mobile;