1

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.