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

<template>
  <div class="map-controller" :style="{ right: drawerOpen ? '480px' : '12px' }">
    <div class="map-controller-group" v-for="item in controllers">
      <a-tooltip
        :title="child.name"
        :placement="child.key === 'Calculate' ? 'right' : 'left'"
        v-for="child in item.children"
        :key="child.key"
      >
        <component v-if="child.component" :is="child.component" :map="map" />
        <div
          v-else
          class="map-controller-item"
          :class="{ 'is-active': child.key === 'TJ' && tjVisible }"
          @click="handleControllerClick(child)"
        >
          <i class="icon iconfont" :class="'icon-' + child.icon"></i>
        </div>
      </a-tooltip>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useUiStore } from '@/store/modules/ui';
import Calculate from './Calculate.vue';
import LayerController from './LayerController.vue';

const props = defineProps<{
  map: any;
  onClick: (key: any, mapType: any) => void;
}>();
const map = props.map;

// 使用 Pinia store
const uiStore = useUiStore();
const drawerOpen = ref(uiStore.drawerOpen);
const tjVisible = ref(false);

// 监听 store 中的 drawerOpen 变化
watch(
  () => uiStore.drawerOpen,
  newVal => {
    drawerOpen.value = newVal;
  }
);

watch(
  () => uiStore.mapType,
  newVal => {
    if (newVal !== '2D') {
      tjVisible.value = false;
    }
  }
);

const isFullScreen = ref(false);

// 响应式的控制器配置
const controllers: any = computed(() => [
  {
    children: [
      {
        name: '全屏',
        key: 'fullScreen',
        icon: isFullScreen.value ? 'exitFullScreen' : 'fullScreen'
      }
    ]
  },

  {
    children: [
      // {
      //   name: "定位",
      //   key: "positioning",
      //   icon: "iconGlobal",
      // },
      {
        name: '放大',
        key: 'zoomIn',
        icon: 'zoomIn'
      },
      {
        name: '缩小',
        key: 'zoomOut',
        icon: 'zoomOut'
      }
    ]
  },
  {
    children: [
      {
        name: '3D',
        key: 'dim',
        icon: uiStore.mapType === '2D' ? 'a-3D' : 'a-2D'
      }
    ]
  },
  {
    children: [
      {
        name: '图层管理',
        key: 'layerController',
        component: LayerController
      }
    ]
  },
  uiStore.mapType === '2D'
    ? {
        children: [
          {
            name: '测量工具',
            key: 'Calculate',
            component: Calculate
          }
        ]
      }
    : {},
  uiStore.mapType === '2D'
    ? {
        children: [
          {
            name: '梯级',
            key: 'TJ',
            icon: 'tiji'
          }
        ]
      }
    : {},
  uiStore.mapType === '3D'
    ? {
        children: [
          {
            name: '电站倾斜摄影',
            key: 'OSBGController',
            icon: 'obliquePhotography'
          }
        ]
      }
    : {},
  uiStore.mapType === '3D'
    ? {
        children: [
          {
            name: '流域三维漫游',
            key: 'threedRoam',
            icon: 'roaming'
          }
        ]
      }
    : {},
  {
    children: [
      {
        name: '下载',
        key: 'screenShot',
        icon: 'downLoad'
      }
    ]
  }
]);

// 添加全屏切换功能
const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    // 进入全屏
    document.documentElement.requestFullscreen().catch(err => {
      console.error('进入全屏失败:', err);
      isFullScreen.value = false;
    });
  } else {
    // 退出全屏
    document.exitFullscreen().catch(err => {
      console.error('退出全屏失败:', err);
      isFullScreen.value = true;
    });
  }
};

// 监听全屏状态变化
document.addEventListener('fullscreenchange', () => {
  isFullScreen.value = !!document.fullscreenElement;
});

// 控制器点击事件处理
const handleControllerClick = (item: any) => {
  switch (item.key) {
    case 'fullScreen':
      isFullScreen.value = !isFullScreen.value;
      // console.log(mapClass.hasLayer('eng_point'));
      // map.jdPanelControlShowAndHidden("01", false);
      map.mdLayerTreeShowOrHidden('eng_point', false);
      map.mdLayerTreeShowOrHidden('wq_countryWq_point', true);
      // map.controlBaseLayerTreeShowAndHidden(
      //   'eng_point',
      //   'eng_point',
      //   !isFullScreen.value
      // );
      // map.controlBaseLayerTreeShowAndHidden('lcj_bhq','lcj_bhq',!isFullScreen.value);
      // toggleFullScreen();
      break;
    case 'zoomIn':
      map.zoomToggle('in');
      break;
    case 'zoomOut':
      map.zoomToggle('out');
      break;
    case 'dim':
      uiStore.mapType = uiStore.mapType === '2D' ? '3D' : '2D';
      if (uiStore.mapType === '2D') {
        uiStore.drawerOpen = true;
      } else {
        uiStore.drawerOpen = false;
      }
      props.onClick('dim', uiStore.mapType);
      break;
    case 'rightDrawer':
      // 使用全局事件切换右侧面板
      // GlobalEvents.get('rightDrawerState').set(!drawerOpen);
      break;
    // 可以在这里添加其他控制器的处理逻辑
    case 'screenShot':
      map.mapOutPut();
      break;
    case 'TJ':
      tjVisible.value = !tjVisible.value;
      props.onClick(4, null);
      // map.addTertiarybasinLayer(servers.Tertiarybasin, '#4DFFDD', '#92A0A5')
      break;
    default:
      console.log(`点击了控制器: ${item.name}`);
      break;
  }
};
</script>

<style lang="scss" scoped>
.map-controller {
  position: absolute;
  right: 480px;
  bottom: 114px;
  z-index: 10;
  .map-controller-group {
    box-shadow: 0 1px 2px #00000026;
    background-color: #fff;
    border: none;
    .map-controller-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;
      }
      &.is-active {
        background-color: #005292;
        color: #ffffff;
      }
    }
  }
  .map-controller-group:not(:first-child) {
    margin-top: 10px;
  }
}
</style>