Skip to content

Composite

TeresaRP94 edited this page Nov 25, 2022 · 7 revisions

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.

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 en Mapea 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, asi que se le puede agregar el estilo base
let composite = estilo_cluster.add(estilo_base);

// Y asignamos a la capa la composicion creada
campamentos.setStyle(composite);

Pruébalo en JSFiddle

Clone this wiki locally