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" />
        <div v-else class="map-controller-item" @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";

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

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

const isFullScreen = ref(false);
const mapType = ref("2D");

// 响应式的控制器配置
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: mapType.value === "2D" ? "a-3D" : "a-2D",
      },
    ],
  },
  {
    children: [
      {
        name: "图层管理",
        key: "layerController",
        component: LayerController,
      },
    ],
  },
  {
    children: [
      {
        name: "测量工具",
        key: "Calculate",
        component: Calculate,
      },
    ],
  },
  {
    children: [
      {
        name: "梯级",
        key: "TJ",
        icon: "tiji",
      },
    ],
  },
  {
    children: [
      {
        name: "下载",
        key: "screenShot",
        icon: "downLoad",
      },
    ],
  },

  // {
  //   name: "倾斜摄影",
  //   key: "OSBGController",
  //   icon: "obliquePhotography",
  // },
  // {
  //   name: "三维漫游",
  //   key: "threedRoam",
  //   icon: "roaming",
  // },
]);

// 添加全屏切换功能
const toggleFullScreen = () => {
  isFullScreen.value = !isFullScreen.value;
  // 这里可以添加实际的浏览器全屏切换逻辑
  if (isFullScreen.value) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
};

// 控制器点击事件处理
const handleControllerClick = (item: any) => {
  switch (item.key) {
    case "fullScreen":
      toggleFullScreen();
      break;
    case "rightDrawer":
      // 使用全局事件切换右侧面板
      // GlobalEvents.get('rightDrawerState').set(!drawerOpen);
      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;
      }
    }
  }
  .map-controller-group:not(:first-child) {
    margin-top: 10px;
  }
}
</style>