refactor(screen): 重构地图查看器布局并集成真实地图组件

用 MapViewport 组件替换占位符地图，为地图、遮罩、面板和控件添加分层布局。实现控件的传送功能，增加图标加载的错误处理，并使用相机定位初始化地图存储。移除静态标记，转而支持动态实体点击处理（待办）。使用容器查询更新样式以实现响应式设计。

packages/screen/src/views/3DSituationalAwarenessRefactor/components/MapViewer/MapControls.vue

@@ -42,7 +42,7 @@
 
 <script setup>
 import { ref } from "vue";
-import { MAP_TOOLS, DEVICE_WATCH } from "../../constants";
+import { MAP_TOOLS, DEVICE_WATCH } from "../../constants.js";
 
 // 卫星设备观看状态
 const isWatchingDevice = ref(false);
@@ -53,16 +53,25 @@ const activeTool = ref(null);
 // 定义对外事件
 const emit = defineEmits(["device-watch", "tool-change"]);
 
+// 调试：检查常量是否正确加载
+console.log('MapControls - MAP_TOOLS:', MAP_TOOLS);
+console.log('MapControls - DEVICE_WATCH:', DEVICE_WATCH);
+
 /**
  * 获取设备图标
  */
 const getDeviceIcon = () => {
   const iconName = DEVICE_WATCH.icon;
   const state = isWatchingDevice.value ? "点亮" : "";
+  try {
     return new URL(
       `../../assets/images/MapControls/${iconName}${state}.png`,
       import.meta.url
     ).href;
+  } catch (error) {
+    console.error('加载设备图标失败:', error);
+    return '';
+  }
 };
 
 /**
@@ -71,10 +80,15 @@ const getDeviceIcon = () => {
 const getToolIcon = (tool) => {
   const iconName = tool.icon;
   const state = activeTool.value === tool.key ? "点亮" : "";
+  try {
     return new URL(
       `../../assets/images/MapControls/${iconName}${state}.png`,
       import.meta.url
     ).href;
+  } catch (error) {
+    console.error('加载工具图标失败:', error, tool);
+    return '';
+  }
 };
 
 /**
@@ -109,11 +123,7 @@ const handleToolClick = (toolKey) => {
 @use "../../assets/styles/common.scss" as *;
 
 .map-controls {
-  position: absolute;
+  position: relative; // 改为相对定位，由父容器控制位置
-  bottom: vh(30);
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
   display: flex;
   gap: vw(14);
   align-items: flex-end;

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

@@ -1,43 +1,30 @@
 <template>
   <div class="map-viewer">
-    <div class="map-viewer__container">
+    <!-- Cesium 地图容器 -->
-      <!-- 这里放置实际的3D地图组件（如 Cesium, Mapbox GL JS 等） -->
+    <MapViewport />
-      <div class="map-placeholder">
-      </div>
 
-      <!-- 地图控制工具 -->
+    <!-- 地图控制工具 - 使用 Teleport 传送到更高层级 -->
+    <!-- 延迟渲染确保目标元素已存在 -->
+    <Teleport to="#sa-controls" v-if="isMounted">
       <MapControls />
-
+    </Teleport>
-      <!-- 地图标记点（应急人员、应急中心等） -->
-      <div class="map-markers">
-        <img
-          src="../../assets/images/SketchPng9eb481bdb1aa555bcf1e817c3db9af492e273f88d5808c989826a8c382c5cb9f.png"
-          alt="marker"
-          class="map-marker"
-          style="top: 40%; left: 45%"
-          @click="handleMarkerClick('personnel')"
-        />
-        <img
-          src="../../assets/images/SketchPng3992df008169f438b4eab0a5f08b6d39b14f1387a18c08564067b7845d11b124.png"
-          alt="center"
-          class="map-marker"
-          style="top: 60%; left: 55%"
-          @click="handleMarkerClick('center')"
-        />
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
+import { MapViewport } from '@/map'
 import MapControls from './MapControls.vue'
 
-const emit = defineEmits(['marker-click'])
+// 延迟标志，确保 Teleport 目标元素已存在
+const isMounted = ref(false)
 
-const handleMarkerClick = (type) => {
+onMounted(() => {
-  console.log('点击标记:', type)
+  // 使用 nextTick 确保 DOM 完全渲染
-  emit('marker-click', type)
+  setTimeout(() => {
-}
+    isMounted.value = true
+  }, 0)
+})
 </script>
 
 <style scoped lang="scss">
@@ -45,83 +32,11 @@ const handleMarkerClick = (type) => {
 @use '../../assets/styles/common.scss' as *;
 
 .map-viewer {
-  flex: 1;
-  height: 100%;
   position: relative;
-
-  &__container {
   width: 100%;
   height: 100%;
-    position: relative;
-    background: url(../../assets/images/SketchPng6e145958ea0dbf76e6562cc7965debbb95226caff3271c366ac9b254cbe6e796.png) center/cover no-repeat;
-    overflow: hidden;
 
-    .map-placeholder {
+  // MapViewport 会自动填满父容器
-      width: 100%;
+  // 地图相关的样式由 MapViewport 组件内部处理
-      height: 100%;
-      background: linear-gradient(135deg, rgba(9, 22, 40, 0.9) 0%, rgba(20, 53, 118, 0.7) 100%);
-      position: relative;
-
-      // 实际使用时，这里会被3D地图组件替换
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: url(../../assets/images/SketchPng6e145958ea0dbf76e6562cc7965debbb95226caff3271c366ac9b254cbe6e796.png) center/cover;
-        opacity: 0.1;
-        pointer-events: none;
-      }
-
-      .map-watermark {
-        position: absolute;
-        top: vh(20);
-        left: 50%;
-        transform: translateX(-50%);
-        padding: vh(8) vw(20);
-        background: rgba(0, 0, 0, 0.6);
-        border-radius: vw(6);
-        color: var(--text-white);
-        font-size: fs(14);
-        font-family: SourceHanSansCN-Medium, sans-serif;
-      }
-    }
-
-    .map-markers {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-
-      .map-marker {
-        position: absolute;
-        width: vw(32);
-        height: vh(36);
-        cursor: pointer;
-        pointer-events: all;
-        transition: transform 0.3s;
-        animation: markerBounce 2s ease-in-out infinite;
-
-        &:hover {
-          transform: scale(1.2);
-          animation: none;
-        }
-      }
-    }
-  }
-}
-
-@keyframes markerBounce {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(vh(-10));
-  }
 }
 </style>

packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue

@@ -5,15 +5,30 @@
 
     <!-- 主内容区域 -->
     <div class="situational-awareness__main">
-      <!-- 左侧面板 -->
+      <!-- 地图底层 -->
+      <div class="situational-awareness__map-layer">
+        <MapViewer />
+      </div>
+
+      <!-- 地图遮罩层 -->
+      <div class="situational-awareness__map-mask" aria-hidden="true"></div>
+
+      <!-- 浮动面板层 -->
+      <div class="situational-awareness__panels-layer">
+        <div class="situational-awareness__panel-column situational-awareness__panel-column--left">
           <LeftPanel />
-
+        </div>
-      <!-- 中央地图区域 -->
+        <div class="situational-awareness__center-spacer" aria-hidden="true"></div>
-      <MapViewer @marker-click="handleMarkerClick" />
+        <div class="situational-awareness__panel-column situational-awareness__panel-column--right">
-
-      <!-- 右侧面板 -->
           <RightPanel />
         </div>
+      </div>
+
+      <!-- 地图控件层 - 高于遮罩和面板 -->
+      <div class="situational-awareness__controls-layer">
+        <div id="sa-controls" class="situational-awareness__controls"></div>
+      </div>
+    </div>
 
     <!-- 弹窗组件 -->
     <PersonnelDetail
@@ -32,7 +47,7 @@
 </template>
 
 <script setup>
-import { ref, provide } from 'vue'
+import { ref, provide, onMounted } from 'vue'
 import PageHeader from './components/PageHeader.vue'
 import LeftPanel from './components/LeftPanel/index.vue'
 import MapViewer from './components/MapViewer/index.vue'
@@ -40,6 +55,7 @@ import RightPanel from './components/RightPanel/index.vue'
 import PersonnelDetail from './components/Popups/PersonnelDetail.vue'
 import EmergencyCenterDetail from './components/Popups/EmergencyCenterDetail.vue'
 import { useDisasterData } from './composables/useDisasterData'
+import { useMapStore } from '@/map'
 
 // 使用灾害数据
 const disasterData = useDisasterData()
@@ -47,6 +63,23 @@ const disasterData = useDisasterData()
 // 提供给子组件使用
 provide('disasterData', disasterData)
 
+// 地图 store
+const mapStore = useMapStore()
+
+// 初始化地图
+onMounted(() => {
+  // 等待地图就绪后配置初始视图
+  mapStore.onReady(() => {
+    const { camera } = mapStore.services()
+
+    // 设置初始相机位置（以重庆忠县为例，可根据实际需求调整）
+    // 经度: 108.0, 纬度: 30.3, 高度: 50000 米
+    camera.setCenter(108.0, 30.3, 50000)
+
+    console.log('3D态势感知地图已就绪')
+  })
+})
+
 // 弹窗状态
 const showPersonnelDetail = ref(false)
 const showCenterDetail = ref(false)
@@ -75,21 +108,30 @@ const handleBack = () => {
   // router.push('/cockpit')
 }
 
-// 处理地图标记点击
-const handleMarkerClick = (type) => {
-  if (type === 'personnel') {
-    showPersonnelDetail.value = true
-  } else if (type === 'center') {
-    showCenterDetail.value = true
-  }
-}
-
 // 处理人员联动
 const handlePersonnelLink = (personnel) => {
   console.log('联动人员:', personnel)
-  // 实际实现：在地图上定位该人员，调用通信功能等
+  // 实际实现：使用 mapStore 的 camera service 飞行到人员位置
+  // const { camera } = mapStore.services()
+  // camera.flyTo({ destination: [lon, lat, height] })
   showPersonnelDetail.value = false
 }
+
+// TODO: 实现地图实体点击事件监听
+// 当用户点击地图上的标记点时，显示对应的详情弹窗
+// mapStore.onReady(() => {
+//   const { query } = mapStore.services()
+//   // 监听实体点击事件
+//   query.onEntityClick((entity) => {
+//     if (entity.type === 'personnel') {
+//       selectedPersonnel.value = entity.properties
+//       showPersonnelDetail.value = true
+//     } else if (entity.type === 'center') {
+//       selectedCenter.value = entity.properties
+//       showCenterDetail.value = true
+//     }
+//   })
+// })
 </script>
 
 <style scoped lang="scss">
@@ -97,41 +139,125 @@ const handlePersonnelLink = (personnel) => {
 @use './assets/styles/common.scss' as *;
 
 .situational-awareness {
-  width: 100vw;
+  // 容器查询设置，用于嵌入场景的自适应缩放
-  height: 100vh;
+  container-name: situational-awareness;
+  container-type: size;
+
+  // 为旧版浏览器提供视口单位回退
+  --cq-inline-100: 100vw;
+  --cq-block-100: 100vh;
+
+  // 当支持容器单位时覆盖为容器单位
+  @supports (width: 1cqw) {
+    --cq-inline-100: 100cqw;
+  }
+  @supports (height: 1cqh) {
+    --cq-block-100: 100cqh;
+  }
+
+  // 可配置的布局变量（使用 calc 直接计算，避免函数嵌套）
+  --sa-left-width: calc(464 / 1920 * var(--cq-inline-100, 100vw));
+  --sa-right-width: calc(486 / 1920 * var(--cq-inline-100, 100vw));
+  --sa-gap: calc(16 / 1920 * var(--cq-inline-100, 100vw));
+  --sa-padding: calc(16 / 1920 * var(--cq-inline-100, 100vw));
+  --sa-min-width: 1280px;
+  --sa-min-height: 720px;
+
+  width: 100%;
+  height: 100%;
+  min-width: var(--sa-min-width);
+  min-height: var(--sa-min-height);
   background-color: var(--bg-dark);
-  overflow: hidden;
+  overflow: auto; // 当宿主尺寸 < 最小尺寸时允许滚动
   display: flex;
   flex-direction: column;
 
   &__main {
+    position: relative;
     flex: 1;
-    display: grid;
-    grid-template-columns: vw(564) 1fr vw(526);
-    gap: 0;
     min-height: 0;
     background: url(./assets/images/main-bg.png) center/cover no-repeat;
-    position: relative;
+    overflow: hidden;
+  }
 
-    // 背景地图图片
+  // 地图底层 - 填满整个容器
-    &::before {
+  &__map-layer {
-      content: '';
     position: absolute;
-      top: 0;
+    inset: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: url(../3DSituationalAwarenessCopy/assets/img/SketchPng6e145958ea0dbf76e6562cc7965debbb95226caff3271c366ac9b254cbe6e796.png)
-        center/cover no-repeat;
-      opacity: 0.3;
-      pointer-events: none;
     z-index: 0;
   }
 
-    > * {
+  // 地图遮罩层 - 覆盖在地图之上，增强视觉效果
-      position: relative;
+  &__map-mask {
+    position: absolute;
+    inset: 0;
     z-index: 1;
+    pointer-events: none; // 不阻挡交互
+    // 使用 cockpit 的遮罩层图片，保持视觉一致性
+    background: url(@/views/cockpit/assets/img/遮罩层.png) center/cover no-repeat;
   }
+
+  // 浮动面板层 - grid 与 pointer-events 结合保证中间透明
+  &__panels-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: grid;
+    grid-template-columns: var(--sa-left-width) 1fr var(--sa-right-width);
+    grid-auto-rows: 1fr;
+    gap: var(--sa-gap); // 列之间的间距
+    height: 100%;
+    padding: var(--sa-padding); // 面板与容器边缘的间距
+    pointer-events: none; // 容器不拦截事件，让中间区域透明
+  }
+
+  // 左右面板列 - 浮动卡片样式
+  &__panel-column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sa-gap); // 列内子面板之间的间距
+    min-width: 0; // 防止在窄容器中溢出
+    min-height: 0; // 允许 flex 子元素收缩并启用滚动
+    pointer-events: auto; // 恢复面板的交互能力
+  }
+
+  // 中间占位区域 - 透明且不可交互，点击穿透到地图
+  &__center-spacer {
+    pointer-events: none;
+  }
+
+  // 地图控件层 - 高于遮罩和面板，用于放置地图控制工具
+  &__controls-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    pointer-events: none; // 容器不拦截事件
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    padding-bottom: 30px; // 临时使用固定值，确保控件显示
+  }
+
+  // 控件容器 - 恢复交互能力
+  &__controls {
+    pointer-events: auto;
+    position: relative;
+    // 调试：确保控件容器可见
+    min-height: 56px; // MapControls 的高度
   }
 }
+
+// 窄容器嵌入的紧凑布局（<1100px 宽度）
+.situational-awareness.is-compact {
+  --sa-left-width: calc(380 / 1920 * var(--cq-inline-100, 100vw));
+  --sa-right-width: calc(400 / 1920 * var(--cq-inline-100, 100vw));
+  --sa-gap: calc(12 / 1920 * var(--cq-inline-100, 100vw));
+  --sa-padding: calc(12 / 1920 * var(--cq-inline-100, 100vw));
+}
+
+// 嵌入模式 - 使用更保守的最小尺寸
+.situational-awareness.is-embedded {
+  --sa-min-width: 1024px;
+  --sa-min-height: 600px;
+}
 </style>