Cesium基础代码段（五）鹰眼地图

        先看效果：

         鹰眼地图其实就是一个小地图，可以放在视窗的任何位置。小地图可以选择是2D地图，也可以选择3D。3D可以创建两个球，同步即可。这里选择2D地图，地图可以用常见的leaflet或者openlayer，此处示例选用leaflet。

        给出鹰眼插件地址：https://github.com/leation/OverviewMapForCesium

        使用方式：

//安装
npm install leaflet --save
//声明
<div id="overview" class="leaflet-control-minimap"></div>
//引入
import * as L from 'leaflet'

        设置位置：

<style>
@import '../css/Control.MiniMap.css';
#overview {
     z-index: 99998;
     width: 150px;
     height: 150px;
     position: absolute;
     right: 10px;
     bottom: 50px;
        }
</style>

        在vue中：

initOverview(arg) {
      var url = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
      var layer = new arg.L.TileLayer(url, {
        minZoom: 0,
        maxZoom: 20,
      });
      var container = document.getElementById("overview");
      var options = {
        container: container,
        toggleDisplay: true,
        width: 150,
        height: 150,
        position: "topright",
        aimingRectOptions: {
          color: "#ff1100",
          weight: 2,
        },
        shadowRectOptions: {
          color: "#0000AA",
          weight: 1,
          opacity: 0,
          fillOpacity: 0,
        },
      };
      let overviewCtr = new OverMap({
        layer: layer,
        viewer: arg.viewer,
        options: options,
        L: arg.L,
      });
      overviewCtr.init();
    },

        也可以自己封装函数实现，引用右弦大佬的函数，如下：

/**
 * @description: 三维鹰眼地图及与主图联动
 */
class HawkEye3DMap {
    constructor(viewer) {
        // 主图
        this._viewer = viewer;
        // 鹰眼图
        this._hawkEyeMap = null;
        // 判断事件是主图触发还是鹰眼地图触发
        this._isMainMapTrigger = false;
        this._isEyeMapTrigger = false;
    }

    // 初始化函数
    _init() {
        this._divInit();
        this._mapInit();
    }

    // 创建div，并设置样式
    _divInit() {
        let hawkEyeDiv = document.createElement("div");
        hawkEyeDiv.setAttribute('id', "hawkEye3dMap");
        hawkEyeDiv.style.cssText = "position: absolute;left: 70% ;top: 2% ;border-radius: 50% ;height: 160px;width: 160px;overflow: hidden;border: 2px solid #002FA7;"
        document.getElementsByTagName("body").item(0).appendChild(hawkEyeDiv);
    };

    _mapInit() {
        // div创建完成后才能初始化地图，否则会找不到div保错
        // 初始化地图
        this._hawkEyeMap = new Cesium.Viewer('hawkEye3dMap', {
            geocoder: false,
            homeButton: false,
            sceneModePicker: false,
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            timeline: false,
            fullscreenButton: false,
        });
        this._hawkEyeMap.cesiumWidget.creditContainer.style.display = 'none';
        this._hawkEyeMap.scene.backgroundColor = Cesium.Color.TRANSPARENT;
        this._hawkEyeMap.imageryLayers.removeAll();

        // 鹰眼图中添加高德路网中文注记图（鹰眼图中坐标偏移一点不影响）
        this._hawkEyeMap.imageryLayers.addImageryProvider(
            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
            })
        );

        // 引起事件监听的相机变化幅度
        this._viewer.camera.percentageChanged = 0.02;
        this._hawkEyeMap.camera.percentageChanged = 0.5;

        this._bindEvent();
    }

    // 绑定事件
    _bindEvent() {
        // 鹰眼与主图同步
        this._viewer.camera.changed.addEventListener(this._syncEyeMap, this);
        // 第一次刷新渲染时联动
        this._viewer.scene.preRender.addEventListener(this._syncEyeMap, this);

        // 主图与鹰眼图同步
        this._hawkEyeMap.camera.changed.addEventListener(this._syncMap, this);
        this._hawkEyeMap.scene.preRender.addEventListener(this._syncMap, this);
    }

    // 同步主图与鹰眼地图
    _syncEyeMap() {
        // 监听主图
        new Cesium.ScreenSpaceEventHandler(this._viewer.canvas).setInputAction(() => {
            this._isMainMapTrigger = true;
            this._isEyeMapTrigger = false;
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        // 判断是否为主图移动
        if (!this._isMainMapTrigger) {
            return false;
        }

        this._hawkEyeMap.camera.flyTo({
            destination: this._viewer.camera.position,
            orientation: {
                heading: this._viewer.camera.heading,
                pitch: this._viewer.camera.pitch,
                roll: this._viewer.camera.roll,
            },
            duration: 0.0,
        })
    }

    // 鹰眼地图与主图联动效果
    _syncMap() {
        // 监听鹰眼地图
        new Cesium.ScreenSpaceEventHandler(this._hawkEyeMap.canvas).setInputAction(() => {
            this._isMainMapTrigger = false;
            this._isEyeMapTrigger = true;
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN)

        // 判断是否为鹰眼地图移动
        if (!this._isEyeMapTrigger) {
            return false;
        }
        this._viewer.camera.flyTo({
            destination: this._hawkEyeMap.camera.position,
            orientation: {
                heading: this._hawkEyeMap.camera.heading,
                pitch: this._hawkEyeMap.camera.pitch,
                roll: this._hawkEyeMap.camera.roll,
            },
            duration: 0.0,
        })
    }
}
//调用方法
// 鹰眼地图初始化
let hawkEyeMap = new HawkEye3DMap(viewer);
hawkEyeMap._init();

        效果如下：

         参考博客：http://t.csdn.cn/1GrDg