Categorías

Una capa categorizada es una capa cuya simbología se establece asociando un estilo a cada elemento o feature en base al valor de un atributo del mismo.

categoria

Por tanto, para definir ese tipo de simbología, es necesario especificar al menos el Atributo del feature por el cual se va a realizar la categorización. Y de manera opcional, la relación de Valores/Estilos para la representación de los diferentes valores del atributo.

Así, para categorizar por ejemplo una capa poligonal de municipios de Andalucía, de modo que a cada elemento se le diera un color en función de la provincia a la que pertenece, que viene indicado en uno de sus atributos:

// Definimos los estilos de cada categoría. Como queremos diferenciar entre
// provincias, crearemos un color para cada una
let verde = new IDEE.style.Generic({polygon: {fill: {color: 'green'}}});
let amarillo = new IDEE.style.Generic({polygon: {fill: {color: 'pink'}}});
let rojo = new IDEE.style.Generic({polygon: {fill: {color: 'red'}}});
let azul = new IDEE.style.Generic({polygon: {fill: {color: 'grey'}}});
let naranja = new IDEE.style.Generic({polygon: {fill: {color: 'orange'}}});
let marron = new IDEE.style.Generic({polygon: {fill: {color: 'brown'}}});
let magenta = new IDEE.style.Generic({polygon: {fill: {color: '#e814d9'}}});
let morado = new IDEE.style.Generic({polygon: {fill: {color: '#b213dd'}}});

// Creamos la simbología. El atributo "provincia" contiene el nombre
// de la provincia a la que pertenece cada feature
let categoryStyle = new IDEE.style.Category("provincia", {
  "Almería": marron,
  "Cádiz": amarillo,
  "Córdoba": magenta,
  "Granada": verde,
  "Jaén": naranja,
  "Málaga": azul,
  "Sevilla": rojo,
  "Huelva": morado
});

layerMunicipios.setStyle(categoryStyle);

Donde IDEE.style.Category recibe:

Parámetro	Descripción
attributeName	{string} - atributo que contiene el campo por el que categorizar
categoryStyles	{object} - opcional - con las relaciones valor-estilo. Si no se especifica, se generarán estilos aleatorios para cada valor del atributo.

💡 Los estilos deben corresponder al tipo de geometría de la capa.

No es necesario especificar un estilo para todos los diferentes valores que pueda adoptar el atributo 'attributeName':

Si el valor del atributo de un feature no aparece en la lista de categoryStyles, ese feature se pintará con la simbología por defecto que tenga la capa.
El valor "other" en la lista de categoryStyles recogerá a todos los features cuyo atributo 'attributeName' tenga un valor que no se corresponda con ningún otro de la lista.

¿Y si quiero aplicar un estilo diferente y aleatorio a cada feature en función de un atributo, sin importarme qué estilo?

Especifica únicamente el 'attributeName' en el constructor del estilo, sin indicar ningún parámetro 'categoryStyles'.

let categoryStyle = new IDEE.style.Category("provincia");
layerMunicipios.setStyle(categoryStyle);

Acceso y modificación de las propiedades del estilo

Se puede acceder a las propiedades de un estilo Category ya existente, y modificar aquellos aspectos de la misma que se desee:

// La capa ya tiene el estilo asignado
let estiloCategory = capa.getStyle();

// Obtenemos las categorías existentes, y el atributo de categorización
// Podrían modificarse con los métodos 'set' equivalentes
let categorías = estiloCategory.getCategories();
let atributo = estiloCategory.getAttributeName();

// Cambiamos únicamente el estilo asociado a la categoría de "Sevilla"
estiloCategory.setStyleForCategory("Sevilla",amarillo);

vendorOptions

Permite cargar estilos de la librería base.

new IDEE.style.Generic(
    undefined,
    new ol.style.Style({
        fill: new ol.style.Fill({
            color: '#F5470088'
        }),
        stroke: new ol.style.Stroke({
            color: '#0000ff',
            width: 5,
            lineDash: [5, 5, 20],
            lineDashOffset: 5,
            lineCap: 'butt'
        }),
        image: new ol.style.Circle({
            radius: 15,
            fill: new ol.style.Fill({
                color: '#F5470088',
                width: 20
            }),
            stroke: new ol.style.Stroke({
                color: '#0000ff88',
                width: 5,
                lineDash: [5, 5, 20],
                lineDashOffset: 5,
                lineCap: 'butt'
            })
        })
    })
);