添加按钮 控制左右画面是否同步

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
   }
 }
 

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

@@ -36,6 +36,14 @@
 
       <!-- 场景标签层 - 独立层级，显示在遮罩层之上 -->
       <div class="situational-awareness__scene-labels-layer">
+        <ActionButton
+          type="primary"
+          v-if="isCompareMode"
+          class="situational-awareness__sync-btn"
+          @click="toggleCameraSync"
+          :text="isCameraSyncEnabled ? '同步' : '不同步'"
+        >
+        </ActionButton>
         <!-- 灾前现场实景标签 - 在中间分割线左侧 -->
         <SceneLabel
           v-if="isCompareMode"
@@ -325,7 +333,14 @@ const {
 // ====================
 
 // 双地图对比功能
-const { isCompareMode, toggleCompareMode } = useDualMapCompare();
+const { isCompareMode, toggleCompareMode, isCameraSyncEnabled } =
+  useDualMapCompare();
+
+const toggleCameraSync = () => {
+  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; // 恢复按钮的交互能力
+    }
   }
 
   // 浮动面板层 - 使用绝对定位固定面板位置