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:
var pnoa = L.tileLayer.wms("http://www.ign.es/wms-inspire/pnoa-ma?SERVICE=WMS&", {
layers: "OI.OrthoimageCoverage",//nombre de la capa (ver get capabilities)
format: 'image/jpeg',
transparent: true,
version: '1.3.0',//wms version (ver get capabilities)
attribution: "PNOA WMS. Cedido por © Instituto Geográfico Nacional de España"
}).addTo(map);
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.
<script src="leaflet.wms.js"></script>
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.
var source = L.WMS.source("http://www.ign.es/wms-inspire/pnoa-ma?SERVICE=WMS&", {
opacity: 0.5,
});
source.getLayer("OI.MosaicElement").addTo(map);
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WMS Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
.leaflet-popup-content-wrapper {
width: 420px;
height: 400px;
}
iframe {
width: 400px;
height: 350px;
}
</style>
</head>
<body>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="leaflet.wms.js"></script>
<div id ="map"> </div>
<script>
var map = L.map('map').setView( [40.965, -5.004], 16);
var pnoa = L.tileLayer.wms("http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?", {
layers: "Catastro",//nombre de la capa (ver get capabilities)
format: 'image/jpeg',
transparent: true,
version: '1.1.1',//wms version (ver get capabilities)
attribution: "DIRECCION GENERAL DEL CATASTRO"
}).addTo(map);
var source = L.WMS.source("http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?", {
opacity: 0.1,
});
source.getLayer("PARCELA").addTo(map);
</script>
</body>
</html>
Si quieres aprender a crear visores web profesionales como estos, inscríbete ya en nuestro curso online de web mapping interactivo con Leaflet.
Tutor del curso online de Análisis GeoEspacial con Python y de los cursos online de webmapping. Echa un vistazo a todos nuestros cursos de SIG online.
Hola, gracias por el tuto, me sirvió mucho.
Cual CMS recomendarían para hacer una web que utilice leaflet. WordPress sería una buena opción?.
Saludos desde Nicaragua.
Buenos días Fausto:
Hay plugins de leaflet para WordPress como https://es.wordpress.org/plugins/leaflet-map/ sin embargo nosotros en el curso de webmapping con Leaflet utilizamos servidores gratuitos para visualizar los trabajos de los alumnos.
Saludos.
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…
¡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!
Hola Alba:
Puedes personalizar el popup que se abre accediendo a la hoja de estilos de Leaflet, y asignándole el estilo que deseas en .leaflet-popup-content.
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
Gracias Jonathan.
Creo que deberías consultar el plugin Leaflet-WMS (https://github.com/Flexberry/Leaflet-WMS). Aunque su nombre es muy parecido al que tratamos en este artículo es otro plugin diferente. En la documentación de este plugin se trata la posibilidad de realizar consultas GetCapabilities.
Saludos
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
Me faltaba descargar el plugin! Muchísimas gracias!
Por cierto, sigo muy de cerca este blog, es realmente útil.
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é.
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!