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

【问题标题】：How to get bbox of the cql_filtered wms layers in leaflet?如何在传单中获取 cql_filtered wms 层的 bbox？
【发布时间】：2019-12-18 17:17:17
【问题描述】：

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

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

我获取有关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)
    }
  }
})

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

【问题讨论】：

标签： javascript xml geoserver

【解决方案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)

【讨论】：