85 lines
2.1 KiB
Vue
85 lines
2.1 KiB
Vue
<template>
|
|
<div class="map-viewer">
|
|
<!-- Cesium 地图容器 -->
|
|
<!-- <MapViewport /> -->
|
|
|
|
<!-- 地图控制工具 - 使用 Teleport 传送到更高层级 -->
|
|
<!-- 延迟渲染确保目标元素已存在 -->
|
|
<!-- <Teleport to="#sa-controls" v-if="isMounted">
|
|
<MapControls
|
|
:active-tool-key="activeToolKey"
|
|
@tool-change="handleToolChange"
|
|
@device-watch="handleDeviceWatch"
|
|
/>
|
|
</Teleport> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { MapViewport } from '@/map'
|
|
import MapControls from './MapControls.vue'
|
|
|
|
// 定义props
|
|
const props = defineProps({
|
|
// 当前激活的工具键
|
|
activeToolKey: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
})
|
|
|
|
/**
|
|
* 向外抛出的事件
|
|
* @event tool-change - 地图工具变化事件，包含 { tool: string, active: boolean }
|
|
* @event device-watch - 卫星设备观看状态变化事件，包含 boolean
|
|
*/
|
|
const emit = defineEmits(['tool-change', 'device-watch'])
|
|
|
|
// 延迟标志，确保 Teleport 目标元素已存在
|
|
const isMounted = ref(false)
|
|
|
|
/**
|
|
* 处理地图工具变化
|
|
* 将 MapControls 的工具变化事件向上传递给父组件
|
|
*
|
|
* @param {Object} payload - 工具变化事件载荷
|
|
* @param {string} payload.tool - 工具标识（如 'modelCompare', 'measure' 等）
|
|
* @param {boolean} payload.active - 工具是否激活
|
|
*/
|
|
const handleToolChange = (payload) => {
|
|
emit('tool-change', payload)
|
|
}
|
|
|
|
/**
|
|
* 处理卫星设备观看状态变化
|
|
* 将 MapControls 的设备观看事件向上传递给父组件
|
|
*
|
|
* @param {boolean} isWatching - 是否正在观看卫星设备
|
|
*/
|
|
const handleDeviceWatch = (isWatching) => {
|
|
emit('device-watch', isWatching)
|
|
}
|
|
|
|
onMounted(() => {
|
|
// 使用 nextTick 确保 DOM 完全渲染
|
|
setTimeout(() => {
|
|
isMounted.value = true
|
|
}, 0)
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/styles/mixins.scss' as *;
|
|
@use '../../assets/styles/common.scss' as *;
|
|
|
|
.map-viewer {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
// MapViewport 会自动填满父容器
|
|
// 地图相关的样式由 MapViewport 组件内部处理
|
|
}
|
|
</style>
|