Estilos múltiples de WFS con OpenLayers 3

Question

He estado atascado en esto por un tiempo. Avísame si puedes ayudar.

En la aplicación que estoy construyendo, estoy importando dos capas vectoriales WFS de GeoServer y tratando de establecer un estilo diferente para cada una de ellas. Aquí está lo que tengo hasta ahora:

// Añadiendo capa vectorial para mostrar edificios
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
            })
        })
    })
});

// Añadiendo capa vectorial para mostrar centros
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
            })
        })
    })
});

Actualmente, la aplicación muestra todos los puntos de ambas capas, pero tienen el mismo estilo (el estilo NVbuildings). He intentado mover cosas y cambiar RegularShape a Circle, pero todos los puntos siempre tienen el mismo estilo. ¿Alguna sugerencia?

Answer 1

Estoy seguro de que tienes este problema porque usas la misma función de carga al inicializar tu fuente (por eso he pedido el resto de tu código).

A continuación tienes un ejemplo funcional. Verifica la URL dentro de la función de carga de tu fuente. Aquí es donde existe callback:loadFeatures. Supongo que ahí está tu problema.

He creado un fiddle para hacer tu vida más fácil haz clic aquí

// formato utilizado para analizar las respuestas de WFS GetFeature
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';
    // utiliza jsonp: false para evitar que jQuery añada el parámetro "callback" a la 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';
    // utiliza jsonp: false para evitar que jQuery añada el parámetro "callback" a la URL
    $.ajax({url: url, dataType: 'jsonp', jsonp: false});
  },
  strategy: ol.loadingstrategy.bbox
});
/**
 * Función de callback JSONP para WFS.
 * @param {Object} response El objeto de respuesta.
 */
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
  })
});