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

<template>
  <div
    class="baselayer-switcher"
    :style="{ right: drawerOpen ? '480px' : '12px' }"
    v-if="uiStore.mapType == '2D'"
  >
    <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 } from 'vue';
import { useUiStore } from '@/store/modules/ui';
import { useMapStore } from '@/store/modules/map';
import { layerConfig2Flat } from '@/components/gis/gisUtils';
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 mapStore = useMapStore();
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);

/**
 * 判断图层管理中的基础底图（customBaseLayer）是否被选中
 */
const isCustomBaseLayerChecked = (): boolean => {
  const layerConfig = layerConfig2Flat(mapStore.layerData);
  const customBaseLayer = layerConfig.find(
    (item: any) => item.key === 'customBaseLayer'
  );

  if (!customBaseLayer) {
    return false;
  }

  // 判断是否被选中：直接选中或子节点被选中
  const checkedKeys = mapStore.checkedLayerKeys;
  if (checkedKeys.includes('customBaseLayer')) {
    return true;
  }

  // 检查子节点
  if (customBaseLayer.children && customBaseLayer.children.length > 0) {
    return customBaseLayer.children.some((child: any) =>
      checkedKeys.includes(child.key)
    );
  }

  return false;
};

const handleSwitch = (key: string) => {
  // 判断图层管理中的基础底图是否被选中
  const customBaseLayerChecked = isCustomBaseLayerChecked();

  activeKey.value = key;
  props.map.baseLayerSwitcher(key, customBaseLayerChecked ? 1 : 0);
};
</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>