Cesium分屏对比

摘自：cesium控制及效果(五)：双屏对比 - 掘金 (juejin.cn)

原理

左右容器中分别创建两个 Viewer 实例，然后将两边的 viewer 同步更新：通过Cesium.ScreenSpaceEventHandler去判断当前鼠标触发的是哪边的 viewer，然后将触发的 viewer 同步到另一边

代码

<script setup>
import { ref, onMounted } from 'vue'
import * as Cesium from 'cesium'

let viewerL = null;
let viewerR = null;

let isLeftTrigger = false;
let isRightTrigger = false;
//右侧viewer与左侧同步--操作左侧
const syncLeftViewer = () => {
    let canvasL = viewerL.scene.canvas;
    let handlerL = new Cesium.ScreenSpaceEventHandler(canvasL);
    handlerL.setInputAction(() => {
        isLeftTrigger = true;
        isRightTrigger = false;
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    viewerL.camera.changed.addEventListener(syncViewerL);
    viewerL.scene.preRender.addEventListener(syncViewerL);
};
const syncViewerL = () => {
    if (isLeftTrigger) {
        viewerR.camera.flyTo({
            destination: viewerL.camera.position,
            orientation: {
                heading: viewerL.camera.heading,
                pitch: viewerL.camera.pitch,
                roll: viewerL.camera.roll
            },
            duration: 0.0
        })
    }
};
//左侧viewer与右侧同步--操作右侧
const syncRightViewer = () => {
    let canvasR = viewerR.scene.canvas;
    let handlerR = new Cesium.ScreenSpaceEventHandler(canvasR);
    handlerR.setInputAction(() => {
        isLeftTrigger = false;
        isRightTrigger = true;
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    viewerR.camera.changed.addEventListener(syncViewerR);
    viewerR.scene.preRender.addEventListener(syncViewerR);
};
const syncViewerR = () => {
    if (isRightTrigger) {
        viewerL.camera.flyTo({
            destination: viewerR.camera.position,
            orientation: {
                heading: viewerR.camera.heading,
                pitch: viewerR.camera.pitch,
                roll: viewerR.camera.roll
            },
            duration: 0.0
        })
    }
};

onMounted(() => {
    Cesium.Ion.defaultAccessToken = "您的 token";
    window.Cesium = Cesium;
    //初始化cesium实例
    viewerL = new Cesium.Viewer("cesiumContainer", {
        infoBox: false,
    });
    viewerR = new Cesium.Viewer("cesiumContainer2", {
        infoBox: false,
    });

    syncLeftViewer(); //右侧viewer与左侧同步
    syncRightViewer(); //左侧viewer与右侧同步
});
</script>

<template>
    <div id="mapDiv">
        <div id="cesiumContainer" class="cesiumContainer"></div>
        <div id="cesiumContainer2" class="cesiumContainer"></div>
    </div>
</template>

<style scoped lang="scss">
#mapDiv {
    width: 100%;
    height: 100%;
    display: flex;

    .cesiumContainer {
        width: 50%;
        height: 100%;
    }
}
</style>

效果