angularopenlayersangular-openlayersweb-feature-service

Angular 5 and OpenLayers 4 not displaying WFS


I can't seem to solve the poblem of how to display a WFS map.

I am currently displaying WMS layer as followed:

let wmsLayer = new ol.source.TileWMS({
  url: mapService.url,
  params: {
    LAYERS: mapService.layers,
    TILED: true,
    FORMAT: mapService.format
  },
  serverType: 'geoserver'
});
this.featureLayer = wmsLayer;
return new ol.layer.Tile({
  source: wmsLayer
});

Works a charm ...

When I am trying to diplay WFS instead - nothing is showing up:

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';
  },
  strategy: ol.loadingstrategy.bbox
});

this.featureLayer = vectorLayer;

return new ol.layer.Vector({
  source: vectorLayer,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 255, 1.0)',
      width: 2
    })
  })
});

The loading routine is a bit different, because WMS loading is already automated, while WFS is not. Thats why URL is hardcoded. Can anyone tell me, why nothing is showing up?

The request to geodienste.hamburg.de ... is returning 1.8 mb of GML Data - visible even in a broser request.

I tried to stick to the OL examples as much as The background map is also showing in both examples above.


Solution

  • The problem was the difference in projections. Using proj4 solved this issue;

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