如何在 openlayers 中加载全球多分辨率地形图 (GMRT) Web 地图服务 (WMS)?
How to load Global Multi-Resolution Topography (GMRT) Web Map Service (WMS) in openlayers?
我正在尝试使用 OpenStreetMap (OSM) 作为基础层将 Global Multi-Resolution Topography (GMRT) WMS 加载到 openlayers 地图中。
GMRT 网络服务的 URL 是:https://www.gmrt.org/services/mapserver/wms_merc?
我正在尝试的代码是:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'https://www.gmrt.org/services/mapserver/wms_merc?'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
代码不输出GMRT层,只输出包含OSM的基础层。
扫描浏览器建立的连接时,我发现对www.gmrt.org的成功请求:
GEThttps://www.gmrt.org/services/mapserver/wms_merc?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&CRS=EPSG%3A3857&STYLES=&WIDTH=1235&HEIGHT=600&BBOX=-1873624.4373262404%2C-1947003.9844800094%2C10209540.993994422%2C3923359.7878215266
[HTTP/1.1 200 OK 343ms]
SERVICE WMS
VERSION 1.3.0
REQUEST GetMap
FORMAT image/png
TRANSPARENT true
CRS EPSG:3857
STYLES
WIDTH 1235
HEIGHT 600
BBOX -1873624.4373262404,-1947003.9844800094,10209540.993994422,3923359.7878215266
我检查过这个 post, which appears to be a similar problem, and also looked at the GetCapabilities,但返回的 XML 对我来说意义不大。
对我做错了什么有什么想法吗?
我是 openlayers 的新手,所以我希望尽可能详细。
ImageWMS 和 TileWMS 总是需要一个 params
选项来指定 WMS LAYERS 参数
source: new ol.source.ImageWMS({
url: 'https://www.gmrt.org/services/mapserver/wms_merc?',
params: { 'LAYERS': 'GMRT' }
})
我正在尝试使用 OpenStreetMap (OSM) 作为基础层将 Global Multi-Resolution Topography (GMRT) WMS 加载到 openlayers 地图中。 GMRT 网络服务的 URL 是:https://www.gmrt.org/services/mapserver/wms_merc?
我正在尝试的代码是:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'https://www.gmrt.org/services/mapserver/wms_merc?'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
代码不输出GMRT层,只输出包含OSM的基础层。
扫描浏览器建立的连接时,我发现对www.gmrt.org的成功请求:
GEThttps://www.gmrt.org/services/mapserver/wms_merc?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&CRS=EPSG%3A3857&STYLES=&WIDTH=1235&HEIGHT=600&BBOX=-1873624.4373262404%2C-1947003.9844800094%2C10209540.993994422%2C3923359.7878215266
[HTTP/1.1 200 OK 343ms]
SERVICE WMS
VERSION 1.3.0
REQUEST GetMap
FORMAT image/png
TRANSPARENT true
CRS EPSG:3857
STYLES
WIDTH 1235
HEIGHT 600
BBOX -1873624.4373262404,-1947003.9844800094,10209540.993994422,3923359.7878215266
我检查过这个 post, which appears to be a similar problem, and also looked at the GetCapabilities,但返回的 XML 对我来说意义不大。
对我做错了什么有什么想法吗? 我是 openlayers 的新手,所以我希望尽可能详细。
ImageWMS 和 TileWMS 总是需要一个 params
选项来指定 WMS LAYERS 参数
source: new ol.source.ImageWMS({
url: 'https://www.gmrt.org/services/mapserver/wms_merc?',
params: { 'LAYERS': 'GMRT' }
})