openlayerspolygongeojsongml-geographic-markup-lanopenlayers-8

OpenLayers 8.2, displaying a polygon or Geojson from WFS response (GML2)?

How can I render/display Polygon (from clicked WFS GML response)? I tried and tested many ways, including converting it to the Geojson. However, the Geojson has the coordinates in XYZ format, which I was not able to display. Please see steps & code below:

WFS response in ajax: The response is converted in ajax to the Features. The features have the three flatcoordinates. I tried converting them to Geojson having the same three coordinates. The following code was used:

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

Problem: is there another way to display the output of "features[0].get("AREAGEOM").flatCoordinates" as polygon Or to best way to render the converted GeoJSON into OpenLayers? An example would be greatly appreciated. Thank you!

Solution

  • XYZ coordinates should not stop you displaying the features on a map. You must however read the features into the same projection as the map's view.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/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/ol@v8.2.0/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>