「笔记」Openlayers鹰眼空白+本地图源

import * as layer from 'ol/layer';
import Tile from 'ol/layer/Tile';
import * as olControl from 'ol/control';

// 图源怎么引的本篇不讲
// 要注意 overviewLayerGroup 和 mapLayerGroup 图层要相同，相同不是指完全相等
// 不然地图和鹰眼会抢canvas。
this.mapLayerGroup = new layer .Group({
    layers: []
});
this.overviewLayerGroup = new layer .Group({
    layers: []
});
let mapLayers = this.mapLayerGroup .getLayers();
let overviewLayers= this.overviewLayerGroup .getLayers();

// 图源相同，但Tile不能相等
let newLayer = new Tile({
    source: source
});
let newOverLayer = new Tile({
    source: source
})
mapLayers .push(newLayer );
overviewLayers.push(newOverLayer );

// 大地图
this.map = new ol.Map({
    target: element,
    layers: [this.mapLayerGroup],
    view: new ol.View({
        center: center,
        zoom: zoom,
        minZoom: minZoom,
        maxZoom: maxZoom,
    })
});

// 大地图添加鹰眼插件
this.map.addControl(
    new olControl.OverviewMap({
        className: 'ol-overviewmap myOverviewmap',
        layers: [this.overviewLayerGroup],
        view: new ol.View({
            center: this.map.getView().getCenter()
        })
    })
);

参考资料：解决OpenLayers加载鹰眼图时出现的闪烁空白问题