OpenLayers 3 - display layer WFS in EPSG:4326

Question

I have to display a layer from a WFS service (http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/wfs/Bacini_idrografici.map) using OpenLayers 3.x API (..there's a reason). The WFS service is exposed in EPSG:4326.

In similar cases I have always used the following code successfully:

var sourceWFS = new ol.source.Vector({
    loader: function (extent) {
        $.ajax('http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/wfs/Bacini_idrografici.map', {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typename: 'ID.ACQUEFISICHE.BACINIIDROGRAFICI.PRINCIPALI',
                srsname: 'EPSG:4326',
                bbox: extent.join(',') + ',EPSG:4326'
            }
        }).done(loadFeatures)
        .fail(function () {
        alert("error loading vector layer");
        });
    },
    strategy: ol.loadingstrategy.bbox,
});

function loadFeatures(response) {
var formatWFS = new ol.format.WFS();
  sourceWFS.addFeatures(formatWFS.readFeatures(response));
}

var vectorLayerWFS = new ol.layer.Vector({
  source: sourceWFS,
});

But now, this layer WFS isn't displayed on the map and I do not understand why?

What's wrong?

Answer 1

I presume your view is in a diferent projection because your code works when the view is in EPSG:4326. When the view projection differs from the WFS you will need to transform the bbox extent for the WFS request from view projection to EPSG:4326, then transform the features from EPSG:4326 to view projection when reading them.

var sourceWFS = new ol.source.Vector({
    loader: function (extent, resolution, projection) {
        var extent4326 = ol.proj.transformExtent(extent, projection, 'EPSG:4326');
        var extent4326x = [extent4326[1], extent4326[0], extent4326[3], extent4326[2]];
        $.ajax('http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/wfs/Bacini_idrografici.map', {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typename: 'ID.ACQUEFISICHE.BACINIIDROGRAFICI.PRINCIPALI',
                srsname: 'EPSG:4326',
                bbox: extent4326x.join(',') + ',EPSG:4326'
            }
        }).done(loadFeatures)
        .fail(function () {
        alert("error loading vector layer");
        });
        function loadFeatures(response) {
            var formatWFS = new ol.format.WFS();
            sourceWFS.addFeatures(formatWFS.readFeatures(response, {
                dataProjection: 'EPSG:4326',
                featureProjection: projection
            }));
        }
    },
    strategy: ol.loadingstrategy.bbox,
});

var vectorLayerWFS = new ol.layer.Vector({
  source: sourceWFS,
});