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&

returns 没有结果，因为 (a) 它的格式不正确，您需要指定 service=WFS& 请求参数，并且 (b) 因为它们没有名为 [=25 的特征类型=].02.2015_-_Wahlbeteiligung_in_Prozent

可在此处找到可用的 FeatureType：

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

Angular 5 和 OpenLayers 4 不显示 WFS

Angular 5 and OpenLayers 4 not displaying WFS

angular

openlayers

angular-openlayers

web-feature-service