-
Notifications
You must be signed in to change notification settings - Fork 15
XYZ
Las capas XYZ son servicios de información geográfica en forma de tesela. Cada tesela 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',
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.
-
visibility: Indica si la capa estará por defecto visible o no.
-
displayInLayerSwitcher: Indica si la capa se muestra en el selector de capas.
-
tileGridMaxZoom: Zoom máximo de cuadrícula de mosaico. (Sobrescribe minZoom y maxZoom)
-
tileSize: Tamaño de la tesela.
-
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.
- 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,
}
const layer = new M.layer.XYZ({
url: 'https://www.ign.es/web/catalogo-cartoteca/resources/webmaps/data/cresques/{z}/{x}/{y}.jpg',
name: 'AtlasDeCresques',
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
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.1. Capas
■ 2.1.1. Fuentes
• 2.1.1.1. Capas vectoriales
+ Vector
+ WFS
+ GeoJSON
+ KML
+ MVT
+ OGCAPIFeatures
+ MBTilesVector
+ GenericVector
+ MapLibre
• 2.1.1.2. Capas ráster
+ WMS
+ WMTS
+ TMS
+ XYZ
+ OSM
+ MBTiles
+ GenericRaster
+ GeoTIFF
• 2.1.1.3. Capas rápidas
• 2.1.1.4. Grupo de capas
■ 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.4. Paneles
» Creación de panel desde cero sin controles
» Tutorial Panel de un único control
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
9. GUÍA DE DESARROLLO
> Guía para el desarrollo de API-CNIG
» Tutorial desarrollo del núcleo de API-CNIG - (Cliente)
> Guía de desarrollo de componentes
» Tutorial desarrollo del núcleo de API-CNIG - (Servidor)
> Guía de desarrollo de plugins
» Tutorial desarrollo de plugins ya creados
» Tutorial desarrollo de nuevos plugins
> Guía de desarrollo de visualizadores con React