Display features returned by WFS within OpenLayers hand drawn bounding box

Question

I allow the user to draw features, and on drawend I need to make a request to my WFS service to return features.

I can get the WFS to return data based on the extent using:

let vectorSource = new VectorSource({
                format: new GeoJSON(),
                url: function(extent) {
                    return 'https://example/wfs' +
                        '?key=key' +
                        '&SERVICE=WFS' +
                        '&REQUEST=GetFeature' +
                        '&TYPENAMES=data_point' +
                        '&SRSNAME=urn:ogc:def:crs:EPSG::27700' +
                        '&BBOX=' + extent.join(',') + ',urn:ogc:def:crs:EPSG::27700';

                },
                strategy: bboxStrategy
            });

However I cannot get these features to display despite injecting this source into the layer, and the layer onto the map.

I can get all features to display using something along the lines of:

        fetch('example/wfs?key=key', {
        method: 'POST',
        body: new XMLSerializer().serializeToString(featureRequest)
    }).then(function(response) {
        return response.text();
    }).then(function(gml) {
        console.log(gml);
        let features = new GML().readFeatures(gml);
        vectorSource.addFeatures(features);
        map.getView().fit(vectorSource.getExtent());
    });

However I cannot for the life of me work out how to restrict the data requested in this request to a bounding box of say four coordinates.

Potentially this could be a limitless pointed geometry that will act as a cookie cutter for data displayed.

My searches have yielded no results.

Answer 1

You seem to be very close in both cases.

In the top snippet you could log any features and their geometry to confirm whether any are being loaded, and if so why they don't appear where expected (e.g. geometry coordinates are lon/lat values when view is EPSG:27700)

setTimeout(function(){
  console.log(vectorSource.getFeatures());
  vectorSource.getFeatures().forEach(function(feature){console.log(feature.getGeometry());});
}, 10000);

In the second snippet if everything else is working I presume you will need to add the bbox array to the featureRequest object used in the serializeToString call, or change the way you pass the data.

Here is a similar WFS example where you can use view source. It works equally well with WFS or GML as the format. When the view is the same projection as the data http://mikenunn.16mb.com/demo/wfs-italy-4326.html using a url function is sufficient. But unlike formats such as GeoJSON OpenLayers doesn't automatically reproject features to view projection for GML or WFS. With a different projection http://mikenunn.16mb.com/demo/wfs-italy-3857.html a loader function is needed to reproject the feature geometry, otherwise Italian provinces end up in the Atlantic within few meters of [0,0].