Cómo ver servicios WMS en Leaflet y acceder a sus datos

Un servicio web de mapas o Web Map Service (WMS) es un protocolo estándar definido por el OGC que sirve imágenes de mapas a partir de información geográfica. Más info aquí de cómo crear un WMS.

Una solicitud de WMS define la capa geográfica y el área de interés a procesar. La respuesta a la solicitud es una o más imágenes de mapas georreferenciadas (devueltos como JPEG, PNG, etc.) que se pueden mostrar en una aplicación de navegador.

Hay muchas formas y propósitos para utilizar y conectarse a un servicio WMS, desde utilizar un SIG de escritorio como ArcGIS, QGIS o gvSIG, o mediante alguna librería Javascript que nos permita incorporarlos a un visor web de mapas.

Una de estas librerías a la que nos referimos es Leaflet. Veremos a continuación cómo visualizar servicios WMS en Leaflet, y sobre todo cómo podemos acceder a sus datos mediante un plugin.

La clase nativa L.TileLayer.WMS

Para utilizar un servicio WMS en Leaflet, podemos utilizar la clase L.TileLayer.WMS que nos proporciona Leaflet de forma nativa.

Su uso es muy sencillo, ya que solo necesitamos proporcionarle una URL con el wms que deseamos ver y proporcionarle unas opciones/parámetros.

Por ejemplo si queremos utilizar el servicio de ortofotografías del PNOA escribiremos la URL del wms :

http://www.ign.es/wms-inspire/pnoa-ma?SERVICE=WMS.

Vemos un ejemplo a continuación:

Las opciones indican aspectos como:

  • La capa que queremos mostrar de las ofrecidas por el servidor.
  • El formato de la imagen.
  • La versión.
  • Y la atribución o autoría del mapa.

Estos datos los podemos obtener si hacemos una consulta GetCapabilities:

http://www.ign.es/wms-inspire/pnoa-ma?=request=GetCapabilities&service=WMS

El plugin leaflet.wms

Como hemos visto cargar un WMS en Leaflet es muy sencillo, sin embargo presenta algunas limitaciones.

En nuestro auxilio acude el plugin leaflet.wms que tiene varias utilidades. Aquí nos centraremos en ver la que nos permite acceder a los datos de las capas del WMS.

Esto lo podemos hacer mediante la clase L.WMS.source.

Como siempre que utilicemos un plugin de Leaflet, lo primero será acudir a la página del plugin y descargarlo. Solo necesitaremos el archivo leaflet.wms.js.

L.WMS.Source es una «capa» virtual de Leaflet que gestiona múltiples capas WMS procedentes de un solo origen WMS. Al usar la misma fuente para varias capas, puede hacer que el servicio WMS optimice la carga de la imagen y evitar sobrecargar al cliente con múltiples imágenes grandes. L.WMS.Source es una capa virtual, ya que no carga la imagen WMS directamente. Pero además incluye una función de identificación () que puede llamar al servicio GetFeatureInfo de WMS para consultar una capa del mapa y devolver información sobre las características subyacentes.

En primer lugar creamos una instancia a L.WMS. source y a continuación utilizamos el método .getLayer para indicar la capa WMS sobre la que realizaremos la consulta.

Si ahora hacemos clic sobre cualquier punto del mapa nos mostrará una ventana con los datos de la capa «OI.MosaicElement».

Consultando los datos del catastro

Vamos a poner otro ejemplo, con el que podremos acceder a los datos catastrales. Escribimos el código completo a continuación.

Si quieres aprender a crear visores web profesionales como estos, inscríbete ya en nuestro curso online visores webmapping con Leaflet.

12 comentarios en “Cómo ver servicios WMS en Leaflet y acceder a sus datos”

  1. hola buenos dias! esto me ayudo mucho para aplicar las capas wms que necesito, sin embargo tengo un problema quizás puedan ayudarme.
    Cuando cargo la capa wms sobre una capa base de openstreetmap veo que tapa toda la capa base y yo necesito que solo se aplique a algunas áreas del mapa.. es posible esto?.
    Desde ya muchas gracias por su respuesta

    • Gracias, Diego, por tu comentario. No puedes seleccionar un área (por ejemplo un polígono) del WMS para mostrarlo, aunque puedes definir unos límites, aplicar transparencias para ver la capa de fondo, o utilizar algún «truco» como crear una máscara , es decir una capa que oculte las partes que no quieres que se vean…

  2. ¡Hola! No conocía la clase L.source.WMS del plugin leaflet.wms. Me parece una muy buena solución para «interrogar» los datos de los servicios WMS. ¿Es posible “customizar” el “popup” que se levanta con los resultados del “GetFeatureInfo”? ¡Muchas gracias!

  3. Hola, antes que nada debo felicitarte por tu trabajo, felicidades.
    Segundo quisiera preguntarte como podríamos obtener los nombres de las capas con un GetCapabilities de un servicio WMS. Lo que quiero es automatizar el despliegue de las capas (webmapping), para eso necesito todos los nombres de las capas del servicio. Pero he estado quebrandome la cabeza para lograrlo ya que al solicitar vía Ajax el GetCapabilities entra el control de Origen. Alguna orientación?

    Gracias por todo tu trabajo

  4. Muchas Gracias Federico, por tu comentario.
    No todas las capas de los servicios WMS tienen la capacidad de soportar una consulta. Tendrás que comprobar primero que ese servicio está disponible. En cuanto a la replicación del ejemplo, debes descargar primero el archivo del plugin y luego aplicarlo según se indica en el blog.
    Saludos

  5. Hola, copié y pegué el html del último ejemplo pero no logro hacer que se levante el popup con la info de parcela (en la ventana leaflet embebida que muestras allí sí se puede).
    Intenté con un wms propio pero tampoco lo logré.

  6. Hola! Genial la entrada. Estuve probando el último ejemplo en un html nuevo pero al hacer clic no se levanta ningún popup.
    Quería tomar esa base para hacer un ejemplo con un wms propio. Muchas gracias!

Los comentarios están cerrados.