如何在传单中获取 cql_filtered wms 层的 bbox？

Question

我正在使用 GeoServer 和传单。 我想获取 cql_filtered 元素的边界框信息。 现在我能够获取getCapabilities请求以获取图层边界框。 我的网址是；

var url = http://localhost:8080/geoserver/tajikistan/ows?service=wms&version=2.0.1&request=GetCapabilities

我获取有关bbox信息的bbox是；

$.get(url, function (xml) {
  var xmlData = xml.getElementsByTagName("Layer")
  console.log(xmlData[2])

  for (i = 0; i < xmlData.length; i++) {
    if (xmlData[i].childNodes[1].childNodes[0].nodeValue == 'EAR_Builtup') {
      x1 = xmlData[i].getElementsByTagName('EX_GeographicBoundingBox')[0].childNodes[1].childNodes[0].nodeValue
      x2 = xmlData[i].getElementsByTagName('EX_GeographicBoundingBox')[0].childNodes[3].childNodes[0].nodeValue
      y1 = xmlData[i].getElementsByTagName('EX_GeographicBoundingBox')[0].childNodes[5].childNodes[0].nodeValue
      y2 = xmlData[i].getElementsByTagName('EX_GeographicBoundingBox')[0].childNodes[7].childNodes[0].nodeValue
      console.log(x1, x2, y1, y2)
    }
  }
})

这是整个层的边界框。 但我只想选择特征的边界框（如唯一一个区的边界框）。 那可能吗？

Answer 1

您无法使用 Web 地图服务 (WMS) 获取过滤参数的边界框。 为了将图像放大到您需要的区域，您需要应用 WFS。 以下代码可能对您有所帮助；

$.ajax({
    url: 'http://localhost:8080/geoserver/tajikistan/ows?service=WFS&version=1.0.0&request=GetFeature&cql_filter=district=='yourDistrict'&typeName=tajikistan:layerName&maxFeatures=50&outputFormat=text%2Fjavascript',
    dataType: 'jsonp',
    jsonpCallback: "parseResponse",
    success: function (data) {
        selectedArea = L.geoJson(data)
        bboxX1 = selectedArea.getBounds()._southWest.lng
        bboxX2 = selectedArea.getBounds()._northEast.lng
        bboxY1 = selectedArea.getBounds()._southWest.lat
        bboxY2 = selectedArea.getBounds()._northEast.lat
        bboxList = [bboxX1, bboxX2, bboxY1, bboxY2]
    }
})

对于使用边界框获取图像，您可以简单地调用 wms 请求。

imageUrl = `http://localhost:8080/geoserver/tajikistan/wms?\
service=WMS&\
version=1.1.0&\
request=GetMap&\
layers=tajikistan:layerName&\
styles=tajikistan:layerStyle&\
bbox=${bboxX1},${bboxY1},${bboxX2},${bboxY2}&\
width=768&\
height=429&\
srs=EPSG%3A4326&\
format=image/png`;

将此图像添加到您的 Html；

$('img').prop('src', imageUrl)