如何解决将其他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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。