96 lines
2.8 KiB
Vue
96 lines
2.8 KiB
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> |