OpenLayers - WFS Projection not showing EPSG:25832

Question

I can't solve the display of my WFS. I can see the request returning the data in my debugger, but it is not showing. My reference for solving this problem was Openlayers3 using custom EPSG:25832.

Am I right, suspecting that I do not need to further transform my vectorLayer? Is my center causing the problem, because I transform to 'EPSG:3857' rather then 'EPSG:25832' (again I would suspect not - since it is just the center)?

let myProjectionName = 'EPSG:25832';
proj4.defs(myProjectionName, '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs');
let myProjection = ol.proj.get(myProjectionName);
this.mapView = new ol.View({
  center: ol.proj.transform([9.98, 53.55], 'EPSG:4326', 'EPSG:3857'),
  zoom: 9,
  projection: myProjection
});

let vectorLayer = new ol.source.Vector({
  format: new ol.format.GML(),
  url: function(extent) {
    return 'https://geodienste.hamburg.de/HH_WFS_Statistik_Stadtteile_Wahlergebnisse' +
      '?version=1.1.0&request=GetFeature&typename=Statistik_Stadtteile_Wahlergebnisse:Buergerschaftswahl_15.02.2015_-_Wahlbeteiligung_in_Prozent' +
      '&bbox' + extent.join(',') + ',EPSG:25832';
  },
  strategy: ol.loadingstrategy.bbox,
  projection: 'EPSG:25832'
});

this.map = new ol.Map({
  target: this.mapId2,
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Vector({
      source: vectorLayer
    })
  ],
  view: this.mapView
});

Answer 1

The simple problem was the (maybe Angular 5 specific) initiation and usage of proj4.

ol.proj.get was not receiving the new declaration of proj4.defs(myProjectionName, ...) because it had to be set separately afterwards!

let myProjectionName = 'EPSG:25832';
proj4.defs(myProjectionName, '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs');
ol.proj.setProj4(proj4);

let myProjection = ol.proj.get(myProjectionName);
myProjection.setExtent([239323.44497533192, 4294418.796805557, 760676.5550246682, 9320086.206906328]);

Now ol.proj.get(myProjectionName) is not returning NULL and allowing my View to transform and the WFS to map properly.

Helpful references: ol.proj and PROJ4JS Doku

Answer 2

I've identified some issues in your code to display the layer

• the center should use the EPSG:25832 projection (you were aware of it from your post)

• an extent for the projection should be set (recommendation, not an obligation). It will clip other layers (calculating reprojection outside the valid extent of the projection could go wrong)

• projection can't be set in the ol.source.Vector but instead at layer level e.g ol.layer.Vector

• projection should be also set in the OSM layer as you need to explicitly tell OpenLayers to get raster tiles from EPSG 3857 and reproject them
• ol.format.GML has to be ol.format.WFS

I've also use a public proxy to avoid CORS issue (https://cors-anywhere.herokuapp.com)

You will find below the corrections and you can browse a working demo Be cautious, it will take seconds to display the vector layer. It's probably related to WFS size and maybe proxy speed too (didn't investigate...)

  let myProjectionName = 'EPSG:25832';
  proj4.defs(myProjectionName, '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs');
  var myProjection = ol.proj.get(myProjectionName);
  myProjection.setExtent([239323.44497533192, 4294418.796805557, 760676.5550246682, 9320086.206906328]);

  var mapView = new ol.View({
    center: ol.proj.transform([9.98, 53.55], 'EPSG:4326', 'EPSG:25832'),
    zoom: 9,
    projection: 'EPSG:25832'
  });

  var vectorLayer = new ol.source.Vector({
    format: new ol.format.WFS(),
    url: function(extent) {
      return 'https://cors-anywhere.herokuapp.com/https://geodienste.hamburg.de/HH_WFS_Statistik_Stadtteile_Wahlergebnisse' +
        '?version=1.1.0&request=GetFeature&typename=Statistik_Stadtteile_Wahlergebnisse:Buergerschaftswahl_15.02.2015_-_Wahlbeteiligung_in_Prozent' +
        '&bbox' + extent.join(',') + ',EPSG:25832';
    },
    strategy: ol.loadingstrategy.bbox
  });

  let map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM(),
        projection: 'EPSG:25832'
      }),
      new ol.layer.Vector({
        source: vectorLayer,
        projection: 'EPSG:25832'
      })
    ],
    view: this.mapView
  });