3

This is the WFS service I'm using:

https://idena.navarra.es/ogc/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=IDENA:DOTACI_Sym_AlojTur&outputFormat=application/json&srs=EPSG:25830

I add it to my OpenLayers map as a Vector layer as following:

proj4.defs("EPSG:25830","+proj=utm +zone=30 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
register(proj4);
const proyeccion = getProjection('EPSG:25830');

var vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function(extent) {
    return 'https://idena.navarra.es/ogc/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=IDENA:DOTACI_Sym_AlojTur&outputFormat=application/json&srs=EPSG:25830';
  },
  strategy: bboxStrategy
});

var vector = new VectorLayer({
  source: vectorSource,
  projection: 'EPSG:25830',
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(215, 29, 29, 1.0)',
      width: 4
    })
  })
});

var map = new Map({
  target: 'map',
  layers: [vector,layer], //layer is an WMS layer
  view: new View({
    projection: proyeccion,
    center: fromLonLat([-1.629950,42.63],proyeccion),
    zoom: 9
  })
});

When loading the map, the WFS request is done and the response contains the feature collection in GeoJSON format and with the correct EPSG:

Request and response

Although everything seems to work fine, the map does not show the wfs layer

What is the problem here?

  • 1
    You are using EPSG:25830 which is unknown to openlayers. Either you need to request the layer in EPSG:3857 or EPSG:4326 from your wfs server or you make ol3 aware about the EPSG:25830 projection. In my opinion 2nd option is the proper way to do it. – pavlos Aug 30 at 8:32
  • But the Map View projection is declared as const proyeccion = getProjection('EPSG:25830');. Isn't that enough? – Iñigo Aug 30 at 8:40
  • No this is not enough. You need to include proj4js library and declare your projection. I know it is a bit confusing. Check this --> freeopengis.blogspot.com/2017/04/… – pavlos Aug 30 at 8:44
  • Question edited with proj4 added. Still not working @pavlos – Iñigo Aug 30 at 9:31
  • Ok I added an answer cause I couldnt write all the stuff within comments – pavlos Aug 30 at 9:59
2

Change your style to a proper point style So change this

var vector = new VectorLayer({
  source: vectorSource,
  projection: 'EPSG:25830',
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(215, 29, 29, 1.0)',
      width: 4
    })
  })
});

To this:

var vector = new ol.layer.Vector({
  source: vectorSource,
  projection: 'EPSG:25830',
  style: new ol.style.Style({
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({color: 'black'}),
        stroke: new ol.style.Stroke({
          color: [255,0,0], width: 2
        })
      })
    })
});

Or anyway , whatever you like for your style. If projection configuration is fine it should work.

Here is a fiddle, but for the shake of time, I am using the first option mentioned in my comments. So I ask your wfs server to do the reprojection, which is not the correct way but I do provide it so you can check your points.

If you are uncertain about the geometries you get back or if you get multi types of geometries on your response is better to use a custom style function as described here And one more fiddle to see it in action

  • 1
    Bro that was insane – Iñigo Aug 30 at 10:06
  • no probms amigo. Glad to help – pavlos Aug 30 at 10:07
  • Sorry @pavlos ! One more thing. What if the WFS layer was this one: inspire.navarra.es/services/CP/… ? The problem would be also on the style? Please try it on fiddle, I can't make it work! Thanks, seriously! :D – Iñigo Aug 30 at 10:15
  • Yes style must be defined according to the geometries you expect. You better use a custom style function so you can handle any type of geometries. Check the fiddle --> jsfiddle.net/um64bet7. And have a look for the explanation --> stackoverflow.com/questions/40796548/… – pavlos Aug 30 at 10:36
  • You are god. Seriously, thanks! @pavlos – Iñigo Aug 30 at 11:11

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.