Adding all polygons in GML from MapServer to openlayers using WFS

Question

I want to show the contents from MapServer (returned as GML given below) as WFS layer in OpenLayers map (OpenLayers v5.0.0). The problem is that only one polygon is added to the map. Here is the code that I have used:

var projection = new ol.proj.Projection({
    code: 'EPSG:4326',
    units: 'm',
    global: true,
    axisOrientation: 'neu',
});
console.log(projection);
ol.proj.addProjection(projection);

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: url,
        format: new ol.format.GML3({
            srsName: "EPSG:4326",
            featurePrefix: 'ms',
            featureType: "Region_Map",
            featureNS: "http://mapserver.gis.umn.edu/mapserver"
        }),
        projection: projection,
    })
});
console.log(vector);
map.addLayer(vector)

GML:

<?xml version='1.0' encoding="UTF-8" ?>
<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://localhost/MapServer/mapserv.exe?map=c:/inetpub/wwwroot/data//Region_Map_01392779-38eb-4685-a94c-d738038843a6.map&amp;SERVICE=WFS&amp;VERSION=1.1.0&amp;REQUEST=DescribeFeatureType&amp;TYPENAME=Name&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:4326">
            <gml:lowerCorner>8.428503 77.171508</gml:lowerCorner>
            <gml:upperCorner>9.201230 77.398780</gml:upperCorner>
        </gml:Envelope>
      </gml:boundedBy>
    <gml:featureMember>
      <ms:Region_Map gml:id="Name.Layer.fid1">
        <gml:boundedBy>
            <gml:Envelope srsName="EPSG:4326">
                <gml:lowerCorner>8.428503 77.353326</gml:lowerCorner>
                <gml:upperCorner>8.473957 77.398780</gml:upperCorner>
            </gml:Envelope>
        </gml:boundedBy>
        <ms:msGeometry>
          <gml:Polygon srsName="EPSG:4326">
            <gml:exterior>
              <gml:LinearRing>
                <gml:posList srsDimension="2">8.428503 77.398780 8.428503 77.353326 8.473957 77.353326 8.473957 77.398780 8.428503 77.398780 </gml:posList>
              </gml:LinearRing>
            </gml:exterior>
          </gml:Polygon>
        </ms:msGeometry>
        <!--other content-->
      </ms:Region_Map>
    </gml:featureMember>
    <gml:featureMember>
      <ms:Region_Map gml:id="Name.Layer.fid2">
        <gml:boundedBy>
            <gml:Envelope srsName="EPSG:4326">
                <!--some coordinates similar to above-->
            </gml:Envelope>
        </gml:boundedBy>
        <ms:msGeometry>
          <gml:Polygon srsName="EPSG:4326">
            <gml:exterior>
              <gml:LinearRing>
                <gml:posList srsDimension="2">Similar to above</gml:posList>
              </gml:LinearRing>
            </gml:exterior>
          </gml:Polygon>
        </ms:msGeometry>
        <!-- other data-->
      </ms:Region_Map>
    </gml:featureMember>
    <!--Other such tags-->
</wfs:FeatureCollection>

Please tell me what is the error. I did try out a few other related answers like this one on setting featureNS and this one on parsing polgons but haven't reached a satisfactory result. Pleas help.

UPDATE

Based on the answer by ThomasG77 I tried the following two attempts (also referred to the OpenLayers API)

Attempt 1 - Simply replaced the ol.format.GML3({...}) with ol.format.WFS({...}) in above code leaving all else the same.

Attempt 2 - Used this code instead of the code written in ol.format.GML3({...})

format: new ol.format.WFS({
    featureType: "Region_Map",
    featureNS: "http://mapserver.gis.umn.edu/mapserver",
    gmlFormat: new ol.format.GML3({
        srsName: "EPSG:4326",
        surface: true,
        multiSurface: true
    })
}),

In both cases, I ended up seeing no polygons added to the map. I even referred to the answers linked by @ThomasG77.

Is there some other issue with my code too?

Answer 1

Simply use ol.format.WFS instead of ol.format.GML3. I have made numerous answers related to your issue e.g Add GML Layer in OpenLayers 4, WFS not working in Openlayers, working in qgis. WMS working ok and Openlayers 4 WFS & vector select

Edit Your both attempts do not work because it seems your are consuming data in EPSG:4326 whereas your map seems to use EPSG:3857. The different recipes you use do not make automatic reprojection of coordinates. Usually to sort out this kind of issue, I check coordinates by doing something like

vector.getSource().getFeatures()[0].getGeometry().getCoordinates()

I've made a working example with your WFS Collection using a loader (like for Openlayers 4 WFS & vector select). I've made some comments to explain a bit more below

  var vectorSource = new ol.source.Vector({
    url: 'wfs.xml',
    format: new ol.format.WFS(),
    loader: function(extent, resolution, projection) {
     var url = 'wfs.xml';
     fetch(url)
       .then(response => response.text())
       .then(text => {
         // Add Features
         vectorSource.addFeatures(
           // Read WFS collection and do a reprojection of coordinates
           // from EPSG 4326 to EPSG 3857
           vectorSource.getFormat().readFeatures(text, {
             dataProjection: 'EPSG:4326',
             featureProjection: 'EPSG:3857'
           })
         );
       })
    }
  })
  var vector = new ol.layer.Vector({
    source: vectorSource
  });

  map.addLayer(vector);
  // Event on the source to wait that WFS collection is completely loaded before zooming on extent of data
  vectorSource.on('change', e => {
    if (vectorSource.getState() === 'ready') {
      // vectorSource.getExtent() get a rectangle of extent
      // map.getView().fit take an extent an zoom on it
      map.getView().fit(vectorSource.getExtent());
    }
  })