Cesium双屏联动、三屏联动、多屏联动

最新推荐文章于 2025-03-19 09:29:01 发布

Q行天下

最新推荐文章于 2025-03-19 09:29:01 发布

阅读量1.3k

点赞数 1

分类专栏： SuperMap WebGL 文章标签： javascript 前端 Cesium

本文链接：https://blog.youkuaiyun.com/shanshanqwertyuiop/article/details/131831147

版权

SuperMap WebGL 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用Cesium实现双屏及三屏联动的效果，通过分享的代码示例展示了如何同步不同视图的相机视角数据，确保多个屏幕显示一致的3D场景。此技术在多屏展示和对比中具有实用价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cesium多屏联动对比使用较多。

双屏联动对比

参考如下网址

https://juejin.cn/post/7100727011454222350

https://blog.youkuaiyun.com/wanyibin1998/article/details/124898102

三屏联动对比

由上面的双屏联动更改而来

function setManyView(viewer1, viewer2, viewer3) {
    const syncView = () => {
        // 获取第一个viewer的相机视角数据
        const {
            positionWC,
            heading,
            pitch,
            roll,
            up,
            _direction
        } = viewer1.scene.camera;

        // 设置另外两屏/多屏视角
        viewer2.camera.setView({
            destination: positionWC,
            orientation: {
                heading: heading,
                pitch: pitch,
                roll: roll,
                up: up,
                direction: _direction
            }
        });
        viewer3.camera.setView({
            destination: positionWC,
            orientation: {
                heading: heading,
                pitch: pitch,
                roll: roll,
                up: up,
                direction: _direction
            }
        });
    };

    //camera监听函数
    viewer1.camera.changed.addEventListener(syncView);
    //设置触发监听函数的时间
    viewer1.camera.percentageChanged = 0.01;
}
//循环监听每一屏变化
setManyView(viewer1, viewer2, viewer3)
setManyView(viewer2, viewer3, viewer3)
setManyView(viewer3, viewer2, viewer1)