Skip to content
Álvaro Ramírez edited this page Mar 14, 2024 · 20 revisions

Las capas XYZ son servicios de información geográfica en forma de tiles. Cada tile representa una combinación de tres parámetros. Las capas XYZ presentan la siguiente estructura

https://www.ign.es/web/catalogo-cartoteca/resources/webmaps/data/cresques/{z}/{x}/{y}.jpg

En donde:

  • {z} especifica el nivel de zoom.
  • {x} el número de columna.
  • {y} el número de fila.

Se pueden construir de varias maneras:

1.- Añadiéndolas en el constructor del mapa. Modo cadena:

const mapa = M.map({
  container: 'map',
  getfeatureinfo: 'plain',
  projection: 'EPSG:3857*m',
  layers: ["XYZ*AtlasDeCresques*https://www.ign.es/web/catalogo-cartoteca/resources/webmaps/data/cresques/{z}/{x}/{y}.jpg*true*true"],
  zoom: 7,
  center: [-491123.5838198825, 4868765.072772329],
});

2.- Con el método correspondiente (addXYZ/addLayers). Modo objeto:

const xyz = new M.layer.XYZ({
  url: 'https://www.ign.es/web/catalogo-cartoteca/resources/webmaps/data/cresques/{z}/{x}/{y}.jpg',
  name: 'AtlasDeCresques',
  projection: 'EPSG:3857',
  visibility: true,
});
mapa.addXYZ(xyz);

Donde:

  • url: URL del servicio XYZ.

  • name: Identificador de la capa.

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

  • transparent: 'false' si es una capa base, 'true' en caso contrario.

  • isBase: 'true' si es una capa base, 'false' en caso contrario.

  • maxExtent: Restringe la visibilidad de la capa a una extensión.

  • projection: La proyección destino de la capa.

  • visibility: Indica si la capa estará por defecto visible o no.

  • displayInLayerSwitcher: Indica si la capa se muestra en el selector de capas.

  • 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: Parámetros opcionales para la capa.

    • visibility: Define si la capa es visible o no. Verdadero por defecto.
    • opacity: Opacidad de capa, por defecto 1.
    • 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:

{
 opacity: 0.1,
}

Ejemplo completo de creación de capa XYZ:

const layer = new M.layer.XYZ({
  url: 'https://www.ign.es/web/catalogo-cartoteca/resources/webmaps/data/cresques/{z}/{x}/{y}.jpg',
  name: 'AtlasDeCresques',
  projection: 'EPSG:3857',
  visibility: true,
}, {
  displayInLayerSwitcher: false, // No muestra la capa en el TOC
  minZoom: 5 // zoom mínimo aplicable a la capa.
}, {
  opacity: 0.5 // aplica opacidad a la capa
});

Ejemplo funcional Servicios ráster TMS y XYZ

1.INICIO
   1.1. Componentes de la API-CNIG
   1.2. Documentación y Puntos de acceso
   1.3. Primeros pasos
   1.4. Diagrama API CNIG

2. MAPA
2.1. Capas

 ■ 2.1.1. Fuentes
   • 2.1.1.1. Capas vectoriales
     + Vector
     + WFS
     + GeoJSON
     + KML
     + MVT
     + OGCAPIFeatures
     + MBTilesVector
     + GenericVector
   • 2.1.1.2. Capas ráster
     + WMS
     + WMTS
     + TMS
     + XYZ
     + OSM
     + MBTiles
     + GenericRaster
   • 2.1.1.3. Capas rápidas

 ■ 2.1.2. Simbolización
   • 2.1.2.1. Genérica
     + Puntos
     + Líneas
     + Polígonos
   • 2.1.2.2. Básica
     + Puntos
     + Líneas
     + Polígonos
   • 2.1.2.3. Avanzada
     + Coropletas
     + Proporcional
     + Categorías
     + Estadísticos
     + Mapas de Calor
     + Cluster
     + Línea de flujo
     + Composición

 ■ 2.1.3. Filtros

    2.3. Plugins

2.4. Paneles

  ■ Creación de panel desde cero sin controles

  ■ Tutorial Panel de un único control

  ■ Tutorial Panel de un único control con más de un botón

  ■ Tutorial Panel con más de un control

2.5. Eventos

  ■ Gestión de eventos
  ■ Gestión de eventos en controles personalizados

    2.6. Internacionalización

    2.7. Configuración

    2.8. Acceso librerías base

3. UTILIDADES

4. PROXY

5. API REST
 5.1. Parametrización API-REST
 5.2. Base de Datos API-REST
 5.3. API REST Actions
 5.4. Servicio de correos electrónicos
 5.5. Capas rápidas

6. PARAMETRIZACIÓN VISUALIZADORES

7. SOLUCIÓN DE PROBLEMAS

8. PROCESO DE VERSIONADO

9. GUÍA DE DESARROLLO
  > Guía de desarrollo de plugins
  > Guía de desarrollo de visualizadores con React
  > Guía de desarrollo de componentes
  > Guía para el desarrollo de API-CNIG
  > Compilación proyecto API-CNIG

Clone this wiki locally