Cesium双屏联动，二三维联动

最新推荐文章于 2024-07-01 15:51:30 发布

kingslayerzxs

最新推荐文章于 2024-07-01 15:51:30 发布

阅读量1.7k

点赞数 2

分类专栏： Cesium 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_40043761/article/details/128043373

版权

Cesium 专栏收录该内容

5 篇文章 5 订阅

订阅专栏

下面代码中实现的是左边三维，右边二维联动效果。如果需要两边三维的可以看着修改下就行了，也很简单

<body>
    <div class="viewer">
        <div id="left-viewer"></div>
        <div id="right-viewer"></div>
    </div>

    <script>
        const leftViewer = new Cesium.Viewer('left-viewer', {
            terrainProvider: Cesium.createWorldTerrain(),
            sceneModePicker: false,
            infoBox: false,
            shouldAnimate: true,
            timeline: false,
            animation: false,
        })

        const rightViewer = new Cesium.Viewer('right-viewer', {
            sceneMode: Cesium.SceneMode.SCENE2D, 
            terrainProvider: Cesium.createWorldTerrain(),
            sceneModePicker: false,
            infoBox: false,
            shouldAnimate: true,
            timeline: false,
            animation: false,
        })

        const MOUSE_TYPE = {
            LEFT: 0,
            RIGHT: 1
        }

        window.mouseType = MOUSE_TYPE.LEFT

        const leftHandler = new Cesium.ScreenSpaceEventHandler(leftViewer.canvas)
        leftHandler.setInputAction(() => {
            window.mouseType = MOUSE_TYPE.LEFT
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

        leftViewer.scene.postRender.addEventListener(() => {
            if (window.mouseType === MOUSE_TYPE.RIGHT) return 

            const destination = Cesium.Cartographic.toCartesian(leftViewer.camera.positionCartographic)

            rightViewer.camera.setView({
                destination: new Cesium.Cartesian3(destination.x, destination.y, destination.z),
            })

        })

        const rightHandler = new Cesium.ScreenSpaceEventHandler(rightViewer.canvas)
        rightHandler.setInputAction(() => {
            window.mouseType = MOUSE_TYPE.RIGHT
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

        rightViewer.scene.postRender.addEventListener(() => {
            if (window.mouseType === MOUSE_TYPE.LEFT) return 

            const destination = Cesium.Cartographic.toCartesian(rightViewer.camera.positionCartographic)

            leftViewer.camera.setView({
                destination: new Cesium.Cartesian3(destination.x, destination.y, destination.z),
                orientation: {
                    heading: leftViewer.camera.heading,
                    pitch: leftViewer.camera.pitch,
                    roll: leftViewer.camera.roll
                }
            })

        })

    </script>
</body>