1

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

enter image description here

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

Geoserver viewer

Any Ideas ?

  • getFeatureInfoUrl is adding BBOX, WIDTH and HEIGHT based on the center and resolution you pass it, which is smaller than your extent. Make sure center is the center of your dragBox extent, and you may also need to calculate an appropriate resolution to fit your extent. – Mike May 17 at 12:55
  • Hi mike, thanks for your comment : but at the second line of my code, i got the exent of the dragbox, then i extract from it the center....For the resolution, i got it directly from the map which seems to me correct, did i misunderstood something here ? – yAzou May 17 at 13:03
  • OpenLayers is using a small 50 by 50 map centred on your click. – Ian Turton May 17 at 16:12
  • @IanTurton : Okay, but how does it affects my request ? – yAzou May 17 at 16:15
  • You would need to increase the value to pass so your extent would fit inside a 100 x 100 pixel box at that resolution viewResolution * Math.max(extentWidth, extentHeight) / 100 – Mike May 17 at 18:08
0

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 !

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.