[GIS] Cannot get WFS features from GeoServer using OpenLayers 3

openlayersopenlayers-2vectorvector-layer

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?

Best Answer

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])
    })
Related Question