2

I'm trying to create participatory map but I can't basically insert a WFS into my OpenLayers frame. I searched for a lot of different solutions. My WFS does work into QGIS, I also can insert WMS into my OpenLayer.

Here's the relevant section of my code:

var vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function(extent) {
    return (
      "http://localhost:10081/geoserver/data_nl/ows?service=WFS&" +
      "version=1.0.0&request=GetFeature&typeName=data_nl:top10nl_funcgebied_camping_kampeerterrein&" +
      "maxFeatures=50&outputFormat=application/json&srsname=EPSG:4326&" +
      "bbox=" +
      extent.join(",") +
      ",EPSG:4326"
    );
  },
  strategy: new bboxStrategy()
});
var vector = new VectorLayer({
  source: vectorSource
});

https://codesandbox.io/s/getfeatureinfo-image-9gzxg?fontsize=14

1

You should always try to use the features built into the library rather than trying to fudge your own solution. So looking at the OpenLayers WFS example it seems that you should try to create the WFS vector source programmatically rather than by pasting in a URL (which can't be updated to reflect moving the map. This leads to code like:

// generate a GetFeature request
var featureRequest = new WFS().writeGetFeature({
  srsName: 'EPSG:3857',
  featureNS: 'http://openstreemap.org',
  featurePrefix: 'osm',
  featureTypes: ['water_areas'],
  outputFormat: 'application/json',
  filter: andFilter(
    likeFilter('name', 'Mississippi*'),
    equalToFilter('waterway', 'riverbank')
  )
});

Note how it uses the projection EPSG:3857 to match your map, and can handle filters and automatically includes the map bounds in the query.

// then post the request and add the received features to a layer
fetch('https://ahocevar.com/geoserver/wfs', {
  method: 'POST',
  body: new XMLSerializer().serializeToString(featureRequest)
}).then(function(response) {
  return response.json();
}).then(function(json) {
  var features = new GeoJSON().readFeatures(json);
  vectorSource.addFeatures(features);
  map.getView().fit(vectorSource.getExtent());
});

If you continue to have problems you will need to examine the requests being sent to the server (check they match ones that work in your browser or curl) and the results sent back, do the features have the correct projection for your map? are the "right" features returned?

  • This example openlayers.org/en/latest/examples/vector-wfs.html is more relevant to the code in the question, but needs modifying when the view and WFS projections are different.. – Mike Oct 31 '19 at 13:32
  • Hi, I tried to do as your examples, but still doesn't work. Even with data samples from Geoserver WFS service isn't available. Do you think I could have a problem on my Geoserver? – Thomas Lecaé Nov 5 '19 at 15:16
0

If your view in EPSG:3857 the eextent passed to the url function will also be in EPSG:3857. If the server supports that you should use

  url: function(extent) {
    return (
      "http://localhost:10081/geoserver/data_nl/ows?service=WFS&" +
      "version=1.0.0&request=GetFeature&typeName=data_nl:top10nl_funcgebied_camping_kampeerterrein&" +
      "maxFeatures=50&outputFormat=application/json&srsname=EPSG:4326&" +
      "bbox=" +
      extent.join(",") +
      ",EPSG:3857"
    );
  },

otherwise with WFS 1.0.0 you would need to transform the extent to EPSG:4326 (if you were using WFS 1.1.0 you would also need to swap the x and y axes of the extent)

  url: function(extent) {
    return (
      "http://localhost:10081/geoserver/data_nl/ows?service=WFS&" +
      "version=1.0.0&request=GetFeature&typeName=data_nl:top10nl_funcgebied_camping_kampeerterrein&" +
      "maxFeatures=50&outputFormat=application/json&srsname=EPSG:4326&" +
      "bbox=" +
      transformExtent(extent,"EPSG:3857","EPSG:4326").join(",") +
      ",EPSG:4326"
    );
  },

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.