cesium控制及效果(五)：双屏对比

1、概述

分屏需要创建左右两个地球（两个viewer），然后同步两个viewer。两个viewer联动实现方法和鹰眼图实现类似，只是从单向控制改为双向控制，双向控制时需要做个触发判断，防止陷入循环调用。

2、创建地图容器

<div class="cesiumDiv">
    <div id="cesiumContainerL"></div> //左侧cesium容器
    <div id="cesiumContainerR" ></div> //右侧cesium容器
</div>
//style
.cesiumDiv{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}
#cesiumContainerL {
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}
#cesiumContainerR {
    width: 50%;
    height: 100%;
    right: 0;
    bottom: 0;
    position: absolute;
}

3、地图初始化

import * as Cesium from 'cesium' 
//1、cesium初始化--创建地图公共方法
const initViewer = (cesiumId:string) =>{ 
    let viewer = new Cesium.Viewer(cesiumId,{ 
        ... //具体内容配置参考前面一篇文章：vue3+cesium项目初始化--https://juejin.cn/post/7234088398020067387 
    }) 
    return viewer 
}
let viewerL = initViewer('cesiumContainerL'); //左侧cesuim初始化 
let viewerR = initViewer('cesiumContainerR'); //右侧cesium初始化
syncLeftViewer(); //右侧viewer与左侧同步
syncRightViewer(); //左侧viewer与右侧同步

4、地图同步方法

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
        })
    }
};

5、实现效果

项目地址：github.com/DLFouge/vue…

欢迎指正与star