web_sh_audit/src/components/map/BasemapChange.vue

<template>
  <transition-group name="map-change" tag="div">
    <div
      key="map-change"
      class="map-change"
      :style="{
        right: `${rightPosition}%`,
        bottom: `${bottomPostion}px`,
      }"
      @mouseover="mouseover"
      @mouseleave="mouseleave"
    >
      <!-- 注意key值不能使用数组索引 否则无变化 -->
      <img
        v-for="(item, index) in state.images"
        :key="item.type"
        :src="item.src"
        class="img__box"
        :class="{ active: index === 0 }"
        :style="{
          right: `${index * state.rightPX}px`,
          'z-index': 99 - index,
        }"
        @click="change(index, item.type)"
      />
    </div>
  </transition-group>
</template>
<script>
export default {
  name: "BasemapChange",
  data() {
    return {
      rightPosition: 23,
      bottomPostion: 30,
      imageGroup: {
        // 地形图
        DX: require("@/assets/map/02.png"),
        // 深色地图
        SE: require("@/assets/map/03.png"),
        // 街道底图
        JD: require("@/assets/map/01.png"),
      },
      state: {
        // 图片数组
        images: [
          {
            src: require("@/assets/map/darkmap.png"),
            type: 1,
            active: "SEA",
            defalut: "SE",
          },
          {
            src: require("@/assets/map/sat2022.png"),
            type: 0,
            active: "DXA",
            defalut: "DX",
          },
          {
            src: require("@/assets/map/sat2019.png"),
            type: 2,
            active: "DXA1",
            defalut: "DX1",
          },
          
        ],
        rightPX: 50, // 每张图片距离右侧的距离 * index
      },
    };
  },
  computed: {
    baseMapRight() {
      return this.$store.state.baseMapRight;
    },
    menuChange() {
      return this.$store.state.navSelect;
    },
    baseMapType() {
      return this.$store.state.baseMapType;
    },
  },
  watch: {
    baseMapRight: {
      handler(val) {
        this.rightPosition = val;
      },
      immediate: true,
    },
    menuChange: {
      handler(val) {
        if (val.name === "镇域专题") {
          this.$store.state.baseMapRight = 40;
        } else if (val.name === "土地资源") {
          this.$store.state.baseMapRight = 5;
        } else {
          this.$store.state.baseMapRight = 23;
        }
      },
      deep: true,
      immediate: true,
    },
    baseMapType(val) {
      // console.log(val, "地图类型");
    },
  },
  methods: {
    change(index, type) {
      while (this.state.images[0].type != type) {
        let a = this.state.images.pop();
        // console.log(a);
        this.state.images.unshift(a);
      }
      this.$store.state.baseMapType = type;
      this.setLayer(type);
    },
    // 设置图层显示
    setLayer(type) {
      // 当前的底图类型 0 - imagery; 1 - 蓝黑图; 2 - imagery2
      switch (type) {
        case 0:
          // 遥感影像图sat2022
          // console.log("影像图");
          if (!map2DViewer.map.hasLayer(map2DViewer.layers["imagery"])) {
            map2DViewer.map.hasLayer(map2DViewer.layers["darkmap"]) &&
              map2DViewer.map.removeLayer(map2DViewer.layers["darkmap"]);
            map2DViewer.map.hasLayer(map2DViewer.layers["imagery2"]) &&
              map2DViewer.map.removeLayer(map2DViewer.layers["imagery2"]);
            map2DViewer.map.addLayer(map2DViewer.layers["imagery"]);
          }
          break;
        case 1:
          // console.log("蓝黑图");
          // 测绘院蓝黑图
          if (!map2DViewer.map.hasLayer(map2DViewer.layers["darkmap"])) {
            map2DViewer.map.hasLayer(map2DViewer.layers["imagery"]) &&
              map2DViewer.map.removeLayer(map2DViewer.layers["imagery"]);
            map2DViewer.map.hasLayer(map2DViewer.layers["imagery2"]) &&
              map2DViewer.map.removeLayer(map2DViewer.layers["imagery2"]);
            map2DViewer.map.addLayer(map2DViewer.layers["darkmap"]);
          }
          break;
        case 2:
          // 遥感影像图sat2018
          if (!map2DViewer.map.hasLayer(map2DViewer.layers["imagery2"])) {
            map2DViewer.map.hasLayer(map2DViewer.layers["darkmap"]) &&
              map2DViewer.map.removeLayer(map2DViewer.layers["darkmap"]);
            map2DViewer.map.hasLayer(map2DViewer.layers["imagery"]) &&
              map2DViewer.map.removeLayer(map2DViewer.layers["imagery"]);
            map2DViewer.map.addLayer(map2DViewer.layers["imagery2"]);
          }
      }

      // 调用全局事件总线中的指定事件
      this.$bus.$emit("reJLControl");
    },
    // 悬浮时图片右移
    mouseover() {
      this.state.rightPX = 125;
    },
    mouseleave() {
      this.state.rightPX = 50;
    },
  },
};
</script>
<style lang="less" scoped>
.map-change-move {
  transition: transform 0.3s;
}

.map-change {
  position: absolute;
  z-index: 9999;
  display: flex;
  align-items: center;
  background-color: #1e3968;
  padding: 2px;
  .img__box {
    width: 120px;
    height: 80px;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    transition: all 0.5s;

    &.active {
      box-shadow: 0 2px 15px 3px #254486;
    }

    &:hover {
      width: 95px;
      height: 65px;
      box-shadow: 0 2px 15px 3px #254486;
      cursor: pointer;
    }
  }
}
</style>