Angular 5 and OpenLayers 4 not displaying WFS

Question

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.

I am wondering, if it is a matter of requesting the data? Because while the request is still loading, the map is already shown. That might be absolutely normal as well - I am just wrecking my brain. Or should this be handled by the loadingstrategy? — ill, Mar 13 '18 at 12:58

score 0 · Answer 1 · answered Nov 12 '18 at 14:02

Well the request:

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&

returns no results because (a) it's malformed, you need to specify the service=WFS& request parameter, and (b) because their is no featuretype called Buergerschaftswahl_15.02.2015_-_Wahlbeteiligung_in_Prozent

Available FeatureTypes can be found listed here:

https://geodienste.hamburg.de/HH_WFS_Statistik_Stadtteile_Wahlergebnisse?version=1.1.0&request=GetCapabilities&service=WFS&

You are right, this feature is not available anymore. The available features changed since then. — ill, Nov 12 '18 at 14:28

score 0 · Accepted Answer · answered Nov 12 '18 at 14:28

0

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);

answered Nov 12 '18 at 14:28

ill

352
2
4
23

Angular 5 and OpenLayers 4 not displaying WFS

2 Answers2