MBTilesVector - Desarrollos-IDEE/API-IDEE GitHub Wiki

MBTilesVector es una especificación para almacenar de forma optimizada datos en forma de puntos líneas y polígonos usando una estructura de base de datos SQLite. Es decir, agrupa estos datos clasificándolos por sus coordenadas X Y Z y utilizando para un zoom determinado únicamente los correspondientes a las coordenadas dadas.

Para visualizar capas MBTilesVector, se pueden:

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

const mapa = IDEE.map({
  container: "map",
  center: { x: -965497.2717184591, y: 4166095.580546307 },
  zoom: 5,
  controls: ['backgroundlayers'],
  layers: ["MBTilesVector*Capa*url*Capa*true**eyJwYXJhbWV0ZXJzIjpbeyJyYWRpdXMiOjUsImZpbGwiOnsiY29sb3IiOiJvcmFuZ2UiLCJvcGFjaXR5IjoiMC44In0sInN0cm9rZSI6eyJjb2xvciI6InJlZCIsIndpZHRoIjoxfX1dLCJkZXNlcmlhbGl6ZWRNZXRob2QiOiIoKHNlcmlhbGl6ZWRQYXJhbWV0ZXJzKSA9PiBNLnN0eWxlLlNpbXBsZS5kZXNlcmlhbGl6ZShzZXJpYWxpemVkUGFyYW1ldGVycywgJ00uc3R5bGUuUG9pbnQnKSkifQ=="]
});

Siendo el formato de la cadena:

MBTilesVector*legend*url*name*visibility*tileSize*style

2.- O añadiéndolas con el método correspondiente (addLayers o addMBTilesVector):

/* 
  Crear una capa MBTilesVector cambiando el estilo de los puntos
  por el especificado en el parámetro style.
*/
const mbtilevector = new IDEE.layer.MBTilesVector(
  {
    name: 'mbtilesvector',
    legend: 'Capa',
    url: '<url de la capa>',
  },
  {
    style: {
      point: {
        fill: {
          color: '#fff',
          opacity: 0.6,
        },
        stroke: {
          color: '#827ec5',
          width: 2,
        },
        radius: 5,
      }
    }
  }
);
mapa.addLayers(mbtilevector);

Donde:

name: nombre de la capa.
url: URL del servicio que genera la capa.
type: tipo de la capa.
maxExtent: restringe la visualización a una región específica.
legend: nombre que aparece en el árbol de contenidos.
isBase: 'true' si se quiere definir la capa como capa base, 'false' en caso contrario.
tileLoadFunction: función de carga de la tesela vectorial.
source: fuente de la capa.
tileSize: tamaño de la tesela.
visibility: indica si la capa es visible o no.
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 MBTilesVector 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 MBTilesVector 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.
- opacity: opacidad de la capa.
- style: estilo de la capa.
- predefinedStyles: Estilos predefinidos para la capa, aparecen en el selector de capas "LayerSwitcher" para cambiar el estilo 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.
- minScale: Escala mínima.
- maxScale: Escala máxima.
vendorOptions: Opciones para la biblioteca base (el código se envía directamente a la librería base para ejecutar la funcionalidad). Ejemplo vendorOptions:

tileLoadFunction = (z, x, y) => {
  return new Promise((resolve) => {
    fetch(`https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/${z}/${x}/${y}.pbf`).then((response) => {
      resolve(response.arrayBuffer());
    });
  });
}

loadVectorTile = (tile, formatter) =>  {
  tile.setState(1); // ol/TileState#LOADING
  tile.setLoader((extent, resolution, projection) => {
    const tileCoord = tile.getTileCoord();
    // eslint-disable-next-line
    tileLoadFunction(tileCoord[0], tileCoord[1], -tileCoord[2] - 1).then((_vectorTile) => {
      if (_vectorTile) {
        try {
          const vectorTile = new Uint8Array(_vectorTile);
          const features = formatter.readFeatures(vectorTile, {
            extent,
            featureProjection: projection,
          });
          tile.setFeatures(features);
          tile.setState(2); // ol/TileState#LOADED
        } catch (e) {
          tile.setState(3); // ol/TileState#ERROR
        }
      } else {
        tile.setState(3); // ol/TileState#ERROR
      }
    });
  });
}

new IDEE.layer.MBTilesVector({}, {
  minZoom: 5,
}, {
  source: new ol.source.VectorTile({
    projection: 'EPSG:3857',
    url: '{z},{x},{y}',
    tileLoadFunction: (tile) => loadVectorTile(tile, new ol.format.MVT()),
    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 MBTilesVector:

const mbtilevector = new IDEE.layer.MBTilesVector(
  {
    name: 'mbtilesvector',
    legend: 'Capa',
    url: '<url de la capa>',
    maxExtent:[-541472.2966587595,4905925.103840003,-248565.6042699641,5072252.0773885455]
  },
  { 
    displayInLayerSwitcher: false, // no muestra la capa en el TOC
  // aplica un estilo a la capa    
    style: {
      point: {
        fill: {
          color: '#fff',
          opacity: 0.6,
        },
        stroke: {
          color: '#827ec5',
          width: 2,
        },
        radius: 5,
      }
    }
  },
  {
    opacity: 0.5 // aplica opacidad a la capa
  }
);
mapa.addLayers(mbtilevector);

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 el dato .pbf para esas coordenadas.

const mbtileVector = new IDEE.layer.MBTilesVector({
  name: 'mbtilesvector',
  legend: 'Capa personalizada MBTilesVector',
  tileLoadFunction: (z, x, y) => {
    return new Promise((resolve) => {
      fetch(`https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/${z}/${x}/${y}.pbf`).then((response) => {
        resolve(response.arrayBuffer());
      });
    });
  },
});
mapa.addLayers(mbtileVector);

Ejemplos:

Utilización de mbtiles vector

MBTilesVector - Desarrollos-IDEE/API-IDEE GitHub Wiki

Ejemplo completo de creación de capa MBTilesVector:

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️