+
+
+
+
- }
+ */
+ const addReserveCenterMarkers = async (viewer, reserveData, options = {}) => {
+ if (!viewer) {
+ console.warn('[useMapMarkers] addReserveCenterMarkers: viewer 为空')
+ return
+ }
+
+ if (!Array.isArray(reserveData) || reserveData.length === 0) {
+ console.warn('[useMapMarkers] addReserveCenterMarkers: reserveData 为空或不是数组')
+ return
+ }
+
+ const markerOptions = {
+ heightOffset: options.heightOffset ?? DEFAULT_HEIGHT_OFFSET
+ }
+
+ console.log('[useMapMarkers] 开始添加储备中心和预置点标记...', reserveData.length)
+
+ const entities = []
+
+ for (const item of reserveData) {
+ if (!item.gl1Lat || !item.gl1Lng) {
+ console.warn('[useMapMarkers] 数据缺少坐标信息:', item)
+ continue
+ }
+
+ const result = await resolveCartesianFromDegrees(
+ viewer,
+ item.gl1Lng,
+ item.gl1Lat,
+ markerOptions.heightOffset,
+ false
+ )
+
+ // 根据类型选择图标和类型标识
+ // gl1Lx: 2=储备中心, 3=预置点
+ const itemType = String(item.gl1Lx).trim()
+ const isReserveCenter = itemType === '2'
+ const icon = isReserveCenter ? reserveCenterIcon : emergencyBaseIcon
+ const type = isReserveCenter ? 'reserveCenter' : 'presetPoint'
+
+ const entity = viewer.entities.add({
+ position: result.position,
+ billboard: {
+ image: icon,
+ width: 48,
+ height: 48,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ heightReference: resolveBillboardHeightReference(result.samplingSucceeded),
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
+ },
+ properties: {
+ type,
+ id: item.gl1Id,
+ name: item.gl1Yjllmc || (isReserveCenter ? '储备中心' : '预置点'),
+ district: item.gl1Qxmc || '-',
+ personnelCount: item.gl1Rysl || '0',
+ area: item.gl1Zdmj || '-'
+ }
+ })
+ entities.push(entity)
+ }
+
+ reserveCenterEntities.value = entities
+ console.log(`[useMapMarkers] 添加储备中心/预置点标记 ${entities.length} 个`)
+
+ // 强制渲染场景，确保 CLAMP_TO_GROUND 立即生效
+ if (entities.length > 0) {
+ viewer.scene.requestRender()
+ }
+ }
+
/**
* 根据API数据添加应急资源标记（养护站）
* @param {Cesium.Viewer} viewer
@@ -665,6 +769,7 @@ export function useMapMarkers() {
collapseAreaEntities,
markerEntities,
emergencyResourceEntities,
+ reserveCenterEntities,
initializeMarkers,
clearMarkers,
setMarkersSplitDirection,
@@ -675,6 +780,8 @@ export function useMapMarkers() {
addRandomMarkers,
addEmergencyResourceMarkers,
clearEmergencyResourceMarkers,
+ addReserveCenterMarkers,
+ clearReserveCenterMarkers,
getCollapseCenter: calculateCollapseCenter // 提前获取中心点，不依赖标记初始化
}
}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/config/modelCompare.config.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/config/modelCompare.config.js
index d1b17c1..b5cece5 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/config/modelCompare.config.js
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/config/modelCompare.config.js
@@ -44,7 +44,7 @@ export const AFTER_3DTILES_CONFIG = {
// 3D Tiles 服务 URL
// url: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/model/S107/terra_b3dms/tileset.json',
- url: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/model/ylzg/zxyj1119/terra_b3dms/tileset.json',
+ url: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/model/ylzg/zxyj1120/terra_b3dms/tileset.json',
// 默认可见性（初始化时灾后模型默认显示）
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
index 1c222c0..8fc1446 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
@@ -181,6 +181,7 @@ import eventIcon from "./assets/images/事件icon.png";
import soldierIcon from "./assets/images/SketchPngfbec927027ff9e49207749ebaafd229429315341fda199251b6dfb1723ff17fb.png";
import deviceIcon from "./assets/images/SketchPng860d54f2a31f5f441fc6a88081224f1e98534bf6d5ca1246e420983bdf690380.png";
import emergencyBaseIcon from "./assets/images/应急基地.png";
+import reserveCenterIcon from "./assets/images/储备中心.png";
// 折叠按钮图标
import collapseLeftArrow from "./assets/images/折叠面板左箭头.png";
@@ -203,6 +204,9 @@ const handleDistanceChange = async (newDistance) => {
// 重新加载应急资源数据并更新地图标记
await loadEmergencyResources(108.011506, 30.175827);
+
+ // 重新加载储备中心和预置点数据并更新地图标记
+ await loadReserveCentersAndPresets(108.011506, 30.175827);
};
// 提供给子组件使用
@@ -222,6 +226,8 @@ const {
getCollapseCenter,
addEmergencyResourceMarkers,
clearEmergencyResourceMarkers,
+ addReserveCenterMarkers,
+ clearReserveCenterMarkers,
} = useMapMarkers();
// 地图 Tooltip 功能
@@ -300,6 +306,11 @@ const setupMapClickHandler = (viewer) => {
showMarkerTooltip(viewer, markerEntity, click.position, icon);
foundMarker = true;
break;
+ } else if (type === 'reserveCenter' || type === 'presetPoint') {
+ const icon = type === 'reserveCenter' ? reserveCenterIcon : emergencyBaseIcon;
+ showMarkerTooltip(viewer, markerEntity, click.position, icon);
+ foundMarker = true;
+ break;
}
}
}
@@ -328,6 +339,10 @@ const setupMapClickHandler = (viewer) => {
? emergencyCenterIcon
: emergencyBaseIcon;
showMarkerTooltip(viewer, entity, click.position, icon);
+ } else if (type === 'reserveCenter' || type === 'presetPoint') {
+ // 储备中心和预置点
+ const icon = type === 'reserveCenter' ? reserveCenterIcon : emergencyBaseIcon;
+ showMarkerTooltip(viewer, entity, click.position, icon);
}
}
} else {
@@ -431,6 +446,23 @@ const showMarkerTooltip = (viewer, entity, screenPosition, icon) => {
{ label: '距离', value: `${distance}公里` }
);
}
+ } else if (type === 'reserveCenter') {
+ // 储备中心
+ title = '储备中心';
+ fields.push(
+ { label: '名称', value: properties.name?.getValue() || '-' },
+ { label: '区县', value: properties.district?.getValue() || '-' },
+ { label: '人员数量', value: properties.personnelCount?.getValue() || '0' },
+ { label: '占地面积', value: properties.area?.getValue() ? `${properties.area?.getValue()}㎡` : '-' }
+ );
+ } else if (type === 'presetPoint') {
+ // 预置点
+ title = '预置点';
+ fields.push(
+ { label: '名称', value: properties.name?.getValue() || '-' },
+ { label: '区县', value: properties.district?.getValue() || '-' },
+ { label: '人员数量', value: properties.personnelCount?.getValue() || '0' }
+ );
}
// 显示 Tooltip，使用实体的屏幕坐标
@@ -519,22 +551,20 @@ onMounted(() => {
});
viewer.entities.add(defaultPoint);
- // 在默认点附近添加10个模拟点位（应急人员和应急装备），分散在10km范围内
- // 1度纬度约等于111km，1度经度在30度纬度约等于96km
- // 10km约等于0.09度纬度，0.104度经度
+ // 在默认点附近添加10个模拟点位（应急人员和应急装备）
const simulatedPoints = [
- // 应急人员 - 分散在不同方向
- { type: 'soldier', name: '张三', department: '应急救援队', lon: 108.051, lat: 30.205, distance: 4.2, icon: soldierIcon },
- { type: 'soldier', name: '李四', department: '消防队', lon: 107.975, lat: 30.195, distance: 5.8, icon: soldierIcon },
- { type: 'soldier', name: '王五', department: '医疗队', lon: 108.025, lat: 30.155, distance: 3.5, icon: soldierIcon },
- { type: 'soldier', name: '赵六', department: '应急救援队', lon: 108.085, lat: 30.168, distance: 7.2, icon: soldierIcon },
- { type: 'soldier', name: '刘七', department: '消防队', lon: 107.945, lat: 30.182, distance: 8.5, icon: soldierIcon },
- // 应急装备 - 分散在不同方向
- { type: 'device', name: '救援车辆A', deviceType: '消防车', lon: 108.065, lat: 30.185, distance: 6.3, icon: deviceIcon },
- { type: 'device', name: '救援车辆B', deviceType: '救护车', lon: 107.960, lat: 30.165, distance: 6.8, icon: deviceIcon },
- { type: 'device', name: '无人机A', deviceType: 'DJI', lon: 108.035, lat: 30.225, distance: 5.5, icon: deviceIcon },
- { type: 'device', name: '无人机B', deviceType: 'DJI', lon: 108.095, lat: 30.195, distance: 9.2, icon: deviceIcon },
- { type: 'device', name: '通讯设备', deviceType: '卫星电话', lon: 107.930, lat: 30.175, distance: 9.8, icon: deviceIcon }
+ // 应急人员 (6个)
+ { type: 'soldier', name: '张三', department: '应急救援队', lon: 107.97, lat: 30.25, distance: 2.5, icon: soldierIcon },
+ { type: 'soldier', name: '李四', department: '消防队', lon: 107.971901, lat: 30.251428, distance: 2.3, icon: soldierIcon },
+ { type: 'soldier', name: '王五', department: '医疗队', lon: 107.974901, lat: 30.241428, distance: 3.1, icon: soldierIcon },
+ { type: 'soldier', name: '赵六', department: '应急救援队', lon: 108.047344, lat: 30.164313, distance: 4.2, icon: soldierIcon },
+ { type: 'soldier', name: '刘七', department: '消防队', lon: 108.046344, lat: 30.168313, distance: 3.8, icon: soldierIcon },
+ { type: 'soldier', name: '陈八', department: '医疗队', lon: 108.050344, lat: 30.170313, distance: 4.5, icon: soldierIcon },
+ // 应急装备 (4个)
+ { type: 'device', name: '救援车辆A', deviceType: '消防车', lon: 107.98088, lat: 30.2487, distance: 2.8, icon: deviceIcon },
+ { type: 'device', name: '救援车辆B', deviceType: '救护车', lon: 107.97898, lat: 30.2502, distance: 2.6, icon: deviceIcon },
+ { type: 'device', name: '无人机A', deviceType: 'DJI', lon: 108.049344, lat: 30.160313, distance: 4.8, icon: deviceIcon },
+ { type: 'device', name: '无人机B', deviceType: 'DJI', lon: 108.043344, lat: 30.169313, distance: 3.6, icon: deviceIcon }
];
simulatedPoints.forEach(point => {
@@ -721,10 +751,60 @@ const loadEmergencyResources = async (longitude, latitude) => {
}
};
+// 加载储备中心和预置点数据
+const loadReserveCentersAndPresets = async (longitude, latitude) => {
+ try {
+ const response = await request({
+ url: `/snow-ops-platform/yhYjll/list`,
+ method: "GET",
+ params: {
+ longitude,
+ latitude,
+ maxDistance: disasterData.forcePreset.value.searchRadius,
+ },
+ });
+
+ if (response?.data && Array.isArray(response.data)) {
+ console.log("[index.vue] 储备中心和预置点数据加载成功:", response.data);
+
+ // 更新地图标记
+ if (mapStore.viewer) {
+ console.log("[index.vue] 添加储备中心和预置点地图标记...");
+
+ // 清除旧的标记
+ clearReserveCenterMarkers(mapStore.viewer);
+
+ // 添加新的标记
+ await addReserveCenterMarkers(
+ mapStore.viewer,
+ response.data,
+ { heightOffset: 10 }
+ );
+ } else {
+ console.warn("[index.vue] 地图viewer未就绪，跳过标记更新");
+ }
+ } else {
+ console.warn("[index.vue] 储备中心和预置点接口返回数据为空");
+ }
+
+ return response;
+ } catch (error) {
+ console.error("[index.vue] 加载储备中心和预置点数据失败:", error);
+ ElMessage.warning({
+ message: "储备中心和预置点数据加载失败",
+ duration: 3000,
+ });
+ return null;
+ }
+};
+
onMounted(async () => {
// 加载应急资源数据(使用默认灾害点坐标)
// await loadEmergencyResources(108.011506, 30.175827);
const response = await loadEmergencyResources(108.011506, 30.175827);
+
+ // 加载储备中心和预置点数据(使用相同的坐标)
+ await loadReserveCentersAndPresets(108.011506, 30.175827);
});
/**
@@ -1134,8 +1214,8 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
// 左右面板列 - 浮动卡片样式
&__panel-column {
position: absolute;
- top: var(--sa-header-height); // 从 header 下方开始
- bottom: 0;
+ // top: var(--sa-header-height); // 从 header 下方开始
+ // bottom: 0;
display: flex;
flex-direction: column;
gap: var(--sa-gap); // 列内子面板之间的间距
@@ -1274,7 +1354,7 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
// 加载动画层 - 一键启动后显示
&__loading-layer {
position: absolute;
- top: calc(var(--sa-header-height) + vh(20));
+ top: calc(var(--sa-header-height) + vh(40));
left: 0;
right: 0;
// bottom: 0;
-
-
-
@@ -348,6 +351,7 @@ body.body--no-scroll {
background: rgba(0, 0, 0, 0.6);
padding: clamp(10px, 1.5vh, 20px);
overflow: hidden;
+ position: relative;
}
&__video {
@@ -359,49 +363,50 @@ body.body--no-scroll {
border-radius: vw(8);
}
- // 操作台
+ // 操作台容器
&__console {
- flex-shrink: 0;
position: absolute;
- bottom: 80px;
+ bottom: 100px;
left: 50%;
transform: translateX(-50%);
- height: clamp(80px, 10vh, 120px);
+ z-index: 10;
display: flex;
align-items: center;
- justify-content: center;
+ gap: clamp(10px, 1.5vw, 20px);
}
+ // 轮盘图标
&__console-bg {
- // position: absolute;
- top: 0;
- left: 0;
- // width: 100%;
- height: 85%;
- object-fit: cover;
- z-index: 0;
+ width: clamp(120px, 7vw, 140px);
+ height: clamp(120px, 7vw, 140px);
+ object-fit: contain;
+ flex-shrink: 0;
}
+ // 控制按钮容器
&__control-bar {
- position: relative;
- z-index: 1;
display: flex;
align-items: center;
- justify-content: center;
- gap: clamp(15px, 2vw, 30px);
- padding: 0 clamp(20px, 2vw, 40px);
+ gap: clamp(20px, 2.5vw, 40px);
+ padding: clamp(8px, 1vh, 12px) clamp(20px, 2.5vw, 40px);
+ background: rgba(0, 0, 0, 0.75);
+ border-radius: 50px;
+ backdrop-filter: blur(10px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
&__control-item {
display: flex;
- flex-direction: column;
+ flex-direction: row;
align-items: center;
- gap: clamp(4px, 0.5vh, 8px);
+ gap: clamp(6px, 0.8vw, 10px);
cursor: pointer;
- transition: transform 0.2s ease;
+ transition: transform 0.2s ease, opacity 0.2s ease;
+ padding: clamp(4px, 0.5vh, 8px);
&:hover {
- transform: scale(1.1);
+ transform: scale(1.15);
+ opacity: 0.9;
}
&:active {
@@ -411,22 +416,24 @@ body.body--no-scroll {
&:focus-visible {
outline: 2px solid rgba(135, 206, 250, 0.8);
outline-offset: 4px;
- border-radius: vw(4);
+ border-radius: clamp(4px, 0.5vw, 8px);
}
}
&__control-icon {
- width: clamp(24px, 2.5vw, 36px);
- height: clamp(24px, 2.5vw, 36px);
+ width: clamp(28px, 3vw, 42px);
+ height: clamp(28px, 3vw, 42px);
object-fit: contain;
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
&__control-label {
- font-size: clamp(11px, 1vw, 13px);
+ font-size: clamp(12px, 1.1vw, 14px);
font-family: SourceHanSansCN-Regular, sans-serif;
color: #ffffff;
white-space: nowrap;
line-height: 1.2;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
index 5867cdf..c97df57 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
@@ -225,8 +225,8 @@ onUnmounted(() => {
top: -1px;
left: -3px;
z-index: 2;
- width: clamp(140px, 10.1vw, 194px);
- height: clamp(28px, vh(32), 36px);
+ width: clamp(140px, 10.1vw, 154px);
+ height: clamp(18px, vh(18), 18px);
background: url("../../assets/images/video-time-bg.png") no-repeat
center center;
background-size: 100% 100%;
@@ -275,9 +275,10 @@ onUnmounted(() => {
transform-origin: center;
&__icon {
- width: clamp(12px, vw(14), 18px);
- height: clamp(12px, vh(14), 18px);
- margin-right: clamp(4px, vw(6), 8px);
+ width: clamp(20px, vw(20), 24px);
+ // height: clamp(14px, vw(14), 18px);
+ height: auto;
+ // margin-right: clamp(4px, vw(6), 8px);
flex-shrink: 0;
object-fit: contain;
}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue
index 01c4c55..480ab12 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue
@@ -41,6 +41,8 @@ import CollaborationInfo from './CollaborationInfo.vue'
overflow-y: auto;
overscroll-behavior: contain;
padding-right: vw(40); // 为右侧折叠按钮预留空间
+ padding-top: var(--sa-header-height);
+ box-sizing: border-box;
&::-webkit-scrollbar {
width: vw(6);
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/DataField.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/DataField.vue
index 8b8b28b..fbbf00f 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/DataField.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/DataField.vue
@@ -60,16 +60,16 @@ const valueClass = computed(() => {
&__label {
color: var(--text-white);
font-size: fs(14);
- font-family: SourceHanSansCN-Medium, sans-serif;
+ // font-family: SourceHanSansCN-Medium, sans-serif;
font-weight: 500;
white-space: nowrap;
}
&__value {
color: var(--text-white);
- font-size: fs(14);
+ font-size: fs(15);
font-family: PingFangSC-Semibold, sans-serif;
- font-weight: 600;
+ font-weight: 700;
flex: 1;
text-align: right;
}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js
index ef51416..eefbab7 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js
@@ -6,7 +6,8 @@ import { cesiumDataConfig } from '../config/cesiumData'
import soldierIcon from '../assets/images/SketchPngfbec927027ff9e49207749ebaafd229429315341fda199251b6dfb1723ff17fb.png'
import deviceIcon from '../assets/images/SketchPng860d54f2a31f5f441fc6a88081224f1e98534bf6d5ca1246e420983bdf690380.png'
import emergencyBaseIcon from '../assets/images/应急基地.png'
-import emergencyCenterIcon from '../assets/images/应急中心.png'
+import emergencyCenterIcon from '../assets/images/应急中心icon定位.png'
+import reserveCenterIcon from '../assets/images/储备中心.png'
// 默认高度偏移（米）- 与 WuRenJi 保持一致
const DEFAULT_HEIGHT_OFFSET = 100
@@ -19,6 +20,7 @@ export function useMapMarkers() {
const collapseAreaEntities = ref([])
const markerEntities = ref([])
const emergencyResourceEntities = ref([]) // 应急资源标记（由API数据动态生成）
+ const reserveCenterEntities = ref([]) // 储备中心和预置点标记
/**
* 获取塌陷区域的所有位置点
@@ -574,6 +576,108 @@ export function useMapMarkers() {
emergencyResourceEntities.value = []
}
+ /**
+ * 清除储备中心和预置点标记
+ * @param {Cesium.Viewer} viewer
+ */
+ const clearReserveCenterMarkers = (viewer) => {
+ if (!viewer) return
+
+ console.log(`[useMapMarkers] 清除 ${reserveCenterEntities.value.length} 个储备中心/预置点标记`)
+
+ reserveCenterEntities.value.forEach(entity => {
+ if (entity) viewer.entities.remove(entity)
+ })
+ reserveCenterEntities.value = []
+ }
+
+ /**
+ * 根据API数据添加储备中心和预置点标记
+ * @param {Cesium.Viewer} viewer
+ * @param {Array} reserveData - API返回的储备中心和预置点数据列表
+ * @param {string} reserveData[].gl1Id - ID
+ * @param {string} reserveData[].gl1Yjllmc - 名称
+ * @param {number} reserveData[].gl1Lng - 经度
+ * @param {number} reserveData[].gl1Lat - 纬度
+ * @param {string} reserveData[].gl1Qxmc - 区县名称
+ * @param {string} reserveData[].gl1Rysl - 人员数量
+ * @param {string} reserveData[].gl1Zdmj - 占地面积
+ * @param {string} reserveData[].gl1Lx - 类型 (2=储备中心, 3=预置点)
+ * @param {Object} options - 配置选项
+ * @param {number} [options.heightOffset=10] - 相对地面的高度偏移（米）
+ * @returns {Promise
- 
- 喊话
-
+
+
- 喊话
-
-
-
- 
- 声音
-
+
+
- 声音
-
+
+ 喊话
+
-
-
+ 喊话
+
- 
- 视觉左移
-
+
+
- 视觉左移
-
+
+ 声音
+
-
-
+ 声音
+
- 
- 视觉右移
-
+
+
- 视觉右移
-
+
+ 视觉左移
+
-
-
+ 视觉左移
+
- 
- 视觉上移
-
+
+
- 视觉上移
-
+
+ 视觉右移
+
-
-
+ 视觉右移
+
- 
- 视觉下移
-
+
+
- 视觉下移
-
+
+ 视觉上移
+
-
-
+ 视觉上移
+
- 
- 缩小
+
+
- 缩小
+
+
+
+ 视觉下移
+
+
+
+
+ 视觉下移
+
+
+ 缩小
+
+ 缩小
+