「筆記」Openlayers鷹眼空白+本地圖源

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

// 圖源怎么引的本篇不講
// 要注意 overviewLayerGroup 和 mapLayerGroup 圖層要相同，相同不是指完全相等
// 不然地圖和鷹眼會(huì)搶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加載鷹眼圖時(shí)出現(xiàn)的閃爍空白問(wèn)題

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容