WarehouseClient/src/views/Map.vue

<script setup>
/**
 * 3D地图主组件
 * 负责初始化VgoMap 3D地图引擎，管理地图状态，并为子组件提供共享数据
 */

// 导入Vue组合式API
import { onMounted, ref, computed, provide } from "vue"

// 导入子组件
import Fence from "../components/Fence.vue" // 3D地图围栏组件，用于绘制区域边界
import Filter from "../components/Filter.vue" // 地图筛选组件，用于分类显示/隐藏标记点

/**
 * 地图相关常量和状态定义
 */
const { VgoMap } = window // 从全局对象获取VgoMap 3D地图引擎实例
let mapId = '1958120048849719296' // 地图资源唯一标识ID
const isLoaded = ref(false) // 地图加载完成状态标记
const map = ref() // 地图实例引用，用于操作地图API

/**
 * 计算所有多边形数据
 * 合并室外和室内的多边形数据，为围栏和筛选组件提供完整的地图数据
 * @returns {Array} - 合并后的多边形数据数组
 */
const polygonDataAll = computed(() => {
  // 获取室外多边形数据
  const outDoor = map.value?.mapData?.polygonData ?? []

  // 获取室内多边形数据（遍历建筑和楼层）
  const inDoor = map?.mapData?.build?.reduce((result, build) => {
    build.floor.forEach(fItem => {
      result.push(...fItem.polygonData)
    })
    return result
  }, []) ?? []
  
  // 合并室内外数据并返回
  return [...outDoor, ...inDoor]
})

/**
 * 使用Vue的provide API为子组件提供共享数据
 * 使Fence和Filter组件能够访问地图实例和多边形数据
 */
provide("map", computed(() => map.value)) // 提供地图实例
provide('polygonDataAll', polygonDataAll) // 提供多边形数据

/**
 * 组件生命周期钩子：挂载后执行
 * 初始化3D地图实例并设置事件监听器
 */
onMounted(() => {
  // 创建地图实例
  map.value = new VgoMap.Map({
    el: "mapContainer", // 地图容器元素ID
    id: mapId, // 地图ID
  })
  
  // 监听地图加载完成事件
  map.value.on("loaded", () => {
    isLoaded.value = true // 更新地图加载状态
  })
})
</script>

<template>
  <!-- 地图组件模板 -->
  <div class="wrapper">
    <!-- 地图渲染容器，VgoMap将在此处渲染3D地图 -->
    <div id="mapContainer"></div>
    <!-- UI组件容器 - 当地图加载完成后显示，确保组件在地图数据准备就绪后初始化 -->
    <div v-if="isLoaded" class="ui">
      <Fence/> <!-- 围栏组件，用于在地图上绘制区域边界 -->
      <Filter/> <!-- 筛选组件，用于控制地图上不同类型标记点的显示/隐藏 -->
    </div>
  </div>
</template>

<style scoped>
/**
 * 地图组件样式定义
 * 设置地图容器的基本布局样式
 */
.wrapper {
  width: 100%;
  height: 100%;
  position: relative; /* 相对定位，为子组件的绝对定位提供基准 */
}

#mapContainer {
  width: 100%;
  height: 100%; /* 使地图充满整个父容器 */
}
</style>