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

How to get bbox of the cql_filtered wms layers in leaflet?

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

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)
    }
  }
})

这是整个图层的边界框。但是我只想要选定特征的边界框(就像唯一一个区域的边界框)。这可能吗?

您无法使用网络地图服务 (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)