WFS Layer not shown on OpenLayers 4 map when using ol.format.WFS?

Question

I am trying to show a WFS layer using Openlayers 4. If I query the server asking for the format as json and use ol.format.GeoJSON the layer shows up correctly in the map. But querying the server with request for gml3 (and using ol.format.WFS) does not show the layer. I checked the vectorSource and it indeed has features loaded, but they are not shown.

Does anyone know why this might be?

Below is my code and a snippet of the xml response.

loadLayer: function() {
      var wfsFormat = new ol.format.WFS();
      var self = this;
      this._vectorSource = new ol.source.Vector({
        format: wfsFormat,
        url: function(extent) {
          var url = self.serviceUrl +                  '&request=GetFeature&typeName=cite:dl_3&outputFormat=gml3&srsname=EPSG:3857' +
              '&bbox=' + extent.join(',') + ',EPSG:3857';
          return url;
      },
        strategy: ol.loadingstrategy.bbox,
        projection: 'EPSG:3857',
      });

      this.inherited(arguments);
    }

This loader is in a class called WFSLayer. Bellow is the code in the main:

var wfsLayer = WFSLayer({
            serviceUrl: wfsServiceUrl,
        });
        wfsLayer.loadLayer();

        var wfsVector = new ol.layer.Vector({
            source: wfsLayer.getVectorSource(),
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0, 255, 1.0)',
                    width: 2,
                }),
            }),
        });

        var raster = new ol.layer.Tile({
            source: new ol.source.XYZ({
                attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
                'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
                url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
                'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
            }),
        });

        var map = new ol.Map({
            layers: [raster, wfsVector],
            target: document.getElementById('map'),
            view: new ol.View({
                center: [705208.0811999999, 6839435.416199997],
                zoom: 8,
                projection: 'EPSG:3857',
            }),
        });

And here is a snippet of the xml response:

<wfs:FeatureCollection xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:wfs="http://www.opengis.net/wfs" xmlns:gml="http://www.opengis.net/gml" xmlns:cite="http://www.opengeospatial.net/cite" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" numberOfFeatures="10070" timeStamp="2017-06-15T15:06:48Z" xsi:schemaLocation="http://www.opengeospatial.net/cite http://geoserver:8080/geoserver/wfs?service=WFS&version=1.1.0&request=DescribeFeatureType&typeName=cite%3Adl_3 http://www.opengis.net/wfs http://geoserver:8080/geoserver/schemas/wfs/1.1.0/wfs.xsd">
<gml:featureMembers>
<cite:dl_3 gml:id="dl_3.1">
<cite:the_geom>
<gml:MultiLineString srsName="http://www.opengis.net/gml/srs/epsg.xml#3857" srsDimension="3">
<gml:lineStringMember>
<gml:LineString>
<gml:posList>
498498.93497989 6786346.91870299 43.80370511 498497.04800763 6786352.73097019 43.68967084 498495.16103228 6786358.54324726 43.83243658 498498.89640871 6786359.76200893 43.70402609 498499.33127574 6786359.90391212 43.65502487 498501.21824812 6786354.09163816 43.72265914 498503.10521781 6786348.27936783 43.7882934 498502.63037784 6786348.12447027 43.82089473 498498.93497989 6786346.91870299 43.80370511
</gml:posList>
</gml:LineString>
</gml:lineStringMember>
</gml:MultiLineString>
</cite:the_geom>
</cite:dl_3>
<cite:dl_3 gml:id="dl_3.2">
<cite:the_geom>
<gml:MultiLineString srsName="http://www.opengis.net/gml/srs/epsg.xml#3857" srsDimension="3">
<gml:lineStringMember>
<gml:LineString>
<gml:posList>
498509.86707833 6786343.314062 43.70141855 498508.02631507 6786349.10070888 43.75378441 498506.18554938 6786354.88735662 43.69115027 498509.61544357 6786355.98400546 43.67794078 498510.10837676 6786356.14156283 43.62683941 498511.94913995 6786350.35491354 43.70037356 498513.78990048 6786344.56826831 43.7912077 498513.44929737 6786344.45934742 43.78340864 498509.86707833 6786343.314062 43.70141855
</gml:posList>
</gml:LineString>
</gml:lineStringMember>
</gml:MultiLineString>
</cite:the_geom>
</cite:dl_3>
<cite:dl_3 gml:id="dl_3.3">
<cite:the_geom>
<gml:MultiLineString srsName="http://www.opengis.net/gml/srs/epsg.xml#3857" srsDimension="3">
<gml:lineStringMember>
<gml:LineString>
<gml:posList>
498513.37376869 6786275.58223307 43.95293282 498510.96125125 6786281.14230307 43.92010051 498508.54873049 6786286.70237625 43.89516819 498511.70049349 6786288.07686893 43.8335572 498514.11293161 6786282.51679254 43.84838951 498516.5253664 6786276.95671993 43.89402182 498513.70936863 6786275.72873202 43.95213165 498513.37376869 6786275.58223307 43.95293282
</gml:posList>
</gml:LineString>
</gml:lineStringMember>
</gml:MultiLineString>
</cite:the_geom>
</cite:dl_3>
<cite:dl_3 gml:id="dl_3.4">
<cite:the_geom>
<gml:MultiLineString srsName="http://www.opengis.net/gml/srs/epsg.xml#3857" srsDimension="3">
<gml:lineStringMember>
<gml:LineString>
<gml:posList>
498547.56469744 6786240.41906434 43.91062195 498546.95224789 6786240.21669251 43.91602369 498547.4916903 6786238.48738942 43.91663392 498548.12052306 6786238.67374152 43.91073226 498547.56469744 6786240.41906434 43.91062195
</gml:posList>
</gml:LineString>
</gml:lineStringMember>
</gml:MultiLineString>
</cite:the_geom>
</cite:dl_3>
<cite:dl_3 gml:id="dl_3.20">
<cite:the_geom>
<gml:MultiLineString srsName="http://www.opengis.net/gml/srs/epsg.xml#3857" srsDimension="3">
<gml:lineStringMember>
<gml:LineString>
<gml:posList>
498835.21795003 6785163.91809574 46.00415766 498829.6138097 6785161.26036719 46.02577907
</gml:posList>
</gml:LineString>
</gml:lineStringMember>
</gml:MultiLineString>
</cite:the_geom>
</cite:dl_3>

Answer 1

I have taken WFS code supply above and used on my own OpenLayers 4.6.4/Angular5 system talking to geoserver. I had lots of problems with the code not appearing to work, because I am working in Angular and using Angular_cli I had some issues with cors issues. I had to use the Chrome web developer to see the issues. I resolved these by using a chrome Allow-Control-Allow-Origin: * Chrome Extension extension as per instructions how do add the enxtension

My code is as follows:

var vectorSource = new ol.source.Vector({
    format: new ol.format.WFS({gmlFormat: ol.format.GML2()}),
           url: function(extent) {
           var url='http://localhost:8080/geoserver/wfs?' +                          
          'version=1.1.0&request=GetFeature&typename=med_proj:ba_roads'+
           '&bbox=' + extent.join(',') + ',EPSG:3857';
           return url;

           },
    strategy: ol.loadingstrategy.bbox });

I had a lot of issues with nothing coming back from geoserver, turning the logging on to the debugging level in geoserver will list out what is going on. I keep my WFS data in postgis, part of the log tail was the sql request made, which included some very strange extents. Once I had worked resolved those problems it started to work.

You may find it helpful to play around with qgis to view the data, just in case there are any issues with it, also I found comparing the debug log from geoserver been accessed by qgis and my own program interesting.

Answer 2

Maybe the example for Point-WFS may help somebody (produced in OpenLayers5):

var vectorSource = new Vector({
  format: new GML3(),
  loader: function(extent) {
  var url = 'http://blablalbvlAn/cgi-bin/mapserv?service=WFS&version=1.1.0&request=GetFeature&typename=ms:Flurstueckepunkt&srsname=EPSG:25832&' +
  'bbox='+ extent.join(',') +',EPSG:25832';

     var xhr = new XMLHttpRequest();
     xhr.open('GET', url);
     var onError = function() {
       vectorSource.removeLoadedExtent(extent);
     }
     xhr.onerror = onError;
     xhr.onload = function() {
       if (xhr.status == 200) {
         vectorSource.addFeatures(
             vectorSource.getFormat().readFeatures(xhr.responseText));
                var features3 = vectorSource.getFeatures();
       } else {
         onError();
       }
     }
     xhr.send();
   },
   strategy: bbox
 });




    var WFSLayer =new VectorLayer(
    {   
        source: vectorSource,
        style:  new Style({
    image: new CircleStyle({
      radius: 5,
      fill: new Fill({
        color: 'orange'
      })
    })
      })
      });