+弹窗图片可点击，列表展示文字区域点击是定位，图片可点击，+活动打开后隐藏右侧控制栏，+操作方式更改

liuyg

2022-02-09 0fa88f9c2e3c8ce335e7cd6dfc6c8e5641950735

+弹窗图片可点击，列表展示文字区域点击是定位，图片可点击，+活动打开后隐藏右侧控制栏，+操作方式更改

 src/components/mobileActivity/index.vue

@@ -305,6 +305,8 @@
      this.$store.commit("removePolylineMany");
      //关闭随地图弹窗
      this.$store.dispatch("closeMobileWindowsDom");
      //显示右侧栏
      this.$store.commit("SET_SeeAndNotSee", true);
    },
    checkDom(methods, name, fn) {
      //  声明定时器

 src/components/mobileLeftNav/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="m-left-nav" :style="[navStyle]">
  <div :class="['m-left-nav', seeRight ? '' : 'nones']" :style="[navStyle]">
    <!-- :style="[coutrolStyle]" -->
    <div class="m-left-coutrol" @click="changeIconHide">
      <i :class="icons"></i>
@@ -44,9 +44,26 @@
        this.imgStyle.right = "0";
      }
    },
    seeRight() {
      if (this.seeRight) {
        this.leftNavData[0].flag = false;
        this.leftNavData[0].img = this.leftNavData[0].checked;
        this[this.leftNavData[0].layer].show = true;
      } else {
        let lnd = this.leftNavData;
        for (let k in lnd) {
          if (this[this.leftNavData[k].layer]._show) {
            // console.log(lnd[k].label, "所有开启");
            this.leftNavData[k].flag = false;
            this.leftNavData[k].img = this.leftNavData[k].normal;
            this[this.leftNavData[k].layer].show = false;
          }
        }
      }
    },
  },
  computed: {
    ...mapGetters(["iconHide", "dimensionData"]),
    ...mapGetters(["iconHide", "dimensionData", "seeRight"]),
  },
  data() {
    return {
@@ -475,4 +492,7 @@
    }
  }
}
.nones {
  display: none;
}
</style>

 src/components/mobilePopupOurAfter/index.vue

@@ -261,6 +261,8 @@
    openBigPopup(val) {
      if (val.name == "活动" && !this.useHD) {
        this.openHDPopup(this.avtivityData[0][0]);
        //隐藏右侧栏
        this.$store.commit("SET_SeeAndNotSee", false);
        return;
      }
      const d = {

 src/components/mobilePopupOurOnce/index.vue

@@ -8,18 +8,23 @@
      }"
    >
      <div class="mobilePopupOurOnce_left">
        <img :src="icon" alt="" :key="icon" />
        <!-- <img :src="icon" alt="" :key="icon" /> -->
        <el-image
          style="width: 100px; height: 100px"
          style="width: 80px; height: 80px"
          :src="icon"
          :id="'mobileBigImgs' + icon + ''"
          v-show="false"
          :preview-src-list="srcList"
        >
          <!-- v-show="false" -->
        </el-image>
      </div>
      <div class="mobilePopupOurOnce_right">
        <div class="mobilePopupOurOnce_r_up">{{ onceData.name }}</div>
      <div class="mobilePopupOurOnce_right" @click.self.stop="openOnce('定位')">
        <div
          class="mobilePopupOurOnce_r_up"
          @click.self.stop="openOnce('定位')"
        >
          {{ onceData.name }}
        </div>
        <div class="mobilePopupOurOnce_r_down">
          <div v-for="(item, index) in seebut" :key="index">
            <el-link

 src/components/mobileWindow/index.vue

@@ -31,14 +31,16 @@
          <i class="el-icon-close icon" @click="closeWindow"></i>
        </div>
        <video :src="video" controls="controls" autoplay v-if="video"></video>
        <img :src="url" alt="" v-show="url && !video" />
        <!-- <img :src="url" alt="" v-show="url && !video" /> -->
        <!-- style="width: 100px; height: 100px" -->
        <el-image
          style="width: 100px; height: 100px"
          class="imgs"
          :src="url"
          id="mobileBigImgs"
          v-show="false"
          v-show="url && !video"
          :preview-src-list="srcList"
        >
          <!-- v-show="false" -->
        </el-image>
        <!-- <div>{{ query.query }}</div> -->
        <div class="mobileBig-center-our" v-show="!video">

 src/components/mobilemap/index.vue

@@ -31,7 +31,7 @@
    <!-- 盖住左下角 -->
    <div class="cover_mobileMap">智慧社区</div>
    <!-- 指示器 -->
    <!-- <div class="heights">{{ heights }}---{{ heights1 }}</div> -->
    <div class="heights">{{ heights }}---{{ heights1 }}</div>
  </div>
</template>
<script>
@@ -284,8 +284,8 @@
        // if (height > 2000) {
        //   conBack(2000);
        // }
        if (height <= 190 && isSet) {
          conBack(190);
        if (height <= 79 && isSet) {
          conBack(79);
        }
        // if (height > 220 && height <= 280 && isSet) {
        //   conBack(280);
@@ -296,8 +296,8 @@
        // if (height > 340 && height <= 400 && isSet) {
        //   conBack(400);
        // }
        if (height > 400 && isSet) {
          conBack(400);
        if (height > 200 && isSet) {
          conBack(200);
        }
      });

@@ -431,29 +431,43 @@
        // 指示器
        var ii = 1,
          startHeight = 0,
          cutHeight = 0;
        let overii = function () {
          ii = 1;
          startHeight = 0;
          cutHeight = 0;
        };
        let setViews = (num) => {
          viewer.camera.setView({
            destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
              viewer.camera.positionCartographic.longitude,
              viewer.camera.positionCartographic.latitude,
              num
            ),
            orientation: {
              // 指向
              heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
              // 视角
              pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
              roll: 0.0,
            },
          });
          overii();
        };
          cutHeight = 0,
          overii = function () {
            ii = 1;
            startHeight = 0;
            cutHeight = 0;
          },
          setViews = (num) => {
            viewer.camera.flyTo({
              destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
                viewer.camera.positionCartographic.longitude,
                viewer.camera.positionCartographic.latitude,
                num
              ),
              orientation: {
                // 指向
                heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
                // 视角
                pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
                roll: 0.0,
              },
              duration: 0.5, // 定位的时间间隔
            });
            // that.$store.dispatch("mapFlyTo", {
            //   //飞入
            //   lntLat: [
            //     viewer.camera.positionCartographic.longitude,
            //     viewer.camera.positionCartographic.latitude,
            //     num,
            //   ],
            //   heading: 0,
            //   pitch: -90,
            //   roll: 0.0,
            //   noOpen: true,
            // });
            overii();
          },
          isCameraTime = null;
        viewer.on(that.DC.SceneEventType.CAMERA_CHANGED, (e) => {
          if (that.dimension == "2.5D") {
            // console.log(e);
@@ -468,35 +482,49 @@
            that.heights = height;
            that.heights1 = cutHeight;
            // return;
            if (ii != 1) {
              if (cutHeight >= 0) {
                if (cutHeight > 3) {
                  if (height >= 200 && height < 270) {
                    setViews(270);
            if (isCameraTime) {
              clearTimeout(isCameraTime);
              isCameraTime = setTimeout(() => {
                takes();
                isCameraTime = null;
              }, 200);
            } else {
              isCameraTime = setTimeout(() => {
                takes();
                isCameraTime = null;
              }, 200);
            }
            let takes = () => {
              if (ii != 1) {
                if (cutHeight >= 0) {
                  if (cutHeight > 3) {
                    if (height >= 83 && height < 120) {
                      setViews(120);
                    }
                    if (height >= 123 && height < 160) {
                      setViews(160);
                    }
                    if (height >= 163 && height < 200) {
                      setViews(200);
                    }
                  }
                  if (height >= 273 && height < 330) {
                    setViews(330);
                  }
                  if (height >= 333 && height < 400) {
                    setViews(400);
                  }
                }
                //放大
              } else {
                //缩小
                if (cutHeight < -3) {
                  if (height <= 400 && height > 327) {
                    setViews(330);
                  }
                  if (height <= 327 && height > 267) {
                    setViews(270);
                  }
                  if (height <= 267 && height > 200) {
                    setViews(200);
                  //放大
                } else {
                  //缩小
                  if (cutHeight < -3) {
                    if (height <= 200 && height > 157) {
                      setViews(160);
                    }
                    if (height <= 157 && height > 117) {
                      setViews(120);
                    }
                    if (height <= 117 && height > 80) {
                      setViews(80);
                    }
                  }
                }
              }
            }
            };
          }
        });
      };
@@ -857,7 +885,7 @@
          };
          that.dimension == "2.5D"
            ? doit2(
                [114.03928791, 27.62954732, 200.0],
                [114.04020791, 27.62934732, 160.0],
                // [114.04062292, 27.62666834, 220.0],
                [
                  that.dimensionData.heading,

 src/store/getters.js

@@ -33,6 +33,7 @@
  showActivity: (state) => state.mobile.showActivity, // 显影活动弹窗
  showActivityData: (state) => state.mobile.showActivityData, // 活动弹窗数据
  isOpenDrawALineMany: (state) => state.mobile.isOpenDrawALineMany, // 显影活动弹窗
  seeRight: (state) => state.mobile.seeRight, // 右侧控制栏显影
};

const navigation = {

 src/store/modules/mobile.js

@@ -75,6 +75,7 @@
    drawALineLayerMany: null, //活动路线图层
    drawAPointLayerMany: null, //活动点图层
    isOpenDrawALineMany: null, //是否开启活动
    seeRight: true, //右侧控制栏显影
  },
  mutations: {
    MSET_VIEWER(state, viewer) {
@@ -224,9 +225,9 @@
        state.startPointFn(); //移动默认视角
        state.areaLayer.show = true; //绿布
        //2.5D视角限制
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 190;
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 80;
        // 最大
        state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = 400;
        state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = 200;
        // 设置相机缩小时的速率
        state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 2000;
        // 设置相机放大时的速率
@@ -335,6 +336,9 @@
      state.select.overlay = data[0];
      state.select.color = data[1];
    },
    SET_SeeAndNotSee(state, data) {
      state.seeRight = data;
    },
  },
  actions: {
    MSET_CREADE({ state, commit, dispatch }) {
@@ -437,6 +441,7 @@
      // console.log(state.dimension);
      if (state.dimension != "2.5D") {
        // if (true) {
        // if (true) {
        dispatch("mapFlyTo", {
          //飞入
          lntLat: [Position.lng, Position.lat, Position.alt],
@@ -445,28 +450,35 @@
          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, 160],
          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);
@@ -540,7 +552,7 @@
            // 自定义回调
            setTimeout(() => {
              data.fn();
            }, 500);
            }, 200);
          }
          if (!data.noOpen) {
            setTimeout(() => {

 src/styles/mobile/popup.scss

@@ -101,6 +101,7 @@
          width: 100%;
          height: 100%;
        }
        .imgs,
        img {
          margin-left: calc(50% - 35px);
          width: 70px;