WholeProcessPlatform/frontend/src/components/mapController/LayerController.vue

<template>
  <a-tooltip
    placement="leftBottom"
    trigger="click"
    color="transparent"
    :overlayInnerStyle="{ boxShadow: 'none' }"
  >
    <template #title>
      <div class="layers-tree">
        <div class="layers-tree-title">图层管理</div>

        <div class="layers-tree-content">
          <a-Tree
            checkable
            :onCheck="onCheck"
            :checkedKeys="checkedKeys"
            :treeData="layerConfigs"
          />
        </div>
      </div>
    </template>
    <div class="map-item">
      <i class="icon iconfont icon-layer"></i>
    </div>
  </a-tooltip>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useMapStore } from "@/store/modules/map";
import { useRoute } from "vue-router";
let route = useRoute();
const mapStore: any = useMapStore();
// 图层数据
const layerConfigs = computed(() => mapStore.layerData);

// 选中的图层
const checkedKeys = ref([]);
const onCheck = (v: any, e: any) => {
  // 环保设施和环保设施在建数据获取，两者只能同时存在勾选一项
  const fData = layerConfigs.value?.filter((e: any) => e.key === "facilities")?.[0];
  const fbData = layerConfigs.value?.filter((e: any) => e.key === "facilities_built")?.[0];
  const facilities_built_data =
    (fbData && [fbData.key, ...fbData?.children?.map((e: any) => e.key)]) || [];
  const facilities_data =
    (fData && [fData.key, ...fData?.children?.map((e: any) => e.key)]) || [];

  let checkKeys = v;

  if (e?.node.key === "rare_fish_point") {
    checkKeys = v?.filter((item: any) => item !== "fish_along_point");
  } else if (e?.node.key === "fish_along_point") {
    checkKeys = v?.filter((item: any) => item !== "rare_fish_point");
  }
  if (e.checked) {
    if (e?.node.key === "stinfo_video_point" || e?.node.key == "stinfo") {
      checkKeys = v?.filter((item: any) => item !== "stinfo_ai_video_point");
    } else if (e?.node.key === "stinfo_ai_video_point") {
      checkKeys = v?.filter(
        (item: any) => item !== "stinfo_video_point" && item !== "stinfo"
      );
    }
    console.log(checkKeys, "res111");

    if (
      checkKeys.some((e: any) => facilities_data.includes(e)) &&
      checkKeys.some((e: any) => facilities_built_data.includes(e))
    ) {
      if (
        facilities_built_data.some((e: any) =>
          e.includes(checkKeys[checkKeys.length - 1])
        )
      ) {
        checkKeys = checkKeys.filter((e: any) => !facilities_data.includes(e));
      } else if (
        facilities_data.some((e: any) => e.includes(checkKeys[checkKeys.length - 1]))
      ) {
        checkKeys = checkKeys.filter((e: any) => !facilities_built_data.includes(e));
      }
    }
  }
  checkedKeys.value = checkKeys;
  mapStore.updateLayerData(checkKeys);
};
const getCheckedKeys = () => {
  const name = route.path.split("/")[2];
  if (name === "shuiDianKaiFaZhuangKuang") {
    checkedKeys.value = ["customBaseLayer", "eng", "eng_point"];
  }
  mapStore.updateLayerData(checkedKeys.value);
};
onMounted(() => {
  getCheckedKeys();
  // router.push({ name: 'map' })
});
</script>
<style scoped lang="scss">
.map-item {
  height: 40px;
  width: 40px;
  color: #000;
  line-height: 40px;
  text-align: center;
  position: relative;
  cursor: pointer;
  .iconfont {
    font-size: 20px;
  }
  &:hover {
    background-color: #005292;
    color: #ffffff;
  }
}
.layers-tree {
  width: 230px;
  box-shadow: 0 1px 2px #00000026;
  background-color: #fff;
  cursor: initial;
  border: 1px solid #ccdae7;
  .layers-tree-title {
    color: rgba(0, 0, 0, 0.85);
    text-align: left;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    border-bottom: 1px dotted #ccc;
  }
  .layers-tree-content {
    max-height: 300px;
    overflow-y: auto;
  }
}
</style>