openlayers鷹眼圖實現

這個是Cesium三維地圖結合openlayers二維地圖的鷹眼圖實現，代碼有相關注釋。

// 創建鷹眼圖
this.map = new Map({
    layers: [layers_arcgis],
    target: 'map2d',
    view: new View({
        projection: 'EPSG:4326',
        center: [116.240601, 39.827107],
        zoom: 13
    })
});
// 添加Cesium 視圖監聽事件
this.viewer.scene.postRender.addEventListener(this.sceneRenderHandler, this);

// 監聽事件所執行的方法
sceneRenderHandler: function (e) {
    let extend = mars3d.point.getExtent(this.viewer);  //獲取Cesium當前視圖的範圍
    let point = mars3d.point.getCenter(this.viewer);  //獲取Cesium當前視圖的中心點

    if (extend.xmin == -180 && extend.xmax == 180
        && extend.ymax == 90 && extend.ymin == -90) { //整個地球在視域內
        this.map.getView().setZoom(2);
        this.map.getView().animate({
            center: [point.x, point.y],
            duration: 0
        });
    } else {
        // 根據當前地圖範圍和大小獲取 分辨率
        let r = this.map.getView().getResolutionForExtent([extend.xmin, extend.ymin, extend.xmax, extend.ymax], this.map.getSize());
        // 設置分辨率
        this.map.getView().setResolution(r);
        // 設置鷹眼圖中心點
        this.map.getView().setCenter(extentGetCenter([extend.xmin, extend.ymin, extend.xmax, extend.ymax]));
    }
}