Showing features from a GML3 file (with a specific projection)

Question

How can I show the geometries from a GML file using a specific format? The problem is that Nothing is shown. No error messages.

In my Angular project, I first set the specific projection.

proj4.defs("EPSG:28992", "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000  +ellps=bessel  +towgs84=565.040,49.910,465.840,-0.40939,0.35971,-1.86849,4.0772 +units=m +no_defs");
register(proj4)
this.dutchProjection = GetProjection('EPSG:28992');

This is how I read the GML file (without errors):

this.gmlFeatures = new GML3().readFeatures(this.fileText, {
        featureProjection: 'EPSG:28992', dataProjection: 'EPSG:28992' });

Answer 1

Finally I found the solution.

Special about the solution is: it contains a specific projection and using GML3!

Step 1 - Loading the features from a file.

Step 1.A: Define the specific projection first

Define the specific projection:

defineProjection() {
    proj4.defs("EPSG:28992", "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000  +ellps=bessel  +towgs84=565.040,49.910,465.840,-0.40939,0.35971,-1.86849,4.0772 +units=m +no_defs");
    register(proj4)
    this.dutchProjection = GetProjection('EPSG:28992');
  }

Step 1.B: Load the features.

In this case I read from a file, but it could be reading from URL. It is important to first define the projection, otherwise you get Axis error message, etc.

this.defineProjection();
this.httpClient.get('assets/wfs113-epsg-28992.xml', {responseType: 'text'})
  .subscribe(
    data => {
      console.log(data);
      this.fileText = data;
      var wfsFormat = new WFS({
        gmlFormat: new GML3()
      });
      this.gmlFeatures = wfsFormat.readFeatures(this.fileText, {
        featureProjection: 'EPSG:28992',
        dataProjection: 'EPSG:28992'
      });
      this.addGmlFeatures();
    },
    error => {
      console.log(error);
    }
  );

Step 2 - show the read feature collection

I used a specific Map/Projection of the Netherlands. You can easily exchange that with an OSM variant.

ngAfterViewInit() {
    let polygonStyle = new Style({
      fill: new Fill({
        color: "rgba(255, 0, 0, 0.8)"
      }),
      stroke: new Stroke({
        color: "#ffcc33",
        width: 10
      })
    });
    this.vectorSource = new VectorSource({
      format: new WFS(),
      features: []
    });
    this.vectorLayer = new Vector({
      source: this.vectorSource,
      style: [polygonStyle]
    });

    this.map = new Map({
      layers: [
        new Tile({
          source: new XYZ({
            url: 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaart/EPSG:3857/{z}/{x}/{y}.png',
          })
        }),
        this.vectorLayer
      ],
      view: new View({
        projection: this.dutchProjection,
        center: [173063,441818],
        zoom: 9
      }),
      target: "map"
    });
    this.addGmlFeatures();
  }

And the adding of the features:

addGmlFeatures() {
    if (this.gmlFeatures.length > 0) {
      this.vectorLayer.getSource().addFeatures(this.gmlFeatures);
      //this.map.getView().fit( this.vectorSource.getExtent());
      console.log( this.map.getView().getProjection());
    }
  }

Example file:

<?xml version='1.0' encoding="ISO-8859-1" ?>
<wfs:FeatureCollection
  xmlns:ms="http://mapserver.gis.umn.edu/mapserver"
  xmlns:gml="http://www.opengis.net/gml"
  xmlns:wfs="http://www.opengis.net/wfs"
  xmlns:ogc="http://www.opengis.net/ogc"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://mapserver.gis.umn.edu/mapserver http://atl-p0-app001.culture.fr:5522/cgi-bin/mapserv?SERVICE=WFS&amp;VERSION=1.1.0&amp;REQUEST=DescribeFeatureType&amp;TYPENAME=MD_2775&amp;OUTPUTFORMAT=text/xml;%20subtype=gml/3.1.1  http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
  <gml:boundedBy>
    <gml:Envelope srsName="EPSG:28992">
      <gml:lowerCorner>173063 441818</gml:lowerCorner>
      <gml:upperCorner>173563 444318</gml:upperCorner>
    </gml:Envelope>
  </gml:boundedBy>
  <gml:featureMember>
    <ms:MD_2775>
      <gml:boundedBy>
        <gml:Envelope srsName="EPSG:28992">
          <gml:lowerCorner>173063 441818</gml:lowerCorner>
          <gml:upperCorner>173563 444318</gml:upperCorner>
        </gml:Envelope>
      </gml:boundedBy>
      <ms:msGeometry>
        <gml:Polygon srsName="EPSG:28992">
          <gml:exterior>
            <gml:LinearRing>
              <gml:posList srsDimension="2">173063 441818 173463 441818 173463 444818 173063 444818 173063 441818 </gml:posList>
            </gml:LinearRing>
          </gml:exterior>
        </gml:Polygon>
      </ms:msGeometry>
    </ms:MD_2775>
  </gml:featureMember>
</wfs:FeatureCollection>