Cesium鹰眼图

先看一下效果图

首先你需要两个不同的图源

来分别展示在主图和鹰眼图上

主图的初始化 我的其他博客里面有就不说了

鹰眼图的初始化

// 初始化鹰眼图
    initEagle() {
      var _this = this
      let viewer2  = new _this.Cesium.Viewer('overview',{   //overview是在页面中定义的div的id
        imageryProvider: new _this.Cesium.UrlTemplateImageryProvider({
          url: _this.sourceUrl + '/webearth/tiles/world/{z}/{x}/{reverseY}.jpg',
        }),
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        infoBox: false,
        navigationInstructionsInitiallyVisible: false
      });

      let control = viewer2.scene.screenSpaceCameraController;
      control.enableRotate = false;
      control.enableTranslate = false;
      control.enableZoom = false;
      control.enableTilt = false;
      control.enableLook = false;

      let connect = function(){
        viewer2.camera.flyTo({
          destination : _this.viewer.camera.position,    _this.viewer  是 主图的
          orientation : {
            heading : _this.viewer.camera.heading,
            pitch : _this.viewer.camera.pitch,
            roll : _this.viewer.camera.roll
          },
          duration: 0.0
        });
      }

      _this.viewer.entities.add({
        position: _this.Cesium.Cartesian3.fromDegrees(0, 0),
        label: {
          text: new _this.Cesium.CallbackProperty(function(){
            connect();
            return "";
          }, true)
        }
      });
    },

鹰眼图的初始化和主图初始化基本类似  就是在connect方法开始 是连接主图视角和鹰眼图的视角

这样鹰眼图的视角就会随着主图的变化而变化