Plotting WFS layer from ArcGIS Online with OpenLayers?

Question

I would like to plot WFS layer with OpenLayers.

I tried with a sample WFS stream at first and succedeed.

WFS stream : https://ahocevar.com/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=osm:water_areas&outputFormat=application/json&srsname=EPSG:3857

So now I want to adapt it my my FWS stream.

My WFS stream is from Atmo Hauts de France : https://dservices8.arcgis.com/rxZzohbySMKHTNcy/arcgis/services/alrt3j_hdf/WFSServer?service=wfs&request=getcapabilities I adapted it with getFeature instead of getCapabilities to get the features I want : https://dservices8.arcgis.com/rxZzohbySMKHTNcy/arcgis/services/alrt3j_hdf/WFSServer?service=wfs&request=getFeature&typename=alrt3j_hdf:alrt3j_hdf_0 For the example above the output format is geojson, but unfortunately ArcGIS does not seem to produce WFS with geojson output format.

So I tried to use the GML format output. I don't get error message anymore ! But still nothing on the map ...

Here is the code sample that works with the WFS I used as example :

//map
  fond = new ol.layer.Tile({
        source: new ol.source.OSM()
      })

// WFS stream
  var waterNorthAmerica = 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.bbox
  });

  var style_ligne_eau = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'rgba(0, 0, 255, 1.0)',
        width: 2
      })      
    });
          // couche vecteur à partir du flux WFS
  var vectorLayer = new ol.layer.Vector({
    source: waterNorthAmerica,
    style: style_ligne_eau
  });
  //carte
      var map = new ol.Map({
    target: 'map',
    layers: [
      fond,vectorLayer
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
  });

Here is the code sample that plot nothing :

//map
  fond = new ol.layer.Tile({
        source: new ol.source.OSM()
      })
//wfs stream
    var url_hdf_test = "https://dservices8.arcgis.com/rxZzohbySMKHTNcy/arcgis/services/alrt3j_hdf/WFSServer?service=wfs&request=getFeature&typename=alrt3j_hdf:alrt3j_hdf_0&outputFormat=gml2&srsname=EPSG:3857";   

    var hdf = new ol.source.Vector({
    format:  new ol.format.GML({
            srsName: 'EPSG:3857'
        }),   
    url: url_hdf_test,
    strategy: ol.bbox
  });


  var style_point = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'rgba(0, 0, 255, 1.0)',
        width: 2
      })      
    });
       var vectorHDF = new ol.layer.Vector({
    source: hdf,
    style: style_point
  });


  //plot the layers
      var map = new ol.Map({
    target: 'map',
    layers: [
      fond,vectorHDF
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
  });

For me both are similar, except the output format. If something see why the second one plot nothing that would be great !

UPDATE WITH SOLUTIONS : I edit the post just to clarify the solution as TomazicM & Mike both gave me one.

Solution 1 : Keeping the GML format, but using ol.format.GML2 and not ol.format.GML.

Solution 2 : Using GeoJSON format, but setting the EPSG when defining GeoJSON format: ol.format.GeoJSON({dataProjection: 'EPSG:3857'})

Answer 1

Your WFS layer works in GeoJSON format, but there are several things necessary to make it work:

1. WFS version must be 2.0.0
2. Output format must be declared as GEOJSON
3. bbox strategy
4. Setting dataProjection to EPSG:3857 when defining GeoJSON format
5. View center must be set to something like [2.5, 50] (NorthEast of France).

So the final code could look something like this:

var vectorSource = new ol.source.Vector({
  format: new ol.format.GeoJSON({dataProjection: 'EPSG:3857'}),
  url: function(extent) {
    return 'https://dservices8.arcgis.com/rxZzohbySMKHTNcy/arcgis/services/alrt3j_hdf/WFSServer?service=wfs&' +
        'version=2.0.0&request=GetFeature&typename=alrt3j_hdf:alrt3j_hdf_0&' +
        'outputFormat=GEOJSON&srsname=EPSG:3857&' +
        'bbox=' + extent.join(',') + ',EPSG:3857';
  },
  strategy: ol.loadingstrategy.bbox
});

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

var raster = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  layers: [raster, vector],
  target: document.getElementById('map'),
  view: new ol.View({
    center: ol.proj.fromLonLat([2.5, 50]),
    maxZoom: 19,
    zoom: 7
  })
});

Warning: At zoom 7 (full view of data) GeoJSON data size iz about 8 MB, so it takes a while to load.