Visualizando el WMTS del PNOA en OpenLayers

por

En este post vamos a mostrar cómo visualizar el WMTS del PNOA en OpenLayers 3, partiendo del ejemplo de WMTS disponible en la página de ejemplos de OpenLayers.

Quiero agradecer a Javier Cristino Priego, del proyecto (PAB-Plan Andaluz de la Bicicleta) y ex-alumno del curso online desarrollo de aplicaciones webmapping, la ayuda para la visualización del WMTS del PNOA en el Sistema de Referencia Espacial WGS84 (EPSG:4326).

Hemos modificado el código para visualizar en el mapa el PNOA en EPSG:3857 y después realizamos otros ajustes en la matriz de teselas (TileMatrix) para adaptarlo al EPSG:4326.

El servicio WMTS de ortofotos del PNOA del IGN es un Servicio Web de Mapas Teselado conforme al perfil INSPIRE de Web Map Tile Service (WMTS) 1.0.0. Permite visualizar las ortofotografías de máxima actualidad del Plan Nacional de Ortofotografía Aérea (PNOA) a partir de una escala aproximada 1:70.000 para toda España. Para escalas menores (menos detalladas) se visualizan las imágenes de satélite Spot5 de 20 metros de resolución.

Toda la información del servicio WMTS del PNOA se puede ver realizando una petición GetCapabilities:

http://www.ign.es/wmts/pnoa-ma?request=GetCapabilities&service=WMTS

Podemos visualizar una tesela del WMTS del PNOA en nuestro navegador mediante una petición GetTile (EPSG:3857):

http://www.ign.es/wmts/pnoa-ma?Layer=OI.OrthoimageCoverage&Style=default&TileMatrixSet=EPSG:3857&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=4&TileCol=7&TileRow=6

Visualización de una tesela del WMTS en proyección EPSG:4326 mediante una petición GET:

http://www.ign.es/wmts/pnoa-ma?Layer=OI.OrthoimageCoverage&Style=default&TileMatrixSet=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4326:4&TileCol=15&TileRow=4
WMTS del PNOA
Clic para abrir en el navegador

Por qué utilizar un WMTS en lugar de un WMS

Un WMTS es un estándar que sirve las teselas de mapa pre-renderizadas en la web. Aunque el estándar más antiguo y popular para cartografía web es WMS, las propiedades de esta norma han demostrado que es difícil de implementar en situaciones en las que necesitamos tiempos de respuesta cortos.

WMTS del PNOA en OpenLayers

Las capas teseladas se implementan en OpenLayers mediante la clase ol.layer.Tile.

La clase ol.layer.Tile tiene varias fuentes posibles para servidores WMS:

  • ol.source.TileWMS
  • ol.source.ImageWMS

OpenLayers3 también nos proporciona la clase ol.source.WMTS, que nos permite realizar peticiones de teselas de un servidor conforme a WMTS.

La clase ol.source.WMTS  acepta una serie de propiedades para controlar los parámetros del WMTS:

  • url: La url del servidor. En nuestro caso: ‘http://www.ign.es/wmts/pnoa-ma’.
  • layer: el nombre de la capa. Para el PNOA: ‘OI.OrthoimageCoverage’.
  • style: el estilo que se usará (debe estar en el servidor).
  • matrixSet: el nombre de la matriz que usaremos. En nuestro caso EPSG:4326.
  • tileGrid: especifica la malla de teselas que se utilizará. Debe ser una instancia de ol.tilegrid.WMTS. En el que se indicará la proyección, resolución y matriz.

Aquí vemos el código necesario para mostrar una capa teselada del PNOA en WGS84 utilizando una fuente WMTS:

new ol.layer.Tile({
	opacity: 0.7,
	extent: projectionExtent,
	source: new ol.source.WMTS({
                url: 'http://www.ign.es/wmts/pnoa-ma',
                layer: 'OI.OrthoimageCoverage',
		matrixSet: 'EPSG:4326',
		format: 'image/png',
		projection: projection,
		tileGrid: new ol.tilegrid.WMTS({
			origin: ol.extent.getTopLeft(projectionExtent),
			resolutions: resolutions,
			matrixIds: matrixIds
		}),
		style: 'default'
	})
})

A continuación te dejamos el código completo, disponible para mostrar el PNOA en EPSG4326 y con comentarios para mostrarlo también en EPSG3857:

<!DOCTYPE html>
<html>
<charset meta = "UTF-8">
<head>
<title>WMTS PNOA con OpenLayers 3</title>
<script src="http://openlayers.org/en/v3.4.0/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css" type="text/css">
	<style>
		#map{		
		width:100%;
		height:500px;
		box-shadow: 5px 5px 5px #888;
		}
	</style>
</head>
  <body>
   <div id="map"></div>
 <script>
		var projection = ol.proj.get('EPSG:4326');
		//var projection = ol.proj.get('EPSG:3857');
		var projectionExtent = projection.getExtent();
        var size = ol.extent.getWidth(projectionExtent) / 512;
        //var size = ol.extent.getWidth(projectionExtent) / 256;
		var resolutions = new Array(18);
		var matrixIds = new Array(18);
		for (var z = 0; z < 18; ++z) {
		  // generate resolutions and matrixIds arrays for this WMTS
		  resolutions[z] = size / Math.pow(2, z);
		  matrixIds[z] = "EPSG:4326:" + z;
		  //matrixIds[z] = z;
		}
		
		var attribution = new ol.Attribution({
			html: 'Teselas de PNOA cedido por © Instituto Geográfico Nacional de España'
		});

		var map = new ol.Map({
		  layers: [
			new ol.layer.Tile({
                        title: "Global Imagery",
                        source: new ol.source.TileWMS({
                            url: 'http://maps.opengeo.org/geowebcache/service/wms',
                            params: { LAYERS: 'openstreetmap', format: 'image/jpeg', VERSION: '1.1.1' }
                        })
                    }),
			new ol.layer.Tile({
			  opacity: 0.7,
			  extent: projectionExtent,
			  source: new ol.source.WMTS({
			    attributions: [attribution],
				url: 'http://www.ign.es/wmts/pnoa-ma',
                                layer: 'OI.OrthoimageCoverage',
				matrixSet: 'EPSG:4326',
				//matrixSet: 'EPSG:3857',
				format: 'image/png',
				projection: projection,
				tileGrid: new ol.tilegrid.WMTS({
				  origin: ol.extent.getTopLeft(projectionExtent),
				  resolutions: resolutions,
				  matrixIds: matrixIds
				}),
				style: 'default'
			  })
			})
		  ],
		  target: 'map',
		  controls: ol.control.defaults({
			attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
			  collapsible: false
			})
		  }),
		  view: new ol.View({
			projection: 'EPSG:4326',
			center: [-10.72, 36.66],
			zoom: 5
		})
	     });	
 </script>
 </body> 
 </html>

Y el mapa web mostrando el WMTS del PNOA y OpenStreetMap:

1 comentario en «Visualizando el WMTS del PNOA en OpenLayers»

  1. Muchas gracias Aurelio por tus explicaciones y ejemplos.

    Puesto que la proyección oficial para España es ETRS89 a la que estamos obligados todas las administraciones a publicar la cartografía, sería interesante migrar el ejemplo a esa proyección con el EPSG:25830.

    Yo lo estoy intentando pero si se pone el extent que viene en spatialreference.org da el error de «>Column xxx is out of range, min: 0 max:1258»

    Por si a alguien le interesa pongo aquí el código para ver las capas de catastro para los nuevos servicios Inspire en este SRS.

    var catastro = new ol.layer.Tile({
    title: ‘catastro’,
    source: new ol.source.TileWMS({
    url: ‘http://ovc.catastro.meh.es/cartografia/INSPIRE/spadgcwms.aspx?’,
    params: {
    ‘LAYERS’: ‘cp.cadastralparcel’,
    ‘SRS’: ‘epsg:25830’
    }
    }),
    visible:false
    });

    Saludos

Los comentarios están cerrados.