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: `${right}px`,
        bottom: `${bottom}px`,
      }"
      @mouseover="mouseover"
      @mouseleave="mouseleave"
    >
      <!-- 注意key值不能使用数组索引 否则无变化 -->
      <img
        v-for="(item, index) in images"
        :key="item.type"
        :src="item.src"
        class="img__box"
        :class="{ active: index === 0 }"
        :style="{
          right: `${index * rightPX}px`,
          'z-index': 99 - index,
        }"
        @click="change(index, item.type)"
      />
    </div>
  </transition-group>
</template>
<script>
export default {
  name: "BasemapChange",
  data() {
    return {
      imageGroup: {
        // 地形图
        DX: require("@/assets/map/02.png"),
        // 深色地图
        SE: require("@/assets/map/03.png"),
        // 街道底图
        JD: require("@/assets/map/01.png"),

        // 遥感地图
        DXA: require("@/assets/map/02_.png"),
        // 深色地图
        SEA: require("@/assets/map/03_.png"),
        // 街道底图
        JDA: require("@/assets/map/01_.png"),
      },
      state: {
        // 图片数组
        images: [
          { src: this.imageGroup.SEA, type: 1, active: "SEA", defalut: "SE" },
          { src: this.imageGroup.DX, type: 0, active: "DXA", defalut: "DX" },
          { src: this.imageGroup.JD, type: 2, active: "JDA", defalut: "JD" },
        ],
        rightPX: 50, // 每张图片距离右侧的距离 * index
      },
    };
  },
  props: {
    right: {
      type: Number,
      default: 10,
    },
    bottom: {
      type: Number,
      default: 10,
    },
  },
  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) {
      console.log(type, "当前的底图类型");
    },
    // 悬浮时图片右移
    mouseover() {
      this.state.rightPX = 125;
    },
    mouseleave() {
      this.state.rightPX = 50;
    },
  },
};
</script>
<style lang="less" scoped>
.map-change-move {
  transition: transform 1s;
}

.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>