Loading WFS GeoJSON from Geoserver in Openlayers

Question

I am trying to load a WFS JSON layer into my web map. I am running the web page on a MAMP server. The layers are loaded from Geoserver and from a POSTGIS database.

I have 2 WMS layers being loaded from Geoserver and they are displayed on the map without a problem. However, when I try to load the WFS layer, it is not displayed on the map. I have read several similar issues here on StackExchange, but the solutions offered do not really work.

I have tried the WFS Example from Openlayers and it works fine and is displayed on my map. The key lines are:

var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent) {
      return 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
          'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
          'outputFormat=application/json&srsname=EPSG:3857&' +
          'bbox=' + extent.join(',') + ',EPSG:3857';
    },
    strategy: ol.loadingstrategy.bbox
});
var vector = new VectorLayer({
    source: vectorSource
});

When I tried to adjust the example to load my own layer, it was not displayed. Here is my code:

var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent) {
  return 'localhost:8080/geoserver/postgis_test/ows?service=WFS&' + 
         'version=1.0.0&request=GetFeature&' +
         'typeName=postgis_test:clusterresult&maxFeatures=500&' + 
         'outputFormat=application%2Fjson' +
         'bbox=' + extent.join(',') + ',EPSG:31370';
},
strategy: ol.loadingstrategy.bbox
});

var vector = new ol.layer.Vector({
   source: vectorSource
});
map.addLayer(vector);

It is also not:
- A CORS problem (this has been solved) - a problem of MAMP (I think). I tried loading the webpage in GeoServer itself as suggested on StackExchange, but this produced the same result.

The WFS layer was only loaded on one occasion: when loading through an AJAX request. But in this case the features were loaded onto 'Null island' although specifying the correct CRS. I will give you the code for this as well:

var firstWFSsource = new ol.source.Vector({
format: new ol.format.GeoJSON()
})
$.ajax({
type: "GET",
url: 'http://localhost:8080/geoserver/postgis_test/ows?service=WFS&' + 
'    version=1.1.0&request=GetFeature&typeName=postgis_test:clusterresult&' + 
     'maxFeatures=500&SRS=EPSG:31370&outputFormat=text%2Fjavascript&'+ 
      'format_options=callback:getJson',
dataType : 'jsonp',
jsonpCallback : 'getJson',
success:function(data){
    // If response is valid
    var geojsonFormat = new ol.format.GeoJSON();
    console.log(data);
    // reads and converts GeoJSon to Feature Object
    var features = geojsonFormat.readFeatures(data);
    firstWFSsource.addFeatures(features);
}
});

var firstWFS = new ol.layer.Vector({
    source: firstWFSsource
});

Answer 1

Your problem is probably related to:

• openlayers view projection incompatibility with geoserver WFS resultset projection
• openlayers "extent" parameter projection incompatibility with you BBOX SRID definition.

You need to check which projection is you openlayers map using and request the same SRID projection to geoserver also on BBOX query parameter. See: https://openlayers.org/en/latest/doc/faq.html#what-projection-is-openlayers-using-