MVT

ℹ️ Requiere v6.0.0+ de Mapea ℹ️

Las capas de tipo Vector Tile ofrecen determinadas ventajas en algunos escenarios, por su bajo peso y rápida carga, ya que se sirven en forma de teselas que contienen la información vectorial de la zona que delimitan.

Para visualizar una capa MVT servida en formato pbf:

// Capa MVT
let mvt = new M.layer.MVT({
  url: 'https://{$URL_SERVICIO}@pbf/{z}/{x}/{-y}.pbf',
  name: 'Capa MVT',
  projection: 'EPSG:3857',
});

mapajs.addLayers(mvt);

Donde:

• url: url del servicio que devuelve los tiles vectoriales.
• name: nombre de la capa, debe ser único en el mapa.
• projection: SRS usado por la capa.
• v6.3.0+ transparent: (opcional) booleano, true si capa base, false si no.

El estilo de las capas MVT puede modificarse como el de cualquier capa vectorial para aplicar simbología genérica:

// Polígono verde
let estilo = new M.style.Generic({
   polygon: {
      fill: {
        color: 'green'
      }
   }
});

mvt.setStyle(estilo);

Sin embargo, por su estructura interna en la que los features pueden estar fraccionados y formar parte de diferentes teselas, cargados o no en el mapa, este tipo de capas no soporta simbología temática. Aún así, mediante el uso de funciones, es posible definir una simbología basada en los atributos de los features:

// Array que contiene los colores a aplicar
let relleno = [];
relleno.Huelva = '#e0bafc';
relleno.Sevilla = '#ff3333';
...

// La capa mvt contiene las provincias, con sus nombres en el atributo "provincia"
mvt.setStyle(new M.style.Generic({
   polygon: {
     fill: {
       color: function(feature,map) {
         // Definimos una simbologia en funcion del valor de un atributo
         return relleno[feature.getAttribute('provincia')];
       },
       opacity: 0.7
     },
     stroke: {
       color: '#000',
       width: 0.5
     }
   }
}));