cesium 实现2D模式下鹰眼图

我们先初始化地图（分为大地图和小地图），小地图作为鹰眼图来使用

// 初始化大地图
let viewer = new Cesium.Viewer('cesiumContainer', {
    //需要进行可视化的数据源的集合
    animation: false, //是否显示动画控件
    selectionIndicator: false,
    shouldAnimate: true,
    homeButton: false, //是否显示Home按钮
    fullscreenButton: false, //是否显示全屏按钮
    baseLayerPicker: false, //是否显示图层选择控件
    geocoder: false, //是否显示地名查找控件
    timeline: false, //是否显示时间线控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    infoBox: false, //是否显示点击要素之后显示的信息
    requestRenderMode: true, //启用请求渲染模式
    scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
    sceneMode: 1, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    })
});
// 初始化小地图
let miniViewer = new Cesium.Viewer('miniMap', {
    //需要进行可视化的数据源的集合
    animation: false, //是否显示动画控件
    shouldAnimate: true,
    homeButton: false, //是否显示Home按钮
    fullscreenButton: false, //是否显示全屏按钮
    baseLayerPicker: false, //是否显示图层选择控件
    geocoder: false, //是否显示地名查找控件
    timeline: false, //是否显示时间线控件
    sceneModePicker: false, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    infoBox: false, //是否显示点击要素之后显示的信息
    requestRenderMode: true, //启用请求渲染模式
    scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
    sceneMode: 1, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    })
})

后面的思路就是如何实现大小地图的视图同步；那我的实现思路就是获取地图的中心点来完成地图的移动同步效果，由于cesium没有层级的概念，所以获取当前的高度来完成地图的缩放同步效果；当然你也可以实现高度到层级的转化方法；

// 2D视图同步
function getCenterPosition() {
    // 获取当前地图中心的经纬度  
    let centerResult = viewer.camera.pickEllipsoid(
        new Cesium.Cartesian2(
            viewer.canvas.clientWidth / 2,
            viewer.canvas.clientHeight / 2,
        ),
    )
    if (!centerResult) return
    let curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(centerResult);
    let curLongitude = (curPosition.longitude * 180) / Math.PI;
    let curLatitude = (curPosition.latitude * 180) / Math.PI;
    // 获取高度
    var height = viewer.camera.positionCartographic.height;
    miniViewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(curLongitude, curLatitude, height),
        duration: 0.0,
    })
}

上面代码获取需要的中心经纬度和高度值，也同步设置了小地图视图；那我们只要在施加一个地图监听方法

viewer.scene.preUpdate.addEventListener(getCenterPosition);

当然上面我们只是添加了大地图的监听，实现小地图对大地图的视图同步。同理在对小地图添加监听，实现大地图对小地图的视图同步。