Angular 5 和 OpenLayers 4 不显示 WFS

Question

我似乎无法解决如何显示 WFS 地图的问题。

我当前显示的 WMS 图层如下所示：

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

工作魅力...

当我尝试播放 WFS 时 - 没有任何显示：

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

加载例程略有不同，因为 WMS 加载已经自动化，而 WFS 则不是。 这就是 URL 被硬编码的原因。谁能告诉我，为什么什么都没有出现？

请求 geodienste.hamburg.de...返回 1.8 MB 的 GML 数据 - 即使在浏览器请求中也可见。

我试图尽可能多地坚持 OL 示例背景地图也显示在上面的两个示例中。

Answer 1

那么请求：

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&

未返回任何结果，因为 (a( 格式不正确，您需要指定service=WFS&请求参数，以及 (b( 因为没有名为 Buergerschaftswahl_15.02.2015_-_Wahlbeteiligung_in_Prozent 的要素类型

可在此处找到可用的功能类型：

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

Answer 2

问题是投影的差异。使用 proj4 解决了这个问题;

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