2.1.2. Simbolización

Las capas están formadas por objetos geográficos o elementos "features" que poseen información geométrica con la que representarlos en el mapa. La API 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:

Básicos: el usuario define las características de la simbología que quiera establecer, según el tipo de geometría de la capa (puntos, líneas o polígonos): colores de relleno, transparencias, etiquetado, etc.
Genérica: el usuario define las características de la simbología que quiera establecer, sin depender el tipo de geometría de la capa (puntos, líneas y polígonos): colores de relleno, transparencias, etiquetado, etc.
Avanzados: el usuario define las características de la simbología de forma avanzada. Permitiendo crear estilos como Coropletas, Proporcional, Categorías, Estadísticos, Mapas de Calor, Cluster, Línea de flujo y Composición.

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

Trabajar con estilos básicos

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

// Creamos un estilo, en este caso para una capa puntual 
// con relleno de color rojo, borde amarillo y radio 8
let estiloPoint = new M.style.Point({
  fill: {
    color: 'red',
    opacity: 0.7
  },
  stroke: {
    color: 'yellow',
    width: 2
  },
  radius: 8
});
// Asignamos el estilo a la capa
capaPuntual.setStyle(estiloPoint);

A los atributos se les pueden asignar valores de tres formas diferentes:

// 1: Asignándole un valor fijo
let estiloPoint = new M.style.Point({
  radius: 5,
  fill: {
    color: 'orange',
    opacity: '0.8'
  },
  stroke: {
     color: 'red',
     width: 1,
  },
  label: {
    text: 'Texto' // VALOR FIJO
  }
});

// 2: el valor de un atributo del feature
let estiloPoint = new M.style.Point({
  radius: 5,
  fill: {
    color: 'orange',
    opacity: '0.8'
  },
  stroke: {
     color: 'red',
     width: 1,
  },
  label: {
    text: '{{nombre}}' // Asignará como texto el valor del atributo nombre del objeto espacial
  }
});

// 3: mediante una funcion
let estiloPoint = new M.style.Point({
  radius: 5,
  fill: {
    color: 'orange',
    opacity: '0.8'
  },
  stroke: {
     color: 'red',
     width: 1,
  },
  label: {
    text: function(feature,map) {
      return feature.getAttribute('nombre').trim(); // Asigna el valor mediante una función que lee la propiedad nombre de un objeto espacial
    }
  }
});

El estilo puede asignarse a una capa, o directamente a uno o varios objetos geográficos "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];
let estiloFeature = new M.style.Point({
  fill: {
    color: 'black',
    opacity: 0.7
  },
  stroke: {
    color: 'red',
    width: 2
  },
  radius: 8
});

feature.setStyle(estiloFeature);

El estilo de una capa aplica a todos sus objetos geográficos "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 objetos geográficos "features", de modo que dichos objetos geográficos "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 objetos geográficos _"features"_
capaPuntual.setStyle(estiloPoint, true);

💡 Los estilos temáticos siempre propagan a los objetos geográficos "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
let colorAnterior = capaPuntual.getStyle().get("fill.color");
// Modificamos el color de relleno de la capa.
capaPuntual.getStyle().set("fill.color","blue");

Es importante tener en cuenta que, si hemos asignado un estilo a una capa sin propagación a los objetos geográficos "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 objetos geográficos "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().

Ejemplo clonando estilo:

// Estilo principal
let estilo1 = new M.style.Point({
   radius: 5, 
   fill: {  
     color: 'green',
     opacity: 0.5
   },
   stroke: {
     color: '#FF0000'
   }
});

let estilo2 = estilo1.clone(); // Clonamos el estilo
estilo2.set('radius', 10); // Cambiamos el valor de una propiedad (No afecta al estilo1)

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.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);