3

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?

  • This is not normal. How do you pass the layers to the map? Give us some more of your code to find out the problem. Or better make a fiddle to show your case. The code you provide should work correct but this is just the tree out of the forest. – pavlos Oct 21 '15 at 9:18
3

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
  })
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.