cesium 鹰眼 (2D或3D地图与2D鹰眼联动)

我把初始位置定位到了中国,效果如下:

这是三维地球与二维鹰眼联动

这是二维地图与二维鹰眼联动:

 三维与三维联动的网上有很多,而且目前暂时没有这个需求,所以这里省略

主要代码如下,个别地方不太完善,但基本实现效果

首先,在你要放置鹰眼的地方写一个div

<div id="eagleEye" class="eagleEye"></div>

.eagleEye {
  position: absolute;
  width: 18%;
  height: 20%;
  bottom: 0;
  right: 0;
  z-index: 999;
  background: red;
  border: solid blue 1px;
}

定义一个viewer1,初始化鹰眼地图

viewer1 = new Cesium.Viewer("eagleEye", {
        geocoder: false, //搜索框
        animation: false, //左下角的动画控件的显示
        shouldAnimate: false, //控制模型动画
        timeline: false, //底部的时间轴
        fullscreenButton: false, //右下角的全屏按钮
        selectionIndicator: true, //选择指示器
        homeButton: false,
        infoBox: true, //信息面板
        baseLayerPicker: false, //图层选择按钮
        navigationHelpButton: false, //右上角的帮助按钮
        sceneModePicker: false, //3d/2d 模式切换按钮
        // terrainProvider: Cesium.createWorldTerrain(), // 提供地形 使用Cesium在线Ion地形
        shouldAnimate: true, // 表示实体是运行状态
        sceneMode: Cesium.SceneMode.SCENE2D //初始场景模式 为二维
        // mapMode2D:Cesium.MapMode2D.ROTATE,
      });
viewer1._cesiumWidget._creditContainer.style.display = "none"; //隐藏logo版权

// Apply our sync function every time the 3D camera view changes
      viewer.camera.changed.addEventListener(this.sync2DView);
// By default, the `camera.changed` event will trigger when the camera has changed by 50%
// To make it more sensitive, we can bring down this sensitivity
      viewer.camera.percentageChanged = 0.01;

// 你为viewer添加了什么地图,就给鹰眼也添加一下
// 添加高德矢量图
var atLayer = new Cesium.UrlTemplateImageryProvider({
      url:"http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
        minimumLevel: 3,
        maximumLevel: 18
      });
      viewer.imageryLayers.addImageryProvider(atLayer);
      viewer1.imageryLayers.addImageryProvider(atLayer);

鹰眼同步方法

// 鹰眼同步
    sync2DView() {    
      let worldPosition;
      // The center of the view is the point that the 3D camera is focusing on
      const viewCenter = new Cesium.Cartesian2(
        Math.floor(viewer.canvas.clientWidth / 2),
        Math.floor(viewer.canvas.clientHeight / 2)
      );
      // Given the pixel in the center, get the world position
      const newWorldPosition = viewer.scene.camera.pickEllipsoid(viewCenter);
      if (Cesium.defined(newWorldPosition)) {
        // Guard against the case where the center of the screen
        // does not fall on a position on the globe
        worldPosition = newWorldPosition;
      }
      // Tell the 2D camera to look at the point of focus. The distance controls how zoomed in the 2D view is
      // (try replacing `distance` in the line below with `1e7`. The view will still sync, but will have a constant zoom)
      viewer1.scene.camera.lookAt(
        worldPosition,
        new Cesium.Cartesian3(
          0.0,
          0.0,
          viewer.camera.positionCartographic.height
        )
      );
    },