WholeProcessPlatform/frontend/src/components/BaseLayerSwitcher/index.vue

<template>
  <div class="baselayer-switcher" :style="{ right: drawerOpen ? '480px' : '12px' }">
    <div
      class="switcher-item"
      v-for="item in layers"
      :key="item.key"
      :class="{ active: item.key === activeKey }"
      @click="handleSwitch(item.key)"
    >
      <img :src="item.img" alt="" />
      <div class="label">{{ item.name }}</div>
    </div>
    <div class="nineSectionsImg">
      <img :src="nineSectionsImg[activeKey]"  alt="" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { useUiStore } from "@/store/modules/ui";
import shiliangImg from "@/assets/images/map-shiliangtu.png";
import dixingImg from "@/assets/images/map-dixingtu.png";
import yingxiangImg from "@/assets/images/map-yingxiangtu.png";
import nineSectionsShiliangImg from "@/assets/images/nineSections-shiliang.png";
import nineSectionsDixingImg from "@/assets/images/nineSections-dixing.png";
import nineSectionsYingxiangImg from "@/assets/images/nineSections-yingxiang.png";
const props = defineProps({
  map: {
    type: Object,
    default: () => {},
  },
})
const uiStore = useUiStore();
const drawerOpen = ref(uiStore.drawerOpen);

// 监听 store 中的 drawerOpen 变化
watch(
  () => uiStore.drawerOpen,
  (newVal) => {
    drawerOpen.value = newVal;
  }
);
const layers = [
  { key: "s_province_boundaries", name: "矢量", img: shiliangImg },
  { key: "BASEMAP-white", name: "地形", img: dixingImg },
  { key: "BASEMAP-img", name: "影像", img: yingxiangImg },
];
const nineSectionsImg:any = {'s_province_boundaries':nineSectionsShiliangImg,'BASEMAP-white':nineSectionsDixingImg,'BASEMAP-img':nineSectionsYingxiangImg,}

const activeKey = ref(layers[0].key);
const handleSwitch = (key: string) => {
  activeKey.value = key;
  props.map.baseLayerSwitcher(key);
}
watch(activeKey, (val) => {
  // nineSectionsImg.value =
  //   nineSectionsData.value.find((item) => item.name === val)?.img || "";
});
</script>

<style lang="scss" scoped>
.baselayer-switcher {
  display: flex;
  position: absolute;
  bottom: 20px;
  right: 480px;
  z-index: 200;
  .switcher-item {
    background: #d8d8d8;
    border-radius: 2px;
    width: 85px;
    height: 60px;
    display: none;
    position: relative;
    cursor: pointer;
    img {
      height: 100%;
      width: 100%;
    }
    .label {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 2px 3px;
      background-color: #00000059;
      color: #fff;
      border-radius: 2px 0 0 2px / 2px 0px 0px 2px;
    }
    &:hover {
      border: 1px solid #3a7098;
      .label {
        background-color: #005293;
      }
    }
  }
  .switcher-item:not(:first-child) {
    margin-left: 4px;
  }
  .active {
    display: block;
    border: 1px solid #3a7098;
    .label {
      background-color: #005293;
    }
  }
  &:hover {
    .switcher-item {
      display: block;
    }
  }
  .nineSectionsImg {
    position: absolute;
    right: 56px;
    bottom: 92px;
    border: 1px solid grey;
    pointer-events: none;
    img {
      max-width: 100px;
      width: 100px !important;
    }
  }
}
</style>