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" :key="item.key">
      <a-tooltip :title="item.name" placement="left">
        <div class="map-controller-item">
          <i class="icon iconfont" :class="'icon-' + item.icon"></i>
        </div>
      </a-tooltip>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { useUiStore } from "@/store/modules/ui";

// 使用 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 = ref([
  {
    children: [
      {
        name: "全屏",
        key: "fullScreen",
        icon: isFullScreen.value ? "exitFullScreen" : "fullScreen",
      },
    ],
  },

  {
    name: "定位",
    key: "positioning",
    icon: "iconGlobal",
  },
  {
    children: [
      {
        name: "放大",
        key: "zoomIn",
        icon: "zoomIn",
      },
      {
        name: "缩小",
        key: "zoomOut",
        icon: "zoomOut",
      },
    ],
  },
  {
    name: "3D",
    key: "dim",
    icon: mapType.value === "2D" ? "a-3D" : "a-2D",
  },
  {
    name: "图层",
    key: "layerController",
    icon: "layer",
  },
  {
    name: "下载",
    key: "screenShot",
    icon: "downLoad",
  },
  {
    name: "梯级",
    key: "TJ",
    icon: "tiji",
  },
  {
    name: "倾斜摄影",
    key: "OSBGController",
    icon: "obliquePhotography",
  },
  {
    name: "三维漫游",
    key: "threedRoam",
    icon: "roaming",
  },
]);
</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>