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