Load Open layers 3 jsonp vector layer with bounding box strategy?

Question

I have problem with loading features from geoserver to a vector layer using OpenLayers3 and bounding box strategy. I tried to find how I can load more than one layer using bounding box strategy, but without success. The only example which I found is with one layer and using global functions, which in my case is not applicable ( http://acanimal.github.io/thebookofopenlayers3/chapter03_08_loading_strategies.html ). The problem is that the function, which is loading the response, is not defined globally - if so I'll have to create such function for every single layer, which I want to load, right? This is an example url address for requesting features:

http://192.168.1.10/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=ubutrusty:places&outputFormat=text/javascript&format_options=callback:success&srsname=EPSG:32635&bbox=161473.81383919955,4698323.564696768,234672.52335922938,4767981.6354873795,EPSG:32635 

You can see that format_options parameter is set to callback:success and I'm sure this is the problem, but I'm struggling with setting the correct callback function. My knowledge in javascript is not so good, so the question is not an easy one for me.

This is how I'm trying to create a new vector layer:

var layer = {
    name: 'ubutrusty:places',
    title: 'Позиции',
    source: createVectorLayer(layer),
    type: 'operational',
    visible: true,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#800000',
            width: 2
        })
    })
}

This function is called for every layer I want to add to the map - it returns ol.source.ServerVector object:

MyApp.prototype.createVectorLayer = function(layerData){
    var vectorSource = new ol.source.ServerVector({
        format: new ol.format.GeoJSON(),
        loader: function(extent, resolution, projection) {
            extent = ol.proj.transformExtent(extent, projection.getCode(), ol.proj.get(layerData.srcEPSG).getCode());
            var url = config.proxyUrl + layerData.url + '?service=WFS&' +
                'version=1.1.0&request=GetFeature&typename=' + layerData.name + '&' + 'outputFormat=text/javascript' +
                '&format_options=callback:success&srsname=' + layerData.srcEPSG + '&bbox=' + extent.join(',') + ',' + layerData.srcEPSG;
            $.ajax({
                url: url,
                dataType: 'jsonp',
                success: function(data) {
                    this.addFeatures(this.readFeatures(data));
                },
                error: function (e) {
                    var wtf = e.status;
                }
            });
        },
        strategy: ol.loadingstrategy.bbox,
        projection: layerData.srcEPSG
    })

    return vectorSource;
}

MyApp.map.addLayer(new ol.layer.Vector(layer);

The question is, is it possible to define one function for loading features from more than one layer and if yes, how I can do this? If I don't specify the callback function, then the default one is used (for geoserver it is parseResponse ) which is also not defined. If more information is needed I can give additional parameters or code examples.

Thanks

Answer 1

In your URL, you already define the name of the callback function. It is success , and is defined by '&format_options=callback:success&srsname=' . If you want to use your createVectorLayer function for multiple layers, you will want to change that to '&format_options=callback:success.' + layerData.name.replace(':', '_') + '&srsName=' '&format_options=callback:success.' + layerData.name.replace(':', '_') + '&srsName=' . Then you can create a registry of functions in the global object literal success , which you define once:

window.success = {};

You can then add the following code to your createVectorLayer function, which will create a callback function for each of your layers:

success[layerData.name.replace(':', '_')] = function(response) {
  vectorSource.addFeatures(vectorSource.readFeatures(response));
};