OpenLayers getGetFeatureInfoUrl with dragBox in CQL

Question

I tried to request Geoserver (2.16) WMS with the function getGetFeatureInfoUrl (From openlayers 6+)

I tried this by passing the dragBox extent as a CQL filter.

      dragBox.on("boxend", () => {
      var extent = dragBox.getGeometry().getExtent();
      mymap()
        .getLayers()
        .getArray()
        .map((lyr) => {
          if (lyr instanceof ImageLayer) {
            //get the view resolution
            var viewResolution = mymap.getView().getResolution();
            // get the view projection
            var projection = mymap.getView().getProjection();
            // get the source
            var source = lyr.getSource();
            // get the dragbox center
            var center = getCenter(extent);
            // create the url
            var url = source.getFeatureInfoUrl(
              center,
              viewResolution,
              projection,
              {
                INFO_FORMAT: "application/json",
                feature_count: 100,
                cql_filter: `BBOX(geom, ${extent.join(',')} )`

              }
            );
            if (url) {
              axios.get(url).then(
                response => {
                  if ('features' in response.data && response.data.features.length > 0)
                    console.log(response.data.features)
                }
              )



            }
          }
        })

        ;
    });

I got a good url as expected :

http://localhost:8080/geoserver/Jeru/wms?&LAYERS=MyWorkspace%3Astreets&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=MyWorkspace%3Astreets&LAYERS=MyWorkspace%3Astreets&INFO_FORMAT=application%2Fjson&feature_count=100&cql_filter=BBOX(geom%2C%20218279.07862854004%2C631674.8131103516%2C222630.00331115723%2C635171.091873169%20)&I=50&J=50&CRS=EPSG%3A2039&STYLES=&WIDTH=101&HEIGHT=101&BBOX=219146.67372894287%2C632115.0852508545%2C221762.4082107544%2C634730.819732666

URL decoded :

http://localhost:8080/geoserver/Jeru/wms?
LAYERS=MyWorkspace:streets
SERVICE=WMS&VERSION=1.3.0
REQUEST=GetFeatureInfo
FORMAT=image/png
TRANSPARENT=true
QUERY_LAYERS=MyWorkspace:streets
LAYERS=MyWorkspace:streets
INFO_FORMAT=application/json
feature_count=100
cql_filter=BBOX(geom, 218279.07862854004,631674.8131103516,222630.00331115723,635171.091873169 )
I=50
J=50
CRS=EPSG:2039
STYLES=
WIDTH=101
HEIGHT=101
BBOX=219146.67372894287,632115.0852508545,221762.4082107544,634730.819732666

So far so good : but it return me empty array of features :

{"type":"FeatureCollection","features":[],"totalFeatures":"unknown","numberReturned":0,"timeStamp":"2020-05-17T11:14:19.801Z","crs":null}

But if i go to geoserver and pass the same BBOX in cql query : i got features as expexted

here is the CQL query passed to Openlayers viewer of geoserver

And here is the result in the viewer (it get features!)

Any Ideas ?

Answer 1

thanks to @Mike and @Ian Turton for their helpfull comments :

The problem was in the view resolution. When sending a request with getFeatureInfoUrl function, it uses a small 50*50 extent map an thus it was returning only few features that intersects the center of the dragBox.

So i neded to change from :

viewResolution

to :

   // Be sure to import { getWidth, getHeight } from "ol/extent";
   viewResolution * Math.max(getWidth(extent), getHeight(extent) / 100

I changed it inside the the code :

      dragBox.on("boxend", () => {
  var extent = dragBox.getGeometry().getExtent();
  mymap()
    .getLayers()
    .getArray()
    .map((lyr) => {
      if (lyr instanceof ImageLayer) {
        //get the view resolution
        var viewResolution = mymap.getView().getResolution();
        // get the view projection
        var projection = mymap.getView().getProjection();
        // get the source
        var source = lyr.getSource();
        // get the dragbox center
        var center = getCenter(extent);
        // create the url
        var url = source.getFeatureInfoUrl(
          center,
          // Be sure to import { getWidth, getHeight } from "ol/extent";
          viewResolution * Math.max(getWidth(extent), getHeight(extent) / 100,
          projection,
          {
            INFO_FORMAT: "application/json",
            feature_count: 100,
            cql_filter: `BBOX(geom, ${extent.join(',')} )`

          }
        );
        if (url) {
          axios.get(url).then(
            response => {
              if ('features' in response.data && response.data.features.length > 0)
                console.log(response.data.features)
            }
          )



        }
      }
    })

    ;
});

And it worked perfectly !