Skip to content
Álvaro Ramírez edited this page Nov 21, 2024 · 49 revisions

WMS (Web Map Service)
WMS devuelve un mapa en formato imagen de un conjunto de capas ráster o vectoriales. Permitiendo la personalización de las capas mediante estilos. Se trata de un mapa dínamico. Definido por una URL, el servicio puede ofrecer una o muchas capas, individuales o agrupadas, cada una con un nombre propio. Hay varias formas de añadir capas WMS:

1.- En el constructor del mapa:

// En modo cadena 
  const map = M.map({
            container: 'map',
            layers: ["WMS*Limite Administrativo*https://www.ign.es/wms-inspire/unidades-administrativas?*AU.AdministrativeBoundary*false*true"],
            zoom: 5,
            maxZoom: 20,
            minZoom: 4,
            center: [-467062.8225, 4683459.6216],
            projection: 'EPSG:3857*m',
        });

// Instanciando la capa
const map2 = M.map({
            container: 'map',
            layers: [
                new M.layer.WMS({
                    url: 'https://www.ign.es/wms-inspire/unidades-administrativas?',
                    name: 'AU.AdministrativeBoundary',
                    legend: 'Limite administrativo',
                    tiled: false,
                }, {})
            ],
            zoom: 5,
            maxZoom: 20,
            minZoom: 4,
            center: [-467062.8225, 4683459.6216],
            projection: 'EPSG:3857*m',
        });

2.- Mediante los métodos addWMS/addLayers:

// Instanciamos el mapa
const map = M.map({
    container: 'map',
    zoom: 5,
    maxZoom: 20,
    minZoom: 4,
    center: [-467062.8225, 4683459.6216],
    projection: 'EPSG:3857*m',
});

// Instanciamos la capa WMS
const layer = new M.layer.WMS({
    url: 'https://www.ign.es/wms-inspire/unidades-administrativas?',
    name: 'AU.AdministrativeUnit',
    legend: 'Unidades Administrativas',
    tiled: false,
    visibility: false,
}, {})

// La añadimos al mapa
map.addLayers(layer);
// También puede usarse map.addWMS(layer)
// En caso de que tuvieramos layer1, layer2 podríamos hacer
// map.addLayers([layer1, layer2]) o map.addWMS([layer1, layer2])
// En este caso al tener el parámetro visibility como 'false' no se visualiza.

Los parámetros del constructor de la capa son los siguientes:

  • url: URL del servicio WMS. Este parámetro es obligatorio.

  • name: Nombre o nombres de las capas del servicio WMS coincidente con el parámetro "Layer" del archivo de capacidades del servicio. En el caso de ser más de una, es un string separado por comas cada una de las capas del servicio.

  • legend: Nombre asociado en el árbol de contenidos, si usamos uno.

  • version: Versión de la capa. Puede haber servicios WMS que no soporten la versión 1.3.0 del estándar OGC. En estos casos, hay que forzar la petición al servicio a la versión que soporta con el parámetro version.

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

  • tiled: 'true' si queremos dividir la capa en teselas, 'false' en caso contrario.

  • visibility: 'true' si la capa es visible, 'false' si queremos que no lo sea. En este caso la capa sería detectada por las extensiones que hagan un listado de capas y aparecería como no visible.

  • useCapabilities: Define si se utilizará el capabilities para generar la capa.

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

  • 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).
  • displayInLayerSwitcher: Indica si la capa se muestra en el selector de capas.

  • options: Estas opciones se mandarán a la implementación de la capa.

    • singleTile: Indica si la tesela es única o no. Sobrescribe el parámetro tiled
    • animated: Define si la capa está animada, el valor predeterminado es falso.
    • format: Formato de la capa, por defecto image/png.
    • styles: Estilos de la capa.
    • sldBody: Parámetros "ol.source.ImageWMS".
    • minZoom: Zoom mínimo aplicable a la capa.
    • maxZoom: Zoom máximo aplicable a la capa.
    • queryable: Indica si la capa es consultable.
    • crossOrigin: Atributo crossOrigin para las imágenes cargadas.
    • minScale: Escala mínima.
    • maxScale: Escala máxima.
    • minResolution: Resolución mínima.
    • maxResolution: Resolución máxima.
    • opacity: Opacidad de capa, por defecto 1.
    • ratio: Determina el tamaño de la solicitud de la imagen. 1 significa que las solicitudes de imágenes son del tamaño de la ventana gráfica del mapa, 2 significa el doble del ancho y alto de la ventana gráfica del mapa, y así sucesivamente. Debe ser 1 o superior. Por defecto: 1.
  • 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 M.layer.WMS({}, {
  minZoom: 5,
  styles: ‘default’
}, {
  source: new ol.source.ImageWMS({
    url: 'http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/wms?',
      params: {
        'LAYERS': 'tematicos:Provincias',
        'TILED': false,
        ‘TRANSPARENT’: false,
        ‘STYLES’: ‘polygon’,
      },
      ratio: 1,
      serverType: 'geoserver'
  }),
})

Ejemplo completo de creación de capa WMS:

const layer = new M.layer.WMS({
  url: 'https://www.ign.es/wms-inspire/unidades-administrativas?',
  name: 'AU.AdministrativeUnit',
  legend: 'Unidades Administrativas',
  tiled: false,
}, {
  maxZoom: 10, // aplica nivel máximo de zoom aplicable a la capa
  queryable: false // capa no consultable
}, {
  opacity: 0.5 // aplica opacidad a la capa
})

Opcionalmente, pueden especificarse las resoluciones mínima y máxima de dibujado de las capas, con lo que se establecerían los niveles de zoom en los que sería visible. Esto se hace en un segundo array de opciones, mediante los parámetros 'maxResolution' y 'minResolution':

 const layerWMS = new M.layer.WMS({
        url: 'http://www.callejerodeandalucia.es/servicios/base/wms?',
        name: 'CDAU_toponimia',
        legend: 'Toponimia',
        transparent: true,
        tiled: false
      },
      {
        maxResolution: 3270.877524508511,
        minResolution: 1635.4387622542556
      });

Los métodos de mapa getWMS() y removeWMS(layer) permiten gestionar las capas WMS existentes. De manera más general, análogamente puede hacerse getLayers() y removeLayers(layer).

  • removeWMS([layer1, layer2])
  • removeLayers([layer1, layer2])

Ejemplos funcionales

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
     + 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.1.3. Filtros

2.3.-Plugins

  > Creación de plugin en cliente

  » Tutorial de creación de un plugin

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

  > Compilación proyecto API-CNIG

Clone this wiki locally