Angular 5 和 OpenLayers 4 不显示 WFS

Posted 2023-03-25

【中文标题】Angular 5 和 OpenLayers 4 不显示 WFS

【英文标题】：Angular 5 and OpenLayers 4 not displaying WFS

【发布时间】：2018-03-13 08:54:09

【问题描述】：

我似乎无法解决如何显示 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 数据 - 即使在 broser 请求中也可见。

我尽量坚持使用 OL 示例 背景地图也显示在上面的两个示例中。

【问题讨论】：

我想知道，是否是请求数据的问题？因为当请求仍在加载时，地图已经显示出来了。这也可能是绝对正常的——我只是在破坏我的大脑。还是应该由加载策略来处理？

【参考方案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&

【讨论】：

你说得对，这个功能已经不可用了。从那时起，可用的功能发生了变化。

【参考方案2】：

问题在于预测的差异。 使用 proj4 解决了这个问题；

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