MBTiles

MBTiles es una especificación para almacenar de forma muy optimizada conjuntos de imágenes (tilesets) usando una estructura de base de datos SQLite. Es decir, agrupa conjuntos de píxeles clasificados por sus coordenadas X Y Z utilizando para un zoom determinado únicamente aquellas imágenes correspondientes a las coordenadas dadas.

Algunos ejemplos de ficheros mbtiles se pueden encontrar aqui.

Para visualizar capas MBTiles, se pueden:

1.- Añadir en el constructor del mapa, tanto en modo cadena como objeto:

const mapa = M.map({
  container: "map",
  center: { x: -965497.2717184591, y: 4166095.580546307 },
  zoom: 5,
  controls: ['backgroundlayers'],
  layers: ["tipoCapa*nombreLeyenda*urlServicio*nombreCapa*Transparente*Visible*opacidad*maxZoomLevel*maxExtent*tileSize"] // Parametrización capas mbtiles**
});

**Parametrización capa mbtiles

2.- O añadiéndolas con el método correspondiente (addLayers/addMBTiles). Ejemplo:

// Crear una capa MBTiles a partir de una url
const mbtile = new M.layer.MBTiles({
  name: 'mbtiles',
  legend: 'CapaMbtiles',
  url: './sierra_nieves.mbtiles',
});
mapa.addLayers(mbtile);

Donde:

• name: nombre de la capa.

• url: URL del fichero o servicio que genera la capa.

• type: tipo de capa.

• maxZoomLevel: zoom máximo aplicable para el cálculo de resoluciones.

• transparent: 'false' si es una capa base, 'true' en caso contrario. Parámetro obsoleto, se recomienda usar el parámetro isBase

• isBase: 'true' si se quiere definir la capa como capa base, 'false' en caso contrario.

• maxExtent: restringe la visualización a una región específica.

• legend: indica el nombre que queremos que aparezca en el árbol de contenidos, si lo hay.

• tileLoadFunction: función de carga de la tesela.

• source: fuente de la capa.

• tileSize: tamaño de la tesela.

• visibility: indica si la capa es visible o no.

• opacity: opacidad de la capa.

• 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.

  • displayInLayerSwitcher: indica si la capa se muestra en el selector de capas.
  • minZoom: Zoom mínimo aplicable a la capa.
  • maxZoom: Zoom máximo aplicable a la capa.
  • crossOrigin: Atributo crossOrigin para las imágenes cargadas.

• vendorOptions: Opciones para la biblioteca base (el código se envía directamente a la librería base para ejecutar la funcionalidad). Ejemplo vendorOptions:

const loadFunction = (z, x, y) => {
  return new Promise((resolve) => {
    if (z > 4) {
      resolve('https://cdn.icon-icons.com/icons2/4222/PNG/512/albert_einstein_avatar_icon_263209.png');
    } else {
      resolve('https://cdn-icons-png.flaticon.com/512/4616/4616039.png');
    }
  });
}

const loadTile = (tile) => {
  const imgTile = tile;
  const tileCoord = tile.getTileCoord();
  loadFunction(tileCoord[0], tileCoord[1], -tileCoord[2] - 1).then((tileSrc) => {
    if (tileSrc) {
      imgTile.getImage().src = tileSrc;
    }
  });
}

new M.layer.MBTiles({}, {
  crossOrigin: true,
}, {
  source: new ol.source.XYZ({
    url: '{z},{x},{y}',
    projection: ol.proj.get('EPSG:3857'),
    crossOrigin: 'anonymus',
    tileLoadFunction: (tile) => loadTile(tile),
    tileGrid: new ol.tilegrid.TileGrid({
      extent: [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244],
      origin: [-20037508.342789244, -20037508.342789244],
      resolutions: [156543.03392804097, 78271.51696402048, 39135.75848201024, 19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564, 1222.99245256282, 611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813, 19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879, 0.5971642834779395, 0.29858214173896974, 0.14929107086948487, 0.07464553543474244, 0.03732276771737122, 0.01866138385868561, 0.009330691929342804, 0.004665345964671402, 0.002332672982335701, 0.0011663364911678506, 0.0005831682455839253],
    }),
  }),
});

Ejemplo completo de creación de capa MBTiles:

const mbtile = new M.layer.MBTiles({
  name: 'mbtiles',
  legend: 'Capa',
  url: './sierra_nieves.mbtiles',
  maxExtent:[-490127.1339197371,4854792.602063361,-483825.8564004779,4859230.727018169]
},{
  displayInLayerSwitcher: false // no muestra la capa en el TOC
},{
  opacity: 0.5 // aplica opacidad a la capa
});

Ejemplo de uso del parámetro tileLoadFunction:

Este ejemplo hace uso de una función personalizada para la carga de los tiles recibiendo las coordenadas x,y,z y devolviendo una promesa con la imagen en base64 o la URL de dicha imagen para esas coordenadas.

const mbtile = new M.layer.MBTiles({
  name: 'mbtilesLoadFunction',
  legend: 'Capa personalizada MBTiles',
  tileLoadFunction: (z, x, y) => {
    return new Promise((resolve) => {
      if (z > 4) {
        resolve('https://cdn-icons-png.flaticon.com/512/4616/4616040.png');
      } else {
        resolve('https://cdn.icon-icons.com/icons2/2444/PNG/512/location_map_pin_direction_icon_148665.png');
      }
    });
  },
});
mapa.addLayers(mbtile);