向 OpenLayers-Map 添加额外的 WMS'答案

【问题标题】：Add additional WMS' to OpenLayers-Map向 OpenLayers-Map 添加额外的 WMS'
【发布时间】：2020-08-19 21:43:41
【问题描述】：

我目前正在碰壁，我从不同的网站测试了不同的东西，但没有一个对我有用。我对 WMS/HTML/OpenLayers 和所有这些东西真的很陌生，但我想这样做。

我可以将一个 WMS (OSM) 添加到我的网站，但如果我尝试添加另一个，例如Topo+ 它不会显示它。我什至不能说什么不起作用，我基本上只是想添加另一个 WMS（现在，稍后，我想从另一个 GeoServer 添加更多数据）

这是有效的：

var center_start = [495445, 5715029];
var zoom_start = 4;

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'
}); 
 


map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            title: '"OSM (grau)',
            visible: true,
            baseLayer: true,
            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
                    }
                })
            })
                
    ],
    view: new ol.View({
        projection: projection25832,
        center: center_start,
        zoom: zoom_start
    })
            
});

这是我尝试将两个图层都放入其中的最后一件事：

var center_start = [495445, 5715029];
var zoom_start = 4;

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'
}); 


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


var OSM = new ol.layer.Tile({
    title: 'OSM (grau)',
    visible: true,
    baseLayer: true,
    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
            }
   })
})
OSM.set('name', "OSM (grau)")

var Topo = new ol.layer.Tile({
    title: "Topo+",
    visible: true,
    opacity: 0.6,
    baseLayer: false,
    source: new ol.source.TileWMS({
        url:"https://sgx.geodatenzentrum.de/wms_topplus_open?",
            params:{
                'LAYERS': "p25",
                'TILED': false
            }
    })
})

Topo.set('name', "TopoPlus")   

var layers = [Topo, OSM];

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

如果有人可以帮助我/将我链接到某个地方以便我理解这一点，我会非常高兴。

这是我正在使用的索引文件，只是为了确保一切都在那里，以防万一它与此有关。

 <div id="map"></div>
    </div>

    <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
    <!-- Openlayesr JS fIle -->
    <script type="text/javascript" src="js/map.js" type="text/javascript"></script>
    <!-- Our map file -->

【问题讨论】：

标签： javascript html maps openlayers

【解决方案1】：

OSM 是一个完全不透明的基础层，而 Topo 是部分透明的覆盖层，因此要查看 Topo，您必须订购层 [OSM, Topo]

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>

var center_start = [495445, 5715029];
var zoom_start = 4;

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 OSM = new ol.layer.Tile({
    title: 'OSM (grau)',
    visible: true,
    baseLayer: true,
    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 Topo = new ol.layer.Tile({
    title: "Topo+",
    visible: true,
    opacity: 0.6,
    baseLayer: false,
    source: new ol.source.TileWMS({
        url:"https://sgx.geodatenzentrum.de/wms_topplus_open?",
            params:{
                'LAYERS': "p25",
                'TILED': false
            }
    })
})

var layers = [OSM, Topo];

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

    </script>
  </body>
</html>

【讨论】：