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

Question

I am using GeoServer and leaflet. I want to get the bounding box information of the cql_filtered element. Now I am able to get the getCapabilities request on to fetch the layer bounding box. My URL is;

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

And my code for getting information about the bbox is;

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

This is the bounding box of the whole layer. But I want to the bounding box of only the selected feature (like bounding box of the only one district). is that possible?

Answer 1

You can't get the bounding box of the filtered parameter using Web Map Service (WMS). For getting the image zoomed to your required area, you need to apply WFS. Following code may help you;

$.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]
    }
})

And for get image using bounding box, you can simply call wms request.

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`;

Add this image to your Html;

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