cesium-多viewer分屏同步实现

思路:

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)

 

posted @ 2023-02-15 09:52  nihaobaobao1997  阅读(639)  评论(0编辑  收藏  举报