在 OpenLayers 4 中获取 WMS 层的范围
Get extent of WMS layer in OpenLayers 4
我想从 BBOX 参数动态检索 OpenLayers 中 ImageWMS 层的范围。
我会用它来(例如)缩放到图层的范围。
目前,我的代码如下所示:
var layer2 = new ol.layer.Image({
title: 'zone',
visible: false,
source: wmsSource2,
extent: [952014.59,5571269.68,1272301.10,5862273.22]
});
...
// in the layers tab, zoom map to layer when zoom icon is clicked
$('.fa-search').on('click', function() {
var layer = layer2;
view.fit(layer.getExtent(), {
duration:1000
});
});
如您所见,现在我在 layer
变量中定义范围。
相反,我更愿意从 WMS 本身获取它,而不是在我的 js 中再次重新定义它。
从文档中,我看到我可以在 ol.source.ImageWMS params
选项中设置 BBOX WMS 参数。更好的是,它是由OL4自动设置的!
所以,问题是:如果可能的话,我如何从这个参数中检索 BBOX?如果重要的话,我正在使用 Mapserver 作为 WMS 服务器。
您可以尝试这样的操作来检索您的 BBOX 的范围。
map.on('click', function(evt) {
//get extent
var extent_coords = evt.map.getView().calculateExtent();
// get coordinates
var coords_view = evt.coordinate;
coords.innerHTML = [
coords_view[0].toFixed(3),
coords_view[1].toFixed(3)
]
bb_extent.innerHTML = [
extent_coords[0].toFixed(3),
extent_coords[1].toFixed(3),
extent_coords[2].toFixed(3),
extent_coords[3].toFixed(3)
].join('<br>')
});
我希望下面的 fiddle 能将您推向正确的方向,享受 :)
我最终遵循了示例 at this site。
这有点棘手,但我希望这是值得的。
基本上,使用下面的代码,我现在可以通过解析 WMS GetCapabilities 而不是在 js 中对其进行硬编码来检索图层范围(至少目前是其中一个)。
这样,如果我的 WMS 图层发生变化,我就不必更新 js。使用相同的解析器,我希望遍历每一层以自动将它们插入我的 openlayers 代码中(这将是 my project 的下一个改进之一)。
// WMS PARSER (https://bl.ocks.org/ThomasG77/5f9e62d3adeb5602d230a6eacbb9c443)
var base_url = 'https://localhost/cgi-bin/mapserver/mapserv.exe?map=C:\DATI\git\shire\\mapfile\\mapfile\mymapWINDOWS.map&'
var parser = new ol.format.WMSCapabilities();
// Parse WMS Capabilities to retrieve layer extent
fetch(base_url + 'SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities').then(function(response) {
return response.text();
}).then(function(text) {
var result = parser.read(text);
var extent = result.Capability.Layer.Layer.find(l => l.Name === 'zone').EX_GeographicBoundingBox;
var extent_3857 = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857')
...
var layer2 = new ol.layer.Image({
title: 'zone',
visible: false,
source: wmsSource2,
extent: extent_3857
});
...
// in the layers tab, zoom map to layer when zoom icon is clicked
$('.fa-search').on('click', function() {
var layer = layer2;
view.fit(layer.getExtent(), {
duration: 1000
});
});
我想从 BBOX 参数动态检索 OpenLayers 中 ImageWMS 层的范围。
我会用它来(例如)缩放到图层的范围。
目前,我的代码如下所示:
var layer2 = new ol.layer.Image({
title: 'zone',
visible: false,
source: wmsSource2,
extent: [952014.59,5571269.68,1272301.10,5862273.22]
});
...
// in the layers tab, zoom map to layer when zoom icon is clicked
$('.fa-search').on('click', function() {
var layer = layer2;
view.fit(layer.getExtent(), {
duration:1000
});
});
如您所见,现在我在 layer
变量中定义范围。
相反,我更愿意从 WMS 本身获取它,而不是在我的 js 中再次重新定义它。
从文档中,我看到我可以在 ol.source.ImageWMS params
选项中设置 BBOX WMS 参数。更好的是,它是由OL4自动设置的!
所以,问题是:如果可能的话,我如何从这个参数中检索 BBOX?如果重要的话,我正在使用 Mapserver 作为 WMS 服务器。
您可以尝试这样的操作来检索您的 BBOX 的范围。
map.on('click', function(evt) {
//get extent
var extent_coords = evt.map.getView().calculateExtent();
// get coordinates
var coords_view = evt.coordinate;
coords.innerHTML = [
coords_view[0].toFixed(3),
coords_view[1].toFixed(3)
]
bb_extent.innerHTML = [
extent_coords[0].toFixed(3),
extent_coords[1].toFixed(3),
extent_coords[2].toFixed(3),
extent_coords[3].toFixed(3)
].join('<br>')
});
我希望下面的 fiddle 能将您推向正确的方向,享受 :)
我最终遵循了示例 at this site。
这有点棘手,但我希望这是值得的。
基本上,使用下面的代码,我现在可以通过解析 WMS GetCapabilities 而不是在 js 中对其进行硬编码来检索图层范围(至少目前是其中一个)。
这样,如果我的 WMS 图层发生变化,我就不必更新 js。使用相同的解析器,我希望遍历每一层以自动将它们插入我的 openlayers 代码中(这将是 my project 的下一个改进之一)。
// WMS PARSER (https://bl.ocks.org/ThomasG77/5f9e62d3adeb5602d230a6eacbb9c443)
var base_url = 'https://localhost/cgi-bin/mapserver/mapserv.exe?map=C:\DATI\git\shire\\mapfile\\mapfile\mymapWINDOWS.map&'
var parser = new ol.format.WMSCapabilities();
// Parse WMS Capabilities to retrieve layer extent
fetch(base_url + 'SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities').then(function(response) {
return response.text();
}).then(function(text) {
var result = parser.read(text);
var extent = result.Capability.Layer.Layer.find(l => l.Name === 'zone').EX_GeographicBoundingBox;
var extent_3857 = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857')
...
var layer2 = new ol.layer.Image({
title: 'zone',
visible: false,
source: wmsSource2,
extent: extent_3857
});
...
// in the layers tab, zoom map to layer when zoom icon is clicked
$('.fa-search').on('click', function() {
var layer = layer2;
view.fit(layer.getExtent(), {
duration: 1000
});
});