OpenLayers 8.2如何渲染WFS返回的GML2格式Polygon/GeoJSON？

方案一：直接将WFS解析的Feature添加到OpenLayers矢量图层 #

无需转GeoJSON，直接用OpenLayers原生Feature对象创建矢量图层，原生支持三维坐标渲染，只需确保投影转换正确。

示例代码：

// 初始化OpenLayers地图实例
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([7.0825, 51.1629]),
    zoom: 18
  })
});

// 创建用于渲染Polygon的矢量图层
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 0, 0, 0.3)'
    }),
    stroke: new ol.style.Stroke({
      color: 'red',
      width: 2
    })
  })
});
map.addLayer(vectorLayer);

var format = new ol.format.WFS({});
var URL_ = 'https://geoportal.solingen.de/SG_WFS2/service.svc/get?service=wfs&request=GetFeature&version=1.1.0&format=GML2&typename=Gebaeude_Photovoltaik_2016&srsName=EPSG:4326&bbox=7.082506239049014,51.16289058483925,7.082534080185951,51.16290902798764';

$.ajax({ url: URL_, async: true })
  .done(function (response) {
    if (response) {
      // 解析Feature时指定投影转换：将WFS的EPSG:4326转为OpenLayers默认的EPSG:3857
      var features = format.readFeatures(response, {
        featureProjection: 'EPSG:3857'
      });
      
      // 将Feature添加到矢量图层
      vectorLayer.getSource().addFeatures(features);
      
      // 可选：自动定位到Feature所在范围
      var extent = vectorLayer.getSource().getExtent();
      map.getView().fit(extent, { padding: [50, 50, 50, 50] });
    }
  })
  .always(function () {
    $("#popup-content").html(content);
    if (content == "") {
      popup.setPosition(undefined);
    }
  });

核心说明：

• 投影转换是关键：WFS返回的是经纬度坐标（EPSG:4326），而OpenLayers默认地图使用Web墨卡托投影（EPSG:3857），必须通过featureProjection参数完成转换才能正确显示。
• OpenLayers原生支持三维几何：flatCoordinates中的XYZ坐标会被自动识别，渲染时默认忽略Z值进行二维展示，无需额外处理。

方案二：处理GeoJSON后再渲染 #

如果必须转换为GeoJSON格式，只需确保重新解析时完成投影转换，即可正常渲染：

// 假设已初始化map和vectorLayer
$.ajax({ url: URL_, async: true })
  .done(function (response) {
    if (response) {
      var features = format.readFeatures(response, {
        featureProjection: 'EPSG:3857'
      });
      
      // 转换为GeoJSON对象
      var geoJSON = new ol.format.GeoJSON().writeFeaturesObject(features);
      
      // 将GeoJSON重新解析为Feature并添加到图层
      var geojsonFormat = new ol.format.GeoJSON();
      var geoJsonFeatures = geojsonFormat.readFeatures(geoJSON);
      vectorLayer.getSource().addFeatures(geoJsonFeatures);
      
      // 自动定位到Feature范围
      var extent = vectorLayer.getSource().getExtent();
      map.getView().fit(extent, { padding: [50, 50, 50, 50] });
    }
  })
  .always(function () {
    $("#popup-content").html(content);
    if (content == "") {
      popup.setPosition(undefined);
    }
  });

方案三：手动用flatCoordinates创建Polygon #

如果需要直接使用flatCoordinates生成Polygon，可按以下方式实现：

// 假设已初始化map和vectorLayer
$.ajax({ url: URL_, async: true })
  .done(function (response) {
    if (response) {
      var features = format.readFeatures(response);
      var flatCoords = features[0].get("AREAGEOM").flatCoordinates;
      
      // 创建Polygon几何并完成投影转换
      var polygon = new ol.geom.Polygon([flatCoords]);
      polygon.transform('EPSG:4326', 'EPSG:3857');
      
      // 创建Feature并添加到图层
      var feature = new ol.Feature({
        geometry: polygon
      });
      vectorLayer.getSource().addFeature(feature);
      
      // 自动定位到Polygon范围
      var extent = polygon.getExtent();
      map.getView().fit(extent, { padding: [50, 50, 50, 50] });
    }
  })
  .always(function () {
    $("#popup-content").html(content);
    if (content == "") {
      popup.setPosition(undefined);
    }
  });

内容的提问来源于stack exchange，提问作者ravindraji4