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)