OpenLayers-更改视图时地图不见了

如何解决OpenLayers-更改视图时地图不见了

我对具有相同视图的不同地图使用相同的图层定义。我遇到两个问题： （1）当我添加带有osm定义的新div（见下文）时，旧的osm-view消失了。

当我在2019复选框之后选中2018复选框时会发生这种情况。在正确的div遍历整个页面之前，可以看到osm

（2）当我尝试移动视图时，该图层完全消失了。 如果我单击地图并将其拖动以更改视图，则地图将消失。

这是我的代码：

这部分的

html

<div id="mapcontainer">
<div id="map0"></div>
<div class="third" id="third2018">
    <div id="map2018" class="map"></div>
</div>
<div class="third" id="third2019"> 
    <div id="map2019" class="map"></div>
</div>      
<div class="third" id="third2020">
    <div id="map2020" class="map"></div>
</div>

JS： 注意：复选框的ID为2018 2019 2020。

var center_start = [495445,5715029];
var zoom_start = 8;
var projection25832 = new ol.proj.Projection({
    code: 'EPSG:25832',// The extent is used to determine zoom level 0. Recommended values for a
    // projection's validity extent can be found at https://epsg.io/.
    extent: [-1877994.66,3932281.56,1836715.13,9440581.95],units: 'm'
    }); 


var topo =  new ol.layer.Tile({
                source: new ol.source.TileWMS({
                                url:"https://sgx.geodatenzentrum.de/wms_topplus_open?",params:{
                                    'LAYERS': "p25",'TILED': false
                                        }
                                    })
                            });

var osm = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                                url: 'https://ows.terrestris.de/osm-gray/service?',params: {
                                       'LAYERS': "OSM-WMS",'VERSION': '1.1.0','FORMAT': 'image/png','TILED': false
                                        }
                                        })
                                    })     ;           

var view = new ol.View({
    projection: projection25832,center: center_start,zoom: zoom_start
    });





 var map2018 = new ol.Map({
    target: 'map2018',layers: [osm],view: view
    });
                             
                      

var map2019 = new ol.Map({
    target: 'map2019',view: view
    });


    
var map2020 = new ol.Map({
    target: 'map2020',view: view
    });


// add Map 0
var map0 = new ol.Map({
    target: 'map0',view: view
    });


var Mapcount = 0;
 /////////
$("#2018").change(function (){
    if ($("#2018").is(':checked')){
    Mapcount = Mapcount + 1;
    document.getElementById('map0').style.display='none';
    document.getElementById('third2020').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2019').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2018').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2018').style.display = 'block';
    map2018.updateSize();
}else{
    Mapcount = Mapcount -1;
    document.getElementById('third2018').style.display = 'none';
    if(Mapcount === 0){
        document.getElementById('map0').style.display='block';
        map0.updateSize();
    }else{
    document.getElementById('third2020').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2019').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2018').style.width = "calc(100%/" + Mapcount +")";
    map2018.updateSize();
    map2019.updateSize();
    map2020.updateSize();
    };            
    };
});


$("#2019").change(function (){
     if ($("#2019").is(':checked')){
    Mapcount = Mapcount + 1;
    document.getElementById('map0').style.display='none';
    document.getElementById('third2020').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2019').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2018').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2019').style.display = 'block';
    map2019.updateSize();
}else{
    Mapcount = Mapcount -1;
    document.getElementById('third2019').style.display = 'none';
    if(Mapcount === 0){
        document.getElementById('map0').style.display='block';
        map0.updateSize();
    }else{
    document.getElementById('third2020').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2019').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2018').style.width = "calc(100%/" + Mapcount +")";
    map2018.updateSize();
    map2019.updateSize();
    map2020.updateSize();
    };            
    };
});



$("#2020").change(function (){
    if ($("#2020").is(':checked')){
    Mapcount = Mapcount + 1;
    document.getElementById('map0').style.display='none';
    document.getElementById('third2019').style.width = "calc(100%/" + Mapcount +")";
    map2019.updateSize();
    document.getElementById('third2018').style.width = "calc(100%/" + Mapcount +")";
    map2018.updateSize();
    document.getElementById('third2020').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2020').style.display = 'block';
    map2020.updateSize();
}else{
    Mapcount = Mapcount -1;
    document.getElementById('third2020').style.display = 'none';
    if(Mapcount === 0){
        document.getElementById('map0').style.display='block';
        map0.updateSize();
    }else{
    document.getElementById('third2020').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2019').style.width = "calc(100%/" + Mapcount +")";
    document.getElementById('third2018').style.width = "calc(100%/" + Mapcount +")";
    map2018.updateSize();
    map2019.updateSize();
    map2020.updateSize();
    };            
    };
});

编辑：仅显示map0时，我可以拖动地图并缩放等。

解决方法

您不能重复使用图层，但是可以重复使用源代码

var osmSource = new ol.source.TileWMS({
                  url: 'https://ows.terrestris.de/osm-gray/service?',params: {
                    'LAYERS': "OSM-WMS",'VERSION': '1.1.0','FORMAT': 'image/png','TILED': false
                  }
                });

然后在每个地图中使用

layers: [new ol.layer.Tile({
           source: osmSource
        })],

,

显然，我不能在不同的地图中使用同一图层，或者至少在我将osm2018，osm2019和osm2​​019都添加为图层和在相应地图中使用后，它不能按预期工作。 如果还有其他解决方案，我仍然很乐意使用它。