在 OpenLayers 4 中获取 WMS 图层的范围

Question

我想从 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 服务器。

Answer 1

我最终遵循了 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
    });
});

Answer 2

您可以尝试这样的方法来检索 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>')

});

我希望下面的小提琴能把你推向正确的方向，享受吧:)

https://jsfiddle.net/Svinjica/r9xdaoeo/