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.
• projection: SRC usado por la capa.
• 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'.
• 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.

• options: Estas opciones se mandarán a la implementación de la capa.
  • style: Define 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.
  • opacity. Opacidad de capa, por defecto 1.
• vendorOptions: Opciones para la biblioteca base. Ejemplo vendorOptions:

import OLSourceVector from 'ol/source/Vector';
{
 opacity: 0.1,
 source: new OLSourceVector({
   attributions: 'mvt',
   ...
 })
}

Ejemplo

Servicio teselado vectorial