diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useDualMapCompare.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useDualMapCompare.js index e199810..7699392 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useDualMapCompare.js +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useDualMapCompare.js @@ -1,4 +1,4 @@ -import { ref, onUnmounted } from 'vue' +import { ref, onUnmounted, watch } from 'vue' import * as Cesium from 'cesium' import { use3DTiles } from './use3DTiles' import { useMapMarkers } from '../composables/useMapMarkers' @@ -19,6 +19,26 @@ export function useDualMapCompare() { /** 对比模式是否激活 */ const isCompareMode = ref(false) + /** 相机同步是否启用 */ + const isCameraSyncEnabled = ref(false) + + watch(isCameraSyncEnabled, (newValue) => { + console.log(`[useDualMapCompare] 相机同步状态变化: ${newValue}`) + if (newValue) { + // 启用同步 + if (leftViewer.value && rightViewer.value && !leftViewer.value.isDestroyed() && !rightViewer.value.isDestroyed()) { + console.log('[useDualMapCompare] 自动启动相机同步') + startCameraSync(rightViewer.value, leftViewer.value) + } else { + console.warn('[useDualMapCompare] 无法自动启动相机同步,Viewer未初始化或已销毁') + } + } else { + // 禁用同步 + console.log('[useDualMapCompare] 自动停止相机同步') + stopCameraSync() + } + }) + /** 相机同步监听器移除函数 */ let cameraSyncRemover = null @@ -344,6 +364,40 @@ export function useDualMapCompare() { console.log('[useDualMapCompare] 智能同步设置完成') } + /** + * 启动相机同步 + * @param {Cesium.Viewer} rightViewerInstance - 右侧Viewer(主地图,驱动者) + * @param {Cesium.Viewer} leftViewerInstance - 左侧Viewer(对比地图,跟随者) + */ + const startCameraSync = (rightViewerInstance, leftViewerInstance) => { + if (isCameraSyncEnabled.value) { + setupCameraSync(rightViewerInstance, leftViewerInstance) + console.log('[useDualMapCompare] 相机同步已启用') + } else { + console.warn('[useDualMapCompare] 尝试启用相机同步,但同步开关未开启') + } + } + + /** + * 停止相机同步 + */ + const stopCameraSync = () => { + if (cameraSyncRemover) { + cameraSyncRemover() + cameraSyncRemover = null + console.log('[useDualMapCompare] 相机同步已停止') + } + } + + /** + * 切换相机同步开关 + * @param {boolean} active - true启用,false禁用 + */ + const toggleCameraSync = (active) => { + console.log(`[useDualMapCompare] 手动切换相机同步: ${active}`) + isCameraSyncEnabled.value = active + } + /** * 启用对比模式 * @param {Cesium.Viewer} rightViewerInstance - 右侧Viewer实例(主地图,灾后场景) @@ -533,8 +587,10 @@ export function useDualMapCompare() { leftViewerInstance.scene.requestRender() leftViewerInstance.camera.changed.raiseEvent() - // 设置相机同步(单向:右→左) - setupCameraSync(rightViewerInstance, leftViewerInstance) + // 设置相机同步(单向:右→左),根据开关状态来决定是否启动 + if (isCameraSyncEnabled.value) { + startCameraSync(rightViewerInstance, leftViewerInstance) + } // 根据选项决定是否加载左侧模型 if (!skipLeftModelLoad) { @@ -578,10 +634,7 @@ export function useDualMapCompare() { console.log('[useDualMapCompare] 禁用对比模式...') // 移除相机同步 - if (cameraSyncRemover) { - cameraSyncRemover() - cameraSyncRemover = null - } + stopCameraSync() // 销毁左侧Viewer if (leftViewer.value && !leftViewer.value.isDestroyed()) { @@ -666,9 +719,13 @@ export function useDualMapCompare() { leftViewer, rightViewer, isCompareMode, + isCameraSyncEnabled, enableCompareMode, disableCompareMode, - toggleCompareMode + toggleCompareMode, + toggleCameraSync, + startCameraSync, + stopCameraSync } } diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue index 0d014f7..2c6fc22 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue @@ -36,6 +36,14 @@
+ + { + ElMessage.success(isCameraSyncEnabled.value ? "画面同步已关闭" : "画面同步已启用"); + console.log("[index.vue] 切换相机同步状态"); + isCameraSyncEnabled.value = !isCameraSyncEnabled.value; +}; // 地图标记功能 const { @@ -1806,6 +1821,15 @@ provide("triggerJump", (duration = 5, height = 30) => { inset: 0; z-index: 10; pointer-events: none; // 标签不阻挡交互 + + .situational-awareness__sync-btn { + position: absolute; + left: 40%; + top: 133px; + height: 31px; + transform: translateX(calc(-100% - vw(10))); + pointer-events: auto; // 恢复按钮的交互能力 + } } // 浮动面板层 - 使用绝对定位固定面板位置