OpenLayers 8.2，显示来自 WFS 响应 (GML2) 的多边形或 Geojson？

Question

如何渲染/显示多边形（来自单击的 WFS GML 响应）？我尝试并测试了很多方法，包括将其转换为 Geojson。但是，Geojson 具有 XYZ 格式的坐标，我无法显示。请参阅下面的步骤和代码：

GML 响应：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,5 1.16289058483925,7.082534080185951,51.16290902798764

<gml:featureMember>
<gmgml:Gebaeude_Photovoltaik_2016 gml:id="Gebaeude_Photovoltaik_2016.48856">
<gmgml:ID_GEB>48856</gmgml:ID_GEB>
<gmgml:WFSLAYER>Gebaeude_Photovoltaik_ol</gmgml:WFSLAYER>
<gmgml:WFSLAYERNAME>Gebaeude_Photovoltaik_ol</gmgml:WFSLAYERNAME>
<gmgml:AREAGEOM>
<gml:Polygon srsName="EPSG:4326">
<gml:exterior>
<gml:LinearRing>
<gml:posList srsDimension="2">51.1627507965514 7.08203220561159 51.1625336743753 7.08259783924852 51.1629790338245 7.08303073041684 51.1631962440027 7.08246594787304 51.1627507965514 7.08203220561159 </gml:posList>
</gml:LinearRing>
</gml:exterior>
</gml:Polygon>
</gmgml:AREAGEOM>
</gmgml:Gebaeude_Photovoltaik_2016>
</gml:featureMember>

ajax 中的 WFS 响应：响应在 ajax 中转换为功能。这些特征具有三个平面坐标。我尝试将它们转换为具有相同三个坐标的 Geojson。使用以下代码：

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) {
      var features = format.readFeatures(response);
      console.log(features[0].get("AREAGEOM").flatCoordinates);

      var geoJSON = new ol.format.GeoJSON().writeFeaturesObject(features);
      console.log(geoJSON);
    }
  })
  .always(function () {
    $("#popup-content").html(content);
    if (content == "") {
      popup.setPosition(undefined);
    }
  });

console.log(features[0].get("AREAGEOM").flatCoordinates); =>

[7.08203220561159, 51.1627507965514, 0, 7.08259783924852, 51.1625336743753, 0, 7.08303073041684, 51.1629790338245, 0, 7.08246594787304, 51.1631962440027, 0, 7.08203220561159, 51.1627507965514, 0]

console.log(geoJSON); => 输出

问题：是否有另一种方法可以将“features[0].get(“AREAGEOM”).flatCoordinates”的输出显示为polygon或者将转换后的GeoJSON渲染到OpenLayers中的最佳方法？一个例子将不胜感激。谢谢！

Answer 1

XYZ 坐标不应阻止您在地图上显示要素。但是，您必须将要素读取到与地图视图相同的投影中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" type="text/css">
    <style>
            html, body {
                height: 100%;
                margin: 0;
            }
            #map {
                width: 100%;
                height: 100%;
            }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
     <script>

const 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';

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
    }),
  ],
  view: new ol.View(),
})

fetch(url)
  .then(response => response.text())
  .then(text => {
    const source = new ol.source.Vector({
      features: new ol.format.WFS().readFeatures(text, {
        dataProjection: 'EPSG:4326',
        featureProjection: map.getView().getProjection(),
      }),
    });
    map.addLayer(
      new ol.layer.Vector({
        source: source,
      })
    );
    map.getView().fit(source.getExtent());
  });

    </script>
  </body>
</html>

OpenLayers 8.2，显示来自 WFS 响应 (GML2) 的多边形或 Geojson？

问题描述投票：0回答：1

1个回答

最新问题

OpenLayers 8.2，显示来自 WFS 响应 (GML2) 的多边形或 Geojson？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1