将其他WMS添加到OpenLayers-Map

问题描述

我目前正碰壁，我测试了来自不同网站的不同内容，但没有一个对我有用。我真的是WMS / HTML / OpenLayers以及所有这些东西的新手，但是我想这样做。

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

这有效：

<span class="fpPrice price jsMainPrice jsProductPrice hideFromPro" itemprop="price" content="33.99"> 33<sup>€99</sup></span>
<span class="fpPrice price jsMainPrice jsProductPrice hideFromPro" itemprop="price" content="35"> 35<sup>€00</sup></span>

这是我尝试在其中添加两个图层的最后一件事：

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,units: 'm'
}); 


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


var OSM = new ol.layer.Tile({
    title: 'OSM (grau)',source: new ol.source.TileWMS({
        url: 'https://ows.terrestris.de/osm-gray/service?',params: {
               'LAYERS': "OSM-WMS",'TILED': false
            }
   })
})
OSM.set('name',"OSM (grau)")

var Topo = new ol.layer.Tile({
    title: "Topo+",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
      })
    });

解决方法

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+",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>

html javascript openlayers

将其他WMS添加到OpenLayers-Map

问题描述

解决方法

相关问答