cesium-多viewer分屏同步实现

Posted 2023-02-15 nihaobaobao1997

记cesium分屏同步

思路：

1.新建两个viewer对象；

2.监控viewer视图变化（调整监控精度）；

3.获取中心点并转坐标系；

4.获取地图中心点到相机的距离；

5.根据中心点和相机距离调整被同步对象的视图；

代码演示：

1.

viewer1 = new Cesium.Viewer(\'viewer1\') // 同步图
viewer2 = new Cesium.Viewer(\'viewer2\') // 被同步图

2.

// 监控同步图变化和调整监控精度
viewer1.camera.percentageChanged = 0.01
viewer1.camera.changed.addEventListener(change)

// 监控同步图变化和调整监控精度
viewer2.camera.percentageChanged = 0.01
viewer2.camera.changed.addEventListener(change)

3.

// 获取中心点
let center = new Cesium.Cartesian2(
    Math.floor(viewer1.canvas.clientWidth / 2),
    Math.floor(viewer1.canvas.clientHeight / 2)
);

// 转为世界坐标系
let position = viewer1.scene.camera.pickEllipsoid(center);

4.

let distance = Cesium.Cartesian3.distance(
    position,
    viewer1.scene.camera.positionWC
);

5.

// 改变相机位置和方向
viewer2.scene.camera.lookAt(
    position,
    new Cesium.Cartesian3(0.0, 0.0, distance)
)
// 解锁视角（lookAt会锁被同步图的视角）
viewer2.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)