refactor(screen): 重构地图查看器布局并集成真实地图组件
用 MapViewport 组件替换占位符地图，为地图、遮罩、面板和控件添加分层布局。实现控件的传送功能，增加图标加载的错误处理，并使用相机定位初始化地图存储。移除静态标记，转而支持动态实体点击处理（待办）。使用容器查询更新样式以实现响应式设计。
This commit is contained in:
parent
21ed5472e4
commit
ba76292c53
@ -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;
|
||||
bottom: vh(30);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
position: relative; // 改为相对定位，由父容器控制位置
|
||||
display: flex;
|
||||
gap: vw(14);
|
||||
align-items: flex-end;
|
||||
|
||||
@ -1,43 +1,30 @@
|
||||
<template>
|
||||
<div class="map-viewer">
|
||||
<div class="map-viewer__container">
|
||||
<!-- 这里放置实际的3D地图组件（如 Cesium, Mapbox GL JS 等） -->
|
||||
<div class="map-placeholder">
|
||||
</div>
|
||||
<!-- Cesium 地图容器 -->
|
||||
<MapViewport />
|
||||
|
||||
<!-- 地图控制工具 -->
|
||||
<!-- 地图控制工具 - 使用 Teleport 传送到更高层级 -->
|
||||
<!-- 延迟渲染确保目标元素已存在 -->
|
||||
<Teleport to="#sa-controls" v-if="isMounted">
|
||||
<MapControls />
|
||||
|
||||
<!-- 地图标记点（应急人员、应急中心等） -->
|
||||
<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>
|
||||
</Teleport>
|
||||
</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) => {
|
||||
console.log('点击标记:', type)
|
||||
emit('marker-click', type)
|
||||
}
|
||||
onMounted(() => {
|
||||
// 使用 nextTick 确保 DOM 完全渲染
|
||||
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 {
|
||||
width: 100%;
|
||||
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));
|
||||
}
|
||||
// MapViewport 会自动填满父容器
|
||||
// 地图相关的样式由 MapViewport 组件内部处理
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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 />
|
||||
|
||||
<!-- 中央地图区域 -->
|
||||
<MapViewer @marker-click="handleMarkerClick" />
|
||||
|
||||
<!-- 右侧面板 -->
|
||||
</div>
|
||||
<div class="situational-awareness__center-spacer" aria-hidden="true"></div>
|
||||
<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 {
|
||||
content: '';
|
||||
// 地图底层 - 填满整个容器
|
||||
&__map-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url(../3DSituationalAwarenessCopy/assets/img/SketchPng6e145958ea0dbf76e6562cc7965debbb95226caff3271c366ac9b254cbe6e796.png)
|
||||
center/cover no-repeat;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
inset: 0;
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user