Cannot get WFS features from GeoServer using OpenLayers 3

Question

I read a book about OpenLayers 3 and I guess its about an older OpenLayers version because it mentions a ol.source.ServerVector vector source for getting WFS layers from a server.

In the latest OpenLayers 3.9.0 that I use, when I search the API the only vector sources I can find are vector, cluster, tileVector and imageVector.

So my first question is, is ol.source.ServerVector deprecated? Should I use plain ol.source.Vector instead to fetch WFS features from my GeoServer service?

When I search "WFS" on the OL examples I get only one example that uses ol.source.Vector to get WFS from GeoServer.

My second question is about the settings.

I don't get what this does url: function(extent, resolution, projection) {, how the URL is implemented and what the strategy exactly does. Can somebody explain or provide links to tutorials?

Answer 1

About your first question ol.source.ServerVector is deprecated and yes you may use ol.source.Vector instead. For you second question, you may read some info about the url here here. I use the loader function instead of url so I am not familiar to explain more about the url.

Now about the startegy. This is indicating which features to load. This could be:

1. ol.loadingstrategy.bbox means will only load features exist within you current map MBR.
2. ol.loadingstrategy.all means all features will be loaded in a single request
3. ol.loadingstrategy.tile means loading features based on a tile grid.

(you may find some info for strategies here)

This is an example of a wfs layer that may give you some idea (I am using the loader function)

var vecLyr = new ol.layer.Vector({
        source: new ol.source.Vector({
          loader: function(extent, resolution, projection) {
          var urlTo = CONTEXT_ROOT + '/proxygetfeatures?targetURL='+MainApp.getGSUrl()+'/wfs?request=GetFeature' +
                encodeURIComponent('&VERSION=1.1.0&SERVICE=WFS&TYPENAME=sdo_test:LAYERNAME') +
                encodeURIComponent('&outputFormat=json')+
                encodeURIComponent('&srsname=EPSG:2100&BBOX=' + extent.join(',') + ',EPSG:2100');

            Ext.Ajax.request({
                url     : urlTo,
                method  : 'GET',  
                success: function(response) {
                    var res = Ext.decode(response.responseText);
                    var geojsonFormat = new ol.format.GeoJSON({
                    });
                    vecLyr.getSource().addFeatures(geojsonFormat.readFeatures(res,{
                       dataProjection : 'EPSG:2100',
                       featureProjection : 'EPSG:'+MainApp.Map.globalEpsgCode
                    }));

                }
            });
          },
        strategy: ol.loadingstrategy.bbox
        }),
        minResolution   : getResolutionFromScale(100,'min'),
        maxResolution   : getResolutionFromScale(30000,'max'),
        visible         : false,
        style           : Layers.Styler.ParseJsonSldToOlStyle(wfsSldDocs[0])
    })