Styling multiple WFS with OpenLayers 3

Question

Been stuck on this one a while. Let me know if you can help.

In the application I am building, I am importing two GeoServer WFS vector layers and trying to set a different style to each of them. Here is what I have right now:

//Adding vector layer for show centers
var NVbuildings = new ol.layer.Vector({
    source: buildingSource,
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({color: '#FFFFFF'}),
            stroke: new ol.style.Stroke({
                color: '#000000',
                width: 3
            })
        })
    })
});

//Adding vector layer for show centers
var centerlocations = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        image: new ol.style.RegularShape({
            points: 5,
            radius1: 10,
            radius2: 4,
            angle: 0,
            fill: new ol.style.Fill({color: '#000000'}),
            stroke: new ol.style.Stroke({
                color: '#000000',
                width: 3
            })
        })
    })
});

Currently, the application shows all points from both vectors, but they are both of the same style (the NVbuildings style). I've tried moving things around and changing the RegularShape to Circle, but all points always have the same style. Any suggestions?

Answer 1

I am sure you have this problem cause you use the same loader function when initialising your source (this is why I have asked for the rest of your code).

following is a working example. Check the url within loader function of your source. This is where callback:loadFeatures exist. I asume there is your problem.

I have made a fiddle to make your life easier click here

// format used to parse WFS GetFeature responses
var geojsonFormat1 = new ol.format.GeoJSON();
var geojsonFormat2 = new ol.format.GeoJSON();

var vectorSource1 = new ol.source.Vector({
  loader: function(extent, resolution, projection) {
    var url = 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' +
        'version=1.1.0&request=GetFeature&typename=osm:placenames_large&' +
        'outputFormat=text/javascript&format_options=callback:loadFeatures1' +
        '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
    // use jsonp: false to prevent jQuery from adding the "callback"
    // parameter to the URL
    $.ajax({
        url: url, 
        dataType: 'jsonp', 
        jsonp: false});
  },
  strategy: ol.loadingstrategy.bbox
});


var vectorSource2 = new ol.source.Vector({
  loader: function(extent, resolution, projection) {
    var url = 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' +
        'version=1.1.0&request=GetFeature&typename=osm:placenames_small&' +
        'outputFormat=text/javascript&format_options=callback:loadFeatures2' +
        '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
    // use jsonp: false to prevent jQuery from adding the "callback"
    // parameter to the URL
    $.ajax({url: url, dataType: 'jsonp', jsonp: false});
  },
  strategy: ol.loadingstrategy.bbox
});
/**
 * JSONP WFS callback function.
 * @param {Object} response The response object.
 */
window.loadFeatures1 = function(response) {
  vectorSource1.addFeatures(geojsonFormat1.readFeatures(response));
};
window.loadFeatures2 = function(response) {
  vectorSource2.addFeatures(geojsonFormat2.readFeatures(response));
};

var vector1 = new ol.layer.Vector({
  source: vectorSource1,
  style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({color: '#FFFFFF'}),
            stroke: new ol.style.Stroke({
                color: '#000000',
                width: 3
            })
        })
    })
});

var vector2 = new ol.layer.Vector({
  source: vectorSource2,
  style: new ol.style.Style({
        image: new ol.style.RegularShape({
            points: 5,
            radius1: 6,
            radius2: 4,
            angle: 0,
            fill: new ol.style.Fill({color: '#000000'}),
            stroke: new ol.style.Stroke({
                color: '#000000',
                width: 3
            })
        })
    })
});


var raster = new ol.layer.Tile({
  source: new ol.source.BingMaps({
    imagerySet: 'Aerial',
    key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
  })
});

var map = new ol.Map({
  layers: [raster,vector1,vector2],
  target: document.getElementById('map'),
  view: new ol.View({
    center: [-8908887.277395891, 5381918.072437216],
    maxZoom: 19,
    zoom: 2
  })
});