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 M.style.Composite, de la que heredan todas las simbologías sobre las que pueden añadirse simbologías adicionales:

M.style.Proportional
M.style.Choropleth
M.style.Category
M.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(M.Style \| Array<M.Style>): M.style.Composite	Agrega uno o varios estilos adicionales al estilo
remove(M.Style \| Array<M.Style>): M.style.Composite	Elimina uno o varios estilos que estén agregados
getStyles(): Array<M.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 = M.map({
  container: "map"
});

// Capa puntual de Campamentos
var campamentos = new M.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 M.style.Generic({
  point: {
    radius: 5,
    fill: {
      color: 'yellow',
      opacity: 0.5
    },
    stroke: {
      color: '#FF0000'
    }
  }
});

// Estilo cluster por defecto
let estilo_cluster = new M.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 = M.map({
  container: "map"
});

// Capa puntual de Campamentos
var campamentos = new M.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 M.style.Generic({
  polygon: {
  fill: {
    color: '#000000',
    opacity: 0.0
  },
  stroke: {
    color: '#000000',
    opacity: 0.0
  }
}});

let verde = new M.style.Generic({polygon: {fill: {color: 'green'}}});
let amarillo = new M.style.Generic({polygon: {fill: {color: 'pink'}}});
let rojo = new M.style.Generic({polygon: {fill: {color: 'red'}}});
let azul = new M.style.Generic({polygon: {fill: {color: 'grey'}}});
let naranja = new M.style.Generic({polygon: {fill: {color: 'orange'}}});
let marron = new M.style.Generic({polygon: {fill: {color: 'brown'}}});
let magenta = new M.style.Generic({polygon: {fill: {color: '#e814d9'}}});
let morado = new M.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 M.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 = M.map({
  container: "map"
});

// Capa puntual de Campamentos
var campamentos = new M.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 M.style.Generic({
  polygon: {
  fill: {
    color: '#000000',
    opacity: 0.0
  },
  stroke: {
    color: '#000000',
    opacity: 0.0
  }
}});

let verde = new M.style.Generic({polygon: {fill: {color: 'green'}}});
let amarillo = new M.style.Generic({polygon: {fill: {color: 'pink'}}});
let rojo = new M.style.Generic({polygon: {fill: {color: 'red'}}});
let azul = new M.style.Generic({polygon: {fill: {color: 'grey'}}});
let naranja = new M.style.Generic({polygon: {fill: {color: 'orange'}}});
let marron = new M.style.Generic({polygon: {fill: {color: 'brown'}}});
let magenta = new M.style.Generic({polygon: {fill: {color: '#e814d9'}}});
let morado = new M.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 M.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);