Compare commits

..

2 Commits

Author SHA1 Message Date
Zzc
f1d248eaab Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev 2025-11-24 17:01:01 +08:00
Zzc
a562ad9369 perf(screen): 优化双地图比较中的相机同步
重构相机同步以使用单向(从右到左)同步并结合postRender以获得更好的性能。禁用左侧查看器的所有交互以防止意外更改。直接传递位置引用而非克隆以实现最佳效率。
2025-11-24 17:00:50 +08:00

View File

@ -6,6 +6,7 @@ import { use3DTiles } from './use3DTiles'
* 双地图对比模式 * 双地图对比模式
* 使用两个独立的Cesium Viewer实现并排对比 * 使用两个独立的Cesium Viewer实现并排对比
* 左侧显示灾前场景右侧显示灾后场景 * 左侧显示灾前场景右侧显示灾后场景
* 单向相机同步右侧主地图驱动左侧对比地图跟随
*/ */
export function useDualMapCompare() { export function useDualMapCompare() {
/** 左侧Viewer引用 */ /** 左侧Viewer引用 */
@ -58,17 +59,25 @@ export function useDualMapCompare() {
// 移除默认的Cesium logo和版权信息 // 移除默认的Cesium logo和版权信息
viewer.cesiumWidget.creditContainer.style.display = 'none' viewer.cesiumWidget.creditContainer.style.display = 'none'
// 完全禁用左侧Viewer的所有交互只作为对比显示
viewer.scene.screenSpaceCameraController.enableRotate = false
viewer.scene.screenSpaceCameraController.enableTranslate = false
viewer.scene.screenSpaceCameraController.enableZoom = false
viewer.scene.screenSpaceCameraController.enableTilt = false
viewer.scene.screenSpaceCameraController.enableLook = false
leftViewer.value = viewer leftViewer.value = viewer
console.log('[useDualMapCompare] 左侧Viewer初始化成功') console.log('[useDualMapCompare] 左侧Viewer初始化成功(交互已禁用)')
return viewer return viewer
} }
/** /**
* 设置相机同步 * 设置单向相机同步
* 右侧相机移动时左侧相机跟随 * 右侧主地图驱动左侧对比地图跟随
* @param {Cesium.Viewer} rightViewerInstance - 右侧Viewer主地图 * 使用 postRender 实现逐帧同步直接传递 position 引用以获得最佳性能
* @param {Cesium.Viewer} leftViewerInstance - 左侧Viewer对比地图 * @param {Cesium.Viewer} rightViewerInstance - 右侧Viewer主地图驱动者
* @param {Cesium.Viewer} leftViewerInstance - 左侧Viewer对比地图跟随者
*/ */
const setupCameraSync = (rightViewerInstance, leftViewerInstance) => { const setupCameraSync = (rightViewerInstance, leftViewerInstance) => {
if (!rightViewerInstance || !leftViewerInstance) { if (!rightViewerInstance || !leftViewerInstance) {
@ -76,18 +85,23 @@ export function useDualMapCompare() {
return return
} }
console.log('[useDualMapCompare] 设置相机同步(右侧主地图 侧对比地图...') console.log('[useDualMapCompare] 设置单向相机同步(右→左)...')
// 监听右侧相机变化 /**
const syncCamera = () => { * 相机同步处理函数
* 在右侧 Viewer postRender 中调用将右侧相机状态同步到左侧
*/
const handleCameraSync = () => {
// 检查 Viewer 是否有效
if (!leftViewerInstance || leftViewerInstance.isDestroyed()) return if (!leftViewerInstance || leftViewerInstance.isDestroyed()) return
if (!rightViewerInstance || rightViewerInstance.isDestroyed()) return
const rightCamera = rightViewerInstance.camera const rightCamera = rightViewerInstance.camera
const leftCamera = leftViewerInstance.camera
// 同步位置和方向 // 直接传递 position 引用(不 clone获得最佳性能
leftCamera.setView({ // Cesium 内部会处理拷贝,且在单向同步场景下安全
destination: rightCamera.position.clone(), leftViewerInstance.camera.setView({
destination: rightCamera.position,
orientation: { orientation: {
heading: rightCamera.heading, heading: rightCamera.heading,
pitch: rightCamera.pitch, pitch: rightCamera.pitch,
@ -96,16 +110,17 @@ export function useDualMapCompare() {
}) })
} }
// 添加监听器 // 只在右侧 Viewer 的 postRender 中注册同步函数
rightViewerInstance.camera.changed.addEventListener(syncCamera) // 确保右侧相机更新完成后再同步到左侧
rightViewerInstance.scene.postRender.addEventListener(handleCameraSync)
// 保存移除函数 // 保存移除函数
cameraSyncRemover = () => { cameraSyncRemover = () => {
rightViewerInstance.camera.changed.removeEventListener(syncCamera) rightViewerInstance.scene.postRender.removeEventListener(handleCameraSync)
console.log('[useDualMapCompare] 相机同步已移除') console.log('[useDualMapCompare] 相机同步已移除')
} }
console.log('[useDualMapCompare] 相机同步设置完成') console.log('[useDualMapCompare] 单向相机同步设置完成')
} }
/** /**
@ -155,7 +170,7 @@ export function useDualMapCompare() {
} }
}) })
// 设置相机同步(侧主地图 侧对比地图 // 设置相机同步(单向:右→左)
setupCameraSync(rightViewerInstance, leftViewerInstance) setupCameraSync(rightViewerInstance, leftViewerInstance)
// 异步加载灾前模型到左侧(不阻塞对比模式启用) // 异步加载灾前模型到左侧(不阻塞对比模式启用)