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

map with WFS stream from water in Canada

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'})

• Maximilien jaffrès: maybe related : gis.stackexchange.com/questions/288068/…. Seems to say that you need to try different format (WFS/GML3/XML)
• Mike: It does need ol.format.GML2 also the data is in France but the view opens in Ethiopia?
• J.Delannoy: @Mike Thank you, I changed for ol.format.GML2, but still nothing :/ for Ethiopia it's just because I didn't adjust it :)
• Mike: Just changing GML to GML2 works for me (you need to pan up to France) codepen.io/mike-000/pen/ZEzKazW
• J.Delannoy: My bad, it works now ! Sorry I mixed up with the suggestion of TomazicM

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.

• J.Delannoy: Thank you @TomazicM, it works even with only steps 2, 4 and 5. So I only needed to set the dataprojection. Thank you ! :)