MVT - IGN-CNIG/API-CNIG GitHub Wiki

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:

new M.layer.MVT({}, {
  minZoom: 5,
}, {
  source: new ol.source.VectorTile({
    format: new ol.format.MVT(),
    url: 'https://vt-fedme.idee.es/vt.senderosl/{z}/{x}/{y}.pbf',
    projection: 'EPSG:3857',
  }),
});

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

Ejemplo funcional

• Utilización de servicio vectorial teselado (MVT)