Reprojecting features in vector layer

Question

I am working on web application to display overlays on an osm map. I am using openlayers in combination with a qgis-server to provide wfs. I am mainly using EPSG:3857, as this is the default for osm.

I load the features with a get request, I get a geojson response, then read the features with ol.format.GeoJSON().readFeatures, then add them to a vectorlayer using ol.vector.getSource.addFeatures()

Now some of my datasets are actually in a different crs, for example EPSG:4326. According to the documentation here http://openlayers.org/en/master/apidoc/ol.format.GeoJSON.html one can specify the type of data that one is reading, and the desired projection (if I understand it correctly). Also that is what they seem to do in this example: https://openlayersbook.github.io/ch07-wrapping-our-heads-around-projections/example-04.html In that example they use proj4s, but if i understand correctly that is only needed when using a crs that is not natively supported by openlayers.

However, the data does not seem to get reprojected, both with and without adding those option to the readFeatures(), the features are still in the original crs.

What am I missing here?

here is a code snippet of my site:

  $.get(url).done(function(response){
      if(SRS == "EPSG:3857"){ 
        var features = new ol.format.GeoJSON().readFeatures(response);
        console.log("3857 features:", features);        
        vector.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(response));
      }
      if(SRS == "EPSG:4326"){
        console.log("SRS 4326") 
        var features3857 = new ol.format.GeoJSON().readFeatures(response, {
        dataProjection: 'EPSG:4326',
        featureProjection: 'EPSG:3875'
      });
      vector.getSource().addFeatures(features3857);  
     }
      if(SRS == "EPSG:28992"){
        console.log("SRS 28992") 
        var features3857 = new ol.format.GeoJSON().readFeatures(response, {
        dataProjection: 'EPSG:28992',
        featureProjection: 'EPSG:3857'
      });
      vector.getSource().addFeatures(features3857);  
     }
  });

Answer 1

Actually that should (mostly) work, I only see a typo in 'EPSG:3875', it should be:

featureProjection: 'EPSG:3857'

Geojson load request also can be handled directly by ol.source.Vector. You could make a test loading features directly when defining the source of vector layer like that:

var vectorSource = new ol.source.Vector({
    url: "features.geojson",
    format: new ol.format.GeoJSON({featureProjection: 'EPSG:3857'})
});

Or do you request the features directly from QGIS server WFS service? In that case you should do it like that as shown in this example:

var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent) {
        return 'https://host.com/qgis_mapserv.fcgi?' +
            'map=/home/qgis/map.qgs&' +
            'version=1.1.0&request=GetFeature&typename=qgislayer&' +
            'outputFormat=GeoJSON&srsname=EPSG:3857&' +
            'bbox=' + extent.join(',') + ',EPSG:3857';
    },
    strategy: ol.loadingstrategy.bbox
});

What I noticed is that QGIS server works with GeoJSON as outputFormat - and not with application/json as geoserver does.