I would like to plot WFS layer with OpenLayers.
I tried with a sample WFS stream at first and succedeed.
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'})