MapServer WFS OpenLayers 4 not visible

Question

I want to add WFS layer from MapServer in an OpenLayers 4.0.1 client.

  var mapserver_wfs_source = new ol.source.Vector({
    format: new ol.format.WFS(),
    loader: function(extent, resolution, projection){
      var url = 'http://localhost:8081/cgi-bin/mapserv.exe?map=/ms4w/apps/tutorial/htdocs/example2_wfs.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=hydro';
      $.ajax({
        url
      }).done(loadFeatures);
    },
    strategy: ol.loadingstrategy.bbox,
    projection: 'EPSG:4326'
  });

  var loadFeatures = function(response) {
    //console.log(response);
    mapserver_wfs_source.addFeatures(new ol.format.WFS().readFeatures(response));
    console.log(mapserver_wfs_source.getFeatures());
  };

  var mapserver_wfs = new ol.layer.Vector({
    source: mapserver_wfs_source,
    style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'rgba(0, 255, 255, 1.0)',
        width: 2
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 1.0)'
      })
    })
  });


  var projection = new ol.proj.Projection({
    code: 'EPSG:4326',
    units: 'degrees'
  });

  var map = new ol.Map({
    layers: [osm, mapserver_wfs],
    target: 'map',
    view: new ol.View({
      center: [-90, 45],
      zoom: 4,
      projection: projection
    })
  });

If I just follow the link 'http://localhost:8081/cgi-bin/mapserv.exe?map=/ms4w/apps/tutorial/htdocs/example2_wfs.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=hydro' I can see the features, and "mapserver_wfs_source.getFeatures()" returns the features.

Any idea on what is going on here?

Answer 1

Looks like the WFS version supported by default in OpenLayers 4.0.1 is 1.1.0 (http://openlayers.org/en/latest/apidoc/ol.format.WFS.html). So, changing in the request the WFS version to 1.1.0 solved the problem.

EDIT: The alternative could be to leave the version as 1.0.0 and pass as option to the WFS format GML2, according to the documentation (http://openlayers.org/en/latest/apidoc/ol.format.WFS.html), as follows:

  var mapserver_wfs_source = new ol.source.Vector({
    format: new ol.format.WFS({gmlFormat: ol.format.GML2()}),
    loader: function(extent, resolution, projection){
      var url = 'http://localhost:8081/cgi-bin/mapserv.exe?map=/ms4w/apps/tutorial/htdocs/example2_wfs.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=hydro';
      $.ajax({
        url
      }).done(loadFeatures);
    },
    strategy: ol.loadingstrategy.bbox,
    //projection: 'EPSG:4326'
  });

However this doesn't work. Maybe someone can suggest a solution that would make it work also with the version 1.0.0?