MVT

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:

// Creamos capa MVT
const mvt = new M.layer.MVT({
  url: 'https://vts.larioja.org/rioja/{z}/{x}/{y}.pbf',
  name: 'Capa MVT',
  projection: 'EPSG:3857',
});
// La añadimos al mapa
mapajs.addLayers(mvt);

// También podemos añadir una capa MVT como cadena
mapajs.addLayers('MVT*https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf*vectortile');

Donde:

url: url del servicio que devuelve los tiles vectoriales.
name: nombre de la capa, debe ser único en el mapa.
legend: indica el nombre que queremos que aparezca en el árbol de contenidos, si lo hay.
layers: indica el nombre de las capas del servicio. Suelen estar definidas por el atributo "layer" del objeto geográfico del servicio
projection: SRC usado por la capa.
maxExtent: Restringe la visibilidad de la capa a una extensión.
opacity: opacidad de la capa (0-1), por defecto 1.
visibility: 'true' si la capa es visible, 'false' si queremos que no lo sea. En este caso la capa sería detectado por los plugins de tablas de contenidos y aparecería como no visible.
mode: Modo de renderizado de la capa. Valores posibles: 'render' | 'feature'.
infoEventType: Opcional Parametriza el método de activación del popup para obtener la información de una feature ('click' / 'hover'), por defecto 'click'.
extract: opcional Activa la consulta por click en el feature, por defecto false.
- Si se desea personalizar un manejador propio para mostrar un popup o label al hacer click en alguno de los features, hay que establecer el atributo extract a true, para que no sólo se active nuestro manejador.
- Las capas MVT cuenta con métedos GET y SET para modificar el extract.

capa.extract = true; // activa consulta
capa.extract = false; // desactiva consulta
console.log(capa.extract); // muestra el estado de la propiedad

attribution: Atribución de la capa.
- name. Nombre de la atribución
- description. Descripción de la atribución.
- url. URL de la atribución.
- contentAttributions. Atribuciones por objetos geográficos, por defecto vacío.
- contentType. Tipo de url de “contentAttributions” (KML o GeoJSON).
options: Estas opciones se mandarán a la implementación de la capa.
- style: Define el estilo de la capa.
- predefinedStyles: Estilos predefinidos para la capa, aparecen en el selectir de capas "LayerSwitcher" para cambiar el estilo de la capa.
- minZoom. Zoom mínimo aplicable a la capa.
- maxZoom. Zoom máximo aplicable a la capa.
- visibility. Define si la capa es visible o no. Verdadero por defecto.
- displayInLayerSwitcher. Indica si la capa se muestra en el selector de capas.
vendorOptions: Opciones para la biblioteca base (el código se envía directamente a la librería base para ejecutar la funcionalidad). Ejemplo vendorOptions:

{
 opacity: 0.1,
}

Ejemplo completo de creación de capa MVT:

const mvt = new M.layer.MVT({
  url: 'https://vts.larioja.org/rioja/{z}/{x}/{y}.pbf',
  name: 'Capa MVT',
  projection: 'EPSG:3857',
}, {
  minZoom: 5, // zoom mínimo aplicable a la capa.
  // aplica un estilo a la capa
  style: new M.style.Polygon({
    fill: {
      color: 'red'
    }
  })
}, {
  opacity: 0.5 // aplica opacidad a la capa
});