OpenLayers

Question

我对具有相同视图的不同地图使用相同的图层定义。我有两个问题： (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',
    layers: [osm],
    view: view
    });


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


// add Map 0
var map0 = new ol.Map({
    target: 'map0',
    layers: [osm],
    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 时，我可以拖动地图和缩放等。

Answer 1

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

Answer 2

您不能重复使用图层，但可以重复使用来源

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
        })],

OpenLayers - 更改视图时地图消失

OpenLayers - Map is gone when changing view

javascript

jquery