OpenLayers nos permite la capacidad de añadir capas mediante servicios web, esto es lo que se conoce de forma general como WMS, Web Map Service.
Este formato es un estándar definido por el OGC, Open Geospatial Consortium, y es una de las maneras más usuales de añadir cartografía en OpenLayers. Existen múltiples servidores de estos servicios que podemos ir añadiendo a nuestro mapa.
Desde aquí podemos acceder a un listado de servicios wms de la Infraestructura de Datos Espaciales Española .
En el caso que nos ocupa vamos añadir el wms del PNOA, Plan Nacional de Ortofotografía Aérea, a un mapa hecho con OpenLayers 2.
Para poder seguir las instrucciones que se detallan en el siguiente post debéis tener en cuenta que necesitáis tener cargada la librería de OpenLayers 2, junto con sus hojas de estilo css en vuestro documento html. Son necesarios algunos conocimientos de programación web para entender las instrucciones que se especifican a continuación.
Lo primero que debemos hacer es crear un objeto de tipo mapa.
|
1 |
var mapa = new OpenLayers.Map('map'); |
El parámetro que le estamos pasando al constructor del objeto es el identificador del div, ‘map’, que debe figurar en nuestro documento html.
Este objeto es sobre el que gira todo el mapa en OpenLayers 2. A continuación, debemos añadir una variable para almacenar un objeto de tipo capa que llamará al servicio web del PNOA.
|
1 2 3 4 5 6 7 8 9 |
var capa= new OpenLayers.Layer.WMS( 'Ortofotos (PNOA)', //Nombre que le estamos dando a nuestra capa en el visor 'http://www.ign.es/wms-inspire/pnoa-ma', //URL del servicio de mapas {layers: 'OI.OrthoimageCoverage', //Nombre con el que es identificada la capa en el servicio de origen transparent: false, //No le aplicacmos transparencia format: "image/jpeg"}, //Especificamos el formato en el que queremos que se nos sirva la imagen {isBaseLayer: true, //La definimos como base para que las demás se añadan sobre esta tileSize: new OpenLayers.Size(256,256)} //Especificamos el tamaño del tile que queremos que nos ofrezca el servidor ); |
Ahora utilizamos un método del objeto mapa para añadir la capa al mapa.
|
1 |
mapa.addLayer(capa); |
Así de simple sería añadir el servicio de fotografía aérea a nuestro mapa. Ahora sólo deberíais especificar las variables para focalizar vuestra ventana de mapa en el área que queráis mostrar.