Composición

Es posible que una misma capa acepte más de un tipo de simbología a la vez. En esos casos hablamos de composiciones simbológicas, y algunos ejemplos de dichas composiciones podrían ser:

Una capa puntual con simbología básica definida para ella, que además está clusterizada.
Una capa categorizada por un atributo, con simbología proporcional en base a otro.
Una capa con simbología estadística de tartas, a la que se le aplica simbología proporcional para darle a cada tarta un tamaño diferente en base a un atributo del elemento.

composite

Sin embargo, no todas las combinaciones de estilos son posibles. Así por ejemplo, no tendría sentido aplicar en una misma capa una simbología por Coropleta y otra por Categorización, ya que ambas se pisarían.

Estas composiciones simbológicas están modeladas bajo la clase IDEE.style.Composite, de la que heredan todas las simbologías sobre las que pueden añadirse simbologías adicionales:

IDEE.style.Proportional
IDEE.style.Choropleth
IDEE.style.Category
IDEE.style.Cluster

Dicha clase posee métodos específicos, heredados por tanto para los estilos anteriores, para la gestión de estilos adicionales:

Método	Descripción
add(IDEE.Style \| Array<IDEE.Style>): IDEE.style.Composite	Agrega uno o varios estilos adicionales al estilo
remove(IDEE.Style \| Array<IDEE.Style>): IDEE.style.Composite	Elimina uno o varios estilos que estén agregados
getStyles(): Array<IDEE.Style>	Devuelve los estilos agregados a un estilo de tipo Composite

Veamos a continuación la implementación de uno de los ejemplos planteados inicialmente:

let map = IDEE.map({
  container: "map"
});

// Capa puntual de Campamentos
var campamentos = new IDEE.layer.WFS({
url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/sepim/ows?",
name: "campamentos",
legend: "Campamentos",
geometry: 'MPOINT'
});

map.addLayers(campamentos);

// Estilo genérico: puntos amarillos con borde rojo
let estilo_base = new IDEE.style.Generic({
  point: {
    radius: 5,
    fill: {
      color: 'yellow',
      opacity: 0.5
    },
    stroke: {
      color: '#FF0000'
    }
  }
});

// Estilo cluster por defecto
let estilo_cluster = new IDEE.style.Cluster();

// Cluster permite Composite, así que se le puede agregar el estilo base
let composite = estilo_cluster.add(estilo_base);

// Y asignamos a la capa la composición creada
campamentos.setStyle(composite);

Otro ejemplo, en el caso de querer usar un estilo categórico con otro base que se aplique a los valores no indicados en la definición de las categorías a representar:

let map = IDEE.map({
  container: "map"
});

// Capa puntual de Campamentos
var campamentos = new IDEE.layer.WFS({
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?",
  namespace: "tematicos",
  name: "ind_mun_simp",
  legend: "Municipios SIM",
  geometry: 'MPOLYGON'
});

map.addLayers(campamentos);

// Estilo basico: puntos amarillos con borde rojo
let estilo_base = new IDEE.style.Generic({
  polygon: {
  fill: {
    color: '#000000',
    opacity: 0.0
  },
  stroke: {
    color: '#000000',
    opacity: 0.0
  }
}});

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,  -> No queremos representar Málaga en el categórico
  // "Sevilla": rojo, -> No queremos representar Sevilla en el categórico
});

// Se asocia primero el estilo transparente al categórico, lo que hará de estilo por defecto para los no seleccionados
categoryStyle.add(estilo_base);

campamentos.setStyle(categoryStyle);

Otra manera de aplicar varios estilos que permita la composición es añadir en el orden que se quieran, los estilos a la capa directamente, por ejemplo:

let map = IDEE.map({
  container: "map"
});

// Capa puntual de Campamentos
var campamentos = new IDEE.layer.WFS({
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?",
  namespace: "tematicos",
  name: "ind_mun_simp",
  legend: "Municipios SIM",
  geometry: 'MPOLYGON'
});

map.addLayers(campamentos);

// Estilo basico: puntos amarillos con borde rojo
let estilo_base = new IDEE.style.Generic({
  polygon: {
  fill: {
    color: '#000000',
    opacity: 0.0
  },
  stroke: {
    color: '#000000',
    opacity: 0.0
  }
}});

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,  -> No queremos representar Málaga en el categórico
  // "Sevilla": rojo, -> No queremos representar Sevilla en el categórico
});

// Se asocia primero el estilo transparente a la capa
campamentos.setStyle(estilo_base);


// Se asocia posteriormente el categórico
campamentos.setStyle(categoryStyle);