bxztApp/packages/screen/src/views/3DSituationalAwarenessRefactor/components/MapViewer/index.vue

<template>
  <div class="map-viewer">
    <!-- Cesium 地图容器 -->
    <MapViewport />

    <!-- 地图控制工具 - 使用 Teleport 传送到更高层级 -->
    <!-- 延迟渲染确保目标元素已存在 -->
    <Teleport to="#sa-controls" v-if="isMounted">
      <MapControls />
    </Teleport>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { MapViewport } from '@/map'
import MapControls from './MapControls.vue'

// 延迟标志，确保 Teleport 目标元素已存在
const isMounted = ref(false)

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>