Saltar a contenido

Ejemplo servicio WMS

Acceso al servicio WMS

La manera más fácil de encontrar las url de los servicios WMS es buscando en la IDE correspondiente o si conocemos al proveedor del servicio buscando en su página web.

En el portal del PNOA podemos encontrar los diferentes productos y servicios que ofrece. Otro ejemplo también sería la web del Institut Cartogràfic i Geològic de Catalunya (ICGC)

La url del servicio WMS de Ortofotos del PNOA es: http://www.ign.es/wms-inspire/pnoa-ma?request=GetCapabilities&service=WMS

Para ver las capacidades y descripción del servicio tenemos que hacer una consulta GetCapabilities http://www.ign.es/wms-inspire/pnoa-ma?request=GetCapabilities&service=WMS. Al abrir la consulta en nuestro navegador vemos un XML donde se describe el servicio y donde podremos sacar los parámetros necesarios para poder visualizar el servicio en nuestro visor de mapas.

Para ver los datos de este servicio sobre un mapa crearemos un visor utilizando Leaflet. 1

Creación de un visor

  • Crear una carpeta con el nombre de visor-wms.
  • Crear un archivo con el nombre de index.html dentro de la carpeta
  • Abrir el archivo index.html con un editor de texto y copiar el siguiente código.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
  <title>Servicio de WMS</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
  <style>
    #mapid {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    }
  </style>
</head>
<body>
  <div id="mapid"></div>

  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>
  <script type="text/javascript">
    var map = L.map('mapid');
    map.setView([41.3887, 2.1777], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  </script>
</body>
</html>

  • Abrir el archivo index.html en el navegador para ver que carga un mapa centrado en Barcelona.

  • Agregar la capa WMS del PNOA

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
  <title>Servicio de WMS</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
  <style>
    #mapid {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    }
  </style>
</head>
<body>
  <div id="mapid"></div>

  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>
  <script type="text/javascript">
    var map = L.map('mapid');
    map.setView([41.3887, 2.1777], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var pnoa = L.tileLayer.wms("http://www.ign.es/wms-inspire/pnoa-ma?SERVICE=WMS&", {
      layers: 'OI.OrthoimageCoverage',
      format: 'image/png',
      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);

  </script>
</body>
</html>
  • Recargar la página para visualizar nuestra capa WMS de Ortofotos.

Ejercicio

Agregar el servicio WMS de Ortofotos del ICGC. URL del servicio http://geoserveis.icc.cat/icc_mapesmultibase/noutm/wms/service?

Para ver el nombre de la capa (layers) hacer un GetCapabilities http://geoserveis.icc.cat/icc_mapesmultibase/noutm/wms/service?SERVICE=WMS&VERSION=1.3.0&REQUEST=Getcapabilities.

En el parámetro attribution de la nueva capa poner "Institut Cartogràfic i Geològic de Catalunya"

Referencias

  1. http://leafletjs.com/ ↩