Skip to content
IngenieroGeomatico edited this page May 13, 2024 · 38 revisions

WMS (Web Map Service)
WMS devuelve un mapa en formato imagen de un conjunto capas ráster o vectoriales. Permitiendo las 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 url y name especifican la url del servicio y el nombre de la capa en el mismo. Los otros parámetros indican:

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

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

  • tiled: 'true' si queremos dividir la capa en tiles, '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 detectado por los plugins de tablas de contenidos 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).
  • options: Estas opciones se mandarán a la implementación de la capa.

    • singleTile: Indica si la tesela es única o no.
    • numZoomLevels: Número de niveles de zoom.
    • 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:

{
 opacity: 0.1, // Cambia la opacidad de la capa
}

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