MVT - Desarrollos-IDEE/API-IDEE 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 IDEE.layer.MVT({
  url: 'https://vts.larioja.org/data/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.
• isBase: 'true' si se quiere definir la capa como capa base, 'false' en caso contrario.
• 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 clic en el objeto geográfico, por defecto verdadero.
  • Las capas MVT cuentan con métodos 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

• template: Opcional Plantilla que se mostrará al consultar un objeto geográfico.
  • Las capas MVT cuentan con métodos get y set para modificar el template.

capa.template = `<div>My custom popup</div>`; // especifica la plantilla
console.log(capa.template); // 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.
  • minScale: Escala mínima.
  • maxScale: Escala máxima.
  • 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 IDEE.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',
  }),
  tileLoadFunction: <Función>,
});

const mvt = new IDEE.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 IDEE.style.Polygon({
    fill: {
      color: 'red'
    }
  })
}, {
  opacity: 0.5 // aplica opacidad a la capa
});

Ejemplo funcional

• Utilización de servicio vectorial teselado (MVT)