simbologia

Las capa vectoriales están formadas por elementos o features que poseen información geométrica con la que representarlos en el mapa. Mapea asigna un estilo de representación por defecto a estas capas, pero el usuario puede definir y asignar sus propios estilos.

Dichos estilos pueden ser:

1. Genéricos (Recomendado, requiere Mapea ≥ v6.1.0) - Para una capa con elementos de un mismo o de varios tipos de geometría - el usuario define las características de la simbología para cada tipo de geometría que quiera: colores, rellenos, transparencias, etc.

• Simbología Genérica

2. Básicos (Deprecated, requiere Mapea ≤ v6.0.0) - Para una capa donde todos los elementos tienen el mismo tipo de geometría - el usuario define las características de la simbología que quiera establecer: colores de relleno, transparencias, etiquetado, etc.

• Simbología para puntos.
• Simbología para líneas.
• Simbología para polígonos.

3. Temáticos - el usuario establece unos parámetros de configuración en base a los cuales Mapea genera la simbología automáticamente:

• Símbolos proporcionales.
• Simbología por categorías.
• Símbología por coropletas.
• Simbología estadística.
• Clusters.

La simbología temática es actualmente aplicable únicamente a capas vectoriales no tileadas. Para aplicar simbología temática a capas vectoriales tileadas, se debe definir un estilo de layer que internamente utilice funciones que generen la simbología a aplicar según las condiciones deseadas: Ejemplo

Puede obtenerse más información de cada uno de estos tipos en sus secciones correspondientes de esta wiki.

Trabajar con estilos

Independientemente de la definición y particularidad de cada tipo de estilo, el funcionamiento en general es el siguiente:

// Creamos un estilo del tipo deseado (Generico, etc).
let miEstilo = new M.style...;

// Asignamos el estilo a la capa
layer.setStyle(miEstilo);  

A los atributos se les pueden asignar valores de tres formas diferentes, como muestra el siguiente ejemplo con el atributo 'label.text':

// 1: directamente
  ...
  label: {
    text: 'etiqueta fija'
...
// 2: el valor de un atributo del feature
// mediante notacion '{{nombre_atributo}}'
  ...
  label: {
    text: '{{nombre}}'
...
// 3: mediante una funcion
// recibe como parametro el propio feature
// y en la v5.0.0+, también el objeto mapa,
// con acceso a su escala, etc.
  ...
  label: {
    text: function(feature,map) {
      if(map.getScale() > 600000){
        return feature.getAttribute('nombre').trim();
      }
    }
...

El estilo puede asignarse a una capa, o directamente a uno o varios features, con lo que solo aplicaría a esos elementos. Es decir, tanto un objeto layer como uno feature, tienen un atributo 'estilo':

let feature = capaPuntual.getFeatures()[0];
feature.setStyle(miEstilo):

El estilo de una capa aplica a todos sus features por defecto, sin que estos tengan que tener ningún estilo asociado. Pero en caso de tenerlo, un estilo a nivel de feature tiene preferencia a la hora de dibujarse respecto al de la capa.

Existe la opción de forzar la propagación del estilo de una capa a todos sus features, de modo que dichos features obtengan su propio objeto estilo, incluso aunque sean similares. Esto puede ser importante a la hora de realizar cambios posteriores en la simbología, como se explica más adelante. Para ello, al asignar el estilo a la capa, basta con establecer el parámetro 'applyToFeature' a true:

// Asignamos el estilo a la capa propagando a features
layer.setStyle(miEstilo, true);  

💡 Los estilos temáticos siempre propagan a los features, es decir, cada uno de ellos tendrá un estilo propio resultado de la aplicación del temático.

Acceder y modificar estilos ya existentes

Podemos acceder al estilo de una capa o feature, y en caso de ser un estilo temático, tener acceso a través del mismo a sus propiedades, para consultarlas, modificarlas, etc.

let estiloCapa = capa.getStyle();  
let estiloFeature = feature.getStyle();

Como norma general, siempre aplicará el último estilo que se asigne. Por lo tanto, la opción más directa para modificar la simbología de una capa o feature es establecer una nueva.

Sin embargo, es posible también cambiar directamente el atributo que se desee, de la siguiente manera:

// La capa tiene un color de relleno rojo y estilo Generic
let colorAnterior = layer.getStyle().get("point.fill.color");
// Modificamos el color de relleno de la capa.
layer.getStyle().set("point.fill.color","blue");  

Es importante tener en cuenta que, si hemos asignado un estilo a una capa sin propagación a los features, estos no tienen estilo propio, por lo que el ejemplo anterior funcionaría a nivel de capa, pero no a nivel de feature.

💡 Cuidado con las referencias. Si asignamos un mismo objeto estilo a una capa y a uno de sus features, y se cambia posteriormente un atributo del estilo en el feature, cambiará en toda la capa, ya que ambos comparten el mismo estilo. Podemos clonar estilos a través de su método .clone().

Dibujado de la leyenda

Todo estilo tiene la capacidad de generar su leyenda automáticamente en formato base64 a través de la función toImage. Si el estilo es autocontenido, obtendremos directamente la imagen, pero si el estilo incluye iconos o imágenes externas (por ejemplo urls), obtendremos el Promise correspondiente, que al finalizar podrá devolver la imagen. Esto es útil para incrustar la leyenda en un elemento img de html, en nuestra página, etc:

capa.on(M.evt.LOAD, function(){
  // Obtenemos la leyenda
  let estilo = capa.getStyle();
  let leyenda =  estilo.toImage();
  
  // La leyenda puede ser un Promise
 if(leyenda instanceof Promise){
      leyenda.then(function(response){
         console.log('Promise finalizado',response);
      });
 } else {
      console.log('Tenemos la imagen directamente',leyenda);
 }
});

Serialización de estilos vectoriales

Serializar un estilo consiste en codificar el objeto que define dicho estilo en una cadena de texto que posteriormente puede deserializarse, que es realizar el proceso inverso para obtener el objeto estilo partiendo de la cadena serializada. Esto permite compartir el estilo y almacenarlo a través de unos canales que no serían funcionales si estuviera en forma de objeto, como por ejemplo a través de una url.

let estilo = new M.style.Generic({
  polygon:{
   fill: {
     color: 'pink',
     opacity: 0.5,
   },
   stroke: {
     color: '#FF0000',
     width: 2
   }
 }
});
// Mostramos por consola el estilo serializado 
let estiloSerializado = estilo.serialize();
console.log(estiloSerializado);

// Un estilo serializado se puede asignar directamente a una capa
capa.setStyle(estiloSerializado);

// O ser deserializado
let estiloDeserializado = M.Style.deserialize(estiloSerializado);

El API REST de Mapea acepta un estilo serializado como parámetro de las capas vectoriales .