curso openlayers xeoinquedos
DESCRIPTION
OpenLayers course organized by Xeoinquedos in A Coruña on May 20th. Speakers: Gracia Fernández López & Xurxo Méndez PérezTRANSCRIPT
Introducción a OpenLayersIntroducción a OpenLayers
Xeoinquedos organiza:Xeoinquedos organiza:
Curso de introducción a OpenLayersCurso de introducción a OpenLayers
20 de Mayo de 2011
Lugar: ETS de Camiños, Canais e Portos – Universidade de A Coruña, Campus de Elviña
Xeoinquedos organiza:Xeoinquedos organiza:
Curso de introducción a OpenLayersCurso de introducción a OpenLayers
20 de Mayo de 2011
Lugar: ETS de Camiños, Canais e Portos – Universidade de A Coruña, Campus de Elviña
Introducción a OpenLayersIntroducción a OpenLayers
Qué vamos a verQué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capas
➔ Controles
➔ Interacción con el servidor
(a través de estándares OGC)
Qué vamos a verQué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capas
➔ Controles
➔ Interacción con el servidor
(a través de estándares OGC)
Introducción a OpenLayersIntroducción a OpenLayers
Qué vamos a verQué vamos a ver
➔ Introducción a la libreríaIntroducción a la librería
➔ Añadiendo capas
➔ Controles
➔ Interacción con el servidor
(a través de estándares OGC)
Qué vamos a verQué vamos a ver
➔ Introducción a la libreríaIntroducción a la librería
➔ Añadiendo capas
➔ Controles
➔ Interacción con el servidor
(a través de estándares OGC)
Introducción a la libreríaIntroducción a la librería
• ¿Qué es?
• Framework GIS desarrollado en JavaScript para la creación de
mapas web dinámicos
• ¿Qué es?
• Framework GIS desarrollado en JavaScript para la creación de
mapas web dinámicos
Introducción a la libreríaIntroducción a la librería
• ¿Qué puedo hacer con él?
• Crear mapas interactvos
• ¿Qué puedo hacer con él?
• Crear mapas interactvos
Introducción a la libreríaIntroducción a la librería
• ¿Qué puedo hacer con él?
• Visualizar información espacial / geográfca
• ¿Qué puedo hacer con él?
• Visualizar información espacial / geográfca
Introducción a la libreríaIntroducción a la librería
• ¿Qué puedo hacer con él?
• Incluir y superponer distntos tpos de capas
• ¿Qué puedo hacer con él?
• Incluir y superponer distntos tpos de capas
Introducción a la libreríaIntroducción a la librería
• ¿Qué puedo hacer con él?
• Editar información espacial / geográfca
• ¿Qué puedo hacer con él?
• Editar información espacial / geográfca
Introducción a la libreríaIntroducción a la librería
• ¿Qué puedo hacer con él?
• Interactuar con servicios GIS externos
• ¿Qué puedo hacer con él?
• Interactuar con servicios GIS externos
• ¿Cómo lo hace?
• Arquitectura modular
– Capas ↔ WMS, Vector, KML, Google, VirtualEarth, Images...
– Geometrías ↔ Point, Polygon, LinearRing...
– Controles ↔ Zoom, Pan, Measure, Modify...
– Formatos ↔ WMS, WFS, OSM, KML, GeoJSON, GeoRSS...
– Protocolos ↔ HTTP, SOS, WFS, SQL...
• ¿Cómo lo hace?
• Arquitectura modular
– Capas ↔ WMS, Vector, KML, Google, VirtualEarth, Images...
– Geometrías ↔ Point, Polygon, LinearRing...
– Controles ↔ Zoom, Pan, Measure, Modify...
– Formatos ↔ WMS, WFS, OSM, KML, GeoJSON, GeoRSS...
– Protocolos ↔ HTTP, SOS, WFS, SQL...
Introducción a la libreríaIntroducción a la librería
• Más...
• Creado en 2005 por Metacarta
• Licencia estlo BSD (htp://svn.openlayers.org/trunk/openlayers/license.txt)
• Actualmente en la versión 2.10 (en breve la 2.11)
• Trabajando ya en la versión 3.0
• Más...
• Creado en 2005 por Metacarta
• Licencia estlo BSD (htp://svn.openlayers.org/trunk/openlayers/license.txt)
• Actualmente en la versión 2.10 (en breve la 2.11)
• Trabajando ya en la versión 3.0
Introducción a la libreríaIntroducción a la librería
Introducción a la libreríaIntroducción a la librería
• ¿Dónde encuentro documentación y ejemplos?
• htp://docs.openlayers.org/
• Home de la documentación de OpenLayers
• htp://openlayers.org/dev/examples/
• Multtud de ejemplos de casi todo lo que puede hacer
• ¿Dónde encuentro documentación y ejemplos?
• htp://docs.openlayers.org/
• Home de la documentación de OpenLayers
• htp://openlayers.org/dev/examples/
• Multtud de ejemplos de casi todo lo que puede hacer
Introducción a la libreríaIntroducción a la librería
• ¿Dónde encuentro documentación y ejemplos?
• htp://trac.osgeo.org/openlayers/wiki
• Wiki con ejemplos, documentación, API docs...
• Listas de correo (muy actvas):
• htp://lists.osgeo.org/mailman/listnfo/openlayers-users
• htp://lists.osgeo.org/mailman/listnfo/openlayers-dev
• ¿Dónde encuentro documentación y ejemplos?
• htp://trac.osgeo.org/openlayers/wiki
• Wiki con ejemplos, documentación, API docs...
• Listas de correo (muy actvas):
• htp://lists.osgeo.org/mailman/listnfo/openlayers-users
• htp://lists.osgeo.org/mailman/listnfo/openlayers-dev
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!• Vamos a hacer esto:
• Un mapa navegable con una capa simple WMS, obtenida de un servidor externo (osgeo.org)
¡Hola Mundo!¡Hola Mundo!• Vamos a hacer esto:
• Un mapa navegable con una capa simple WMS, obtenida de un servidor externo (osgeo.org)
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!• ¿Qué es WMS?• WMS = Web Map Service• Protocolo estándar OGC que permite servir y consumir
mapas• Implementado por casi toda aplicación GIS• Por supuesto, también por OpenLayers
¡Hola Mundo!¡Hola Mundo!• ¿Qué es WMS?• WMS = Web Map Service• Protocolo estándar OGC que permite servir y consumir
mapas• Implementado por casi toda aplicación GIS• Por supuesto, también por OpenLayers
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!• Para hacerlo necesito:
• Editor de texto• Librería OpenLayers – 3 opciones:
• Descargar la versión estable– htp://openlayers.org/download/OpenLayers-2.10.tar.gz
– htp://openlayers.org/download/OpenLayers-2.10.zip
• Descargar la versión trunk del repositorio Subversion
– svn checkout htp://svn.openlayers.org/trunk/openlayers/
• Utlizar la hosted version, pero cargas contra el servidor de openlayers.org...
¡Hola Mundo!¡Hola Mundo!• Para hacerlo necesito:
• Editor de texto• Librería OpenLayers – 3 opciones:
• Descargar la versión estable– htp://openlayers.org/download/OpenLayers-2.10.tar.gz
– htp://openlayers.org/download/OpenLayers-2.10.zip
• Descargar la versión trunk del repositorio Subversion
– svn checkout htp://svn.openlayers.org/trunk/openlayers/
• Utlizar la hosted version, pero cargas contra el servidor de openlayers.org...
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!• Utlizaremos la versión trunk
• Es la últma, con todas las mejoras añadidas tras la publicación de la versión 2.10 estable
• Soluciona un bug aparecido con Firefox 4 al utlizar OpenLayers en modo debug (se comenta más adelante)
• A día de hoy, es práctcamente igual a la futura 2.11
¡Hola Mundo!¡Hola Mundo!• Utlizaremos la versión trunk
• Es la últma, con todas las mejoras añadidas tras la publicación de la versión 2.10 estable
• Soluciona un bug aparecido con Firefox 4 al utlizar OpenLayers en modo debug (se comenta más adelante)
• A día de hoy, es práctcamente igual a la futura 2.11
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!• Para verlo necesito:
• Cualquier navegador web
¡Hola Mundo!¡Hola Mundo!• Para verlo necesito:
• Cualquier navegador web
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!
Pasos:
1.En la carpeta pública* crear carpeta “curso-openlayers/”
2.Descomprimir la librería y • copiar la carpeta “openlayers/” dentro de la carpeta creada
3.Crear el archivo “curso-openlayers/curso-1.html”
4.¡A picar código!* : Ubuntu: /var/www
WAMP-MAMP-XAMP: $SERVER_HOME/htdocs
¡Hola Mundo!¡Hola Mundo!
Pasos:
1.En la carpeta pública* crear carpeta “curso-openlayers/”
2.Descomprimir la librería y • copiar la carpeta “openlayers/” dentro de la carpeta creada
3.Crear el archivo “curso-openlayers/curso-1.html”
4.¡A picar código!* : Ubuntu: /var/www
WAMP-MAMP-XAMP: $SERVER_HOME/htdocs
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!• Pasos:
• Crear estructura del HTML• Establecer dimensiones del mapa
• Enlazar la librería• Crear el mapa
• Añadirle capas• Añadir controles• Establecer centro y nivel de zoom
¡Hola Mundo!¡Hola Mundo!• Pasos:
• Crear estructura del HTML• Establecer dimensiones del mapa
• Enlazar la librería• Crear el mapa
• Añadirle capas• Añadir controles• Establecer centro y nivel de zoom
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!
Partmos de una página base
¡Hola Mundo!¡Hola Mundo!
Partmos de una página base<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Curso de OpenLayers - Ejemplo 1 - Capas WMS</title> </head> <body> <h1 id="title">Curso de OpenLayers - Ejemplo 1 - Capas WMS</h1> <div id="map"> </div> </body></html>
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!
Incluimos la librería y creamos el mapa y las capas
¡Hola Mundo!¡Hola Mundo!
Incluimos la librería y creamos el mapa y las capas<head>............... <script type="text/javascript" src="openlayers/lib/OpenLayers.js"></script> <script type="text/javascript"> var map; function init() { map = new OpenLayers.Map( 'map' ); var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} ); map.addLayer(layer); map.setCenter(new OpenLayers.LonLat(-8, 42.8), 8); } </script></head>
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!
¿Qué estamos haciendo?
• Enlazamos la librería descargada• 2 opciones:
➔ Un sólo fchero → para producción➔ Incluir “OpenLayers-2.10/OpenLayers.js”
➔ Librería desplegada → para desarrollo (Firebug!)➔ Incluir “OpenLayers-2.10/lib/OpenLayers.js”
¡Hola Mundo!¡Hola Mundo!
¿Qué estamos haciendo?
• Enlazamos la librería descargada• 2 opciones:
➔ Un sólo fchero → para producción➔ Incluir “OpenLayers-2.10/OpenLayers.js”
➔ Librería desplegada → para desarrollo (Firebug!)➔ Incluir “OpenLayers-2.10/lib/OpenLayers.js”
<script type="text/javascript" src="openlayers/lib/OpenLayers.js"></script>
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!
¡Ojo!➔ La versión desplegada carga todos los archivos de
OpenLayers por separado (bueno para debug)
➔ Sólo ellos depuran con en modo singlefle
¡Hola Mundo!¡Hola Mundo!
¡Ojo!➔ La versión desplegada carga todos los archivos de
OpenLayers por separado (bueno para debug)
➔ Sólo ellos depuran con en modo singlefle
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!● Si utlizas Firefox 4... :
● La versión 2.10 estable tene un bug con Firefox 4– En modo depuración, cargando todos los archivos, no los carga bien
● Solución:● Utlizar la versión trunk
svn checkout htp://svn.openlayers.org/trunk/openlayers/– Los ejemplos dados para este curso utlizan esta versión
¡Hola Mundo!¡Hola Mundo!● Si utlizas Firefox 4... :
● La versión 2.10 estable tene un bug con Firefox 4– En modo depuración, cargando todos los archivos, no los carga bien
● Solución:● Utlizar la versión trunk
svn checkout htp://svn.openlayers.org/trunk/openlayers/– Los ejemplos dados para este curso utlizan esta versión
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!
Creamos una función init() a la que llamaremos al cargar la página
• En ella metemos el código de inicialización del mapa• La variable map se crea en el scope global (→ debug)
¡Hola Mundo!¡Hola Mundo!
Creamos una función init() a la que llamaremos al cargar la página
• En ella metemos el código de inicialización del mapa• La variable map se crea en el scope global (→ debug)
<script type="text/javascript"> var map; function init() {.............. } </script>
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!
Creamos el objeto OpenLayers.Map
• Es el objeto “central” de OpenLayers• Varias versiones del constructor
• En esta se le pasa el id del <div> que contendrá el mapa
• OpenLayers se encarga de renderizar el mapa en él
¡Hola Mundo!¡Hola Mundo!
Creamos el objeto OpenLayers.Map
• Es el objeto “central” de OpenLayers• Varias versiones del constructor
• En esta se le pasa el id del <div> que contendrá el mapa
• OpenLayers se encarga de renderizar el mapa en él
map = new OpenLayers.Map( 'map' );
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!● Clase OpenLayers.Map
● Es la clase fundamental de OpenLayers, representa el mapa
● Contene las capas, los controles, la confguración de visualización...
● Puede haber varios por página
¡Hola Mundo!¡Hola Mundo!● Clase OpenLayers.Map
● Es la clase fundamental de OpenLayers, representa el mapa
● Contene las capas, los controles, la confguración de visualización...
● Puede haber varios por página
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!
Creamos una capa WMS (objeto que extende de OpenLayers.Layer)
Parámetros:• name: nombre arbitrario que le damos a la capa → “OpenLayers WMS”
• url: URL del servicio WMS → “htp://vmap0.tles.osgeo.org/wms/vmap”
• params: parámetros para la petción WMS → {layers: 'basic'}
• optons: opciones para la capa (en este ejemplo no lo usamos)
¡Hola Mundo!¡Hola Mundo!
Creamos una capa WMS (objeto que extende de OpenLayers.Layer)
Parámetros:• name: nombre arbitrario que le damos a la capa → “OpenLayers WMS”
• url: URL del servicio WMS → “htp://vmap0.tles.osgeo.org/wms/vmap”
• params: parámetros para la petción WMS → {layers: 'basic'}
• optons: opciones para la capa (en este ejemplo no lo usamos)
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!● Jerarquía de clases OpenLayers.Layer
● Representan las distntas capas que se pueden añadir a un mapa:– WMS, WFS, WMTS, Vector, GML, KML, GeoRSS,
Google, OSM, Yahoo, VirtualEarth (Bing)...● La confguración depende del tpo de capa● Jerarquía extensible
¡Hola Mundo!¡Hola Mundo!● Jerarquía de clases OpenLayers.Layer
● Representan las distntas capas que se pueden añadir a un mapa:– WMS, WFS, WMTS, Vector, GML, KML, GeoRSS,
Google, OSM, Yahoo, VirtualEarth (Bing)...● La confguración depende del tpo de capa● Jerarquía extensible
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!
Tenemos que añadir la capa al mapa y defnir la zona que vamos a visualizar
• El método OpenLayers.Map.setCenter() recibe el punto central y el nivel de zoom
• zoom = 0 → se visualiza todo el extent del mapa
• La clase OpenLayers.LonLat representa pares lattud, longitud
• Con esto, OpenLayers tene sufciente para saber cómo dibujar el mapa
¡Hola Mundo!¡Hola Mundo!
Tenemos que añadir la capa al mapa y defnir la zona que vamos a visualizar
• El método OpenLayers.Map.setCenter() recibe el punto central y el nivel de zoom
• zoom = 0 → se visualiza todo el extent del mapa
• La clase OpenLayers.LonLat representa pares lattud, longitud
• Con esto, OpenLayers tene sufciente para saber cómo dibujar el mapa
map.addLayer(layer); map.setCenter(new OpenLayers.LonLat(-8, 42.8), 8);
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!
Por últmo, llamamos al método al cargar la página
El método se ejecuta al lanzarse el evento onload, cosa que ocurre tras cargar la página➔ Necesario cuando manipulamos en DOM
¡Hola Mundo!¡Hola Mundo!
Por últmo, llamamos al método al cargar la página
El método se ejecuta al lanzarse el evento onload, cosa que ocurre tras cargar la página➔ Necesario cuando manipulamos en DOM
<body onload="init()">...............</body>
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!
Sólo falta defnir las dimensiones de nuestro mapa... :
¡Hola Mundo!¡Hola Mundo!
Sólo falta defnir las dimensiones de nuestro mapa... :
<head>............... <style type="text/css"> #map { width: 600px; height: 400px; border: 1px solid; } </style></head>
Introducción a la libreríaIntroducción a la librería
¡Hola Mundo!¡Hola Mundo!● Y listo! Accede a htp://localhost/curso-openlayers/curso-1.html (o
equivalente según la instalación del servidor web)
¡Hola Mundo!¡Hola Mundo!● Y listo! Accede a htp://localhost/curso-openlayers/curso-1.html (o
equivalente según la instalación del servidor web)
Introducción a OpenLayersIntroducción a OpenLayers
Qué vamos a verQué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capasAñadiendo capas
➔ Controles
➔ Interacción con el servidor
(a través de estándares OGC)
Qué vamos a verQué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capasAñadiendo capas
➔ Controles
➔ Interacción con el servidor
(a través de estándares OGC)
Añadiendo capasAñadiendo capas
Capas de GoogleCapas de Google● Google Maps ofrece su propio API
● htp://code.google.com/intl/es/apis/maps/documentaton/javascript/● Sin embargo:
● No es open source
– Su licencia, aunque permisiva, restringe su uso● No admite tantos tpos de capas● ¿Rapidez? Si quieres las capas de Google, van a ir igual de rápido en
OpenLayers!
– Además, podrás superponer las capas que quieras
Capas de GoogleCapas de Google● Google Maps ofrece su propio API
● htp://code.google.com/intl/es/apis/maps/documentaton/javascript/● Sin embargo:
● No es open source
– Su licencia, aunque permisiva, restringe su uso● No admite tantos tpos de capas● ¿Rapidez? Si quieres las capas de Google, van a ir igual de rápido en
OpenLayers!
– Además, podrás superponer las capas que quieras
Añadiendo capasAñadiendo capas
Capas de GoogleCapas de Google
● OpenLayers incluye un tpo especial de capa para ver las capas públicas de Google
● OpenLayers.Layer.Google y OpenLayers.Layer.Google.v3
● Dado que la versión 2.X del API de Google Maps está deprecada utlizaremos la v3
Capas de GoogleCapas de Google
● OpenLayers incluye un tpo especial de capa para ver las capas públicas de Google
● OpenLayers.Layer.Google y OpenLayers.Layer.Google.v3
● Dado que la versión 2.X del API de Google Maps está deprecada utlizaremos la v3
Añadiendo capasAñadiendo capas
Capas de GoogleCapas de Google● Partmos del fchero curso-2.html
● Primero hay que importar el API de Google Maps
● Con el API v2 hacía falta un API Key, ahora ya no
Capas de GoogleCapas de Google● Partmos del fchero curso-2.html
● Primero hay que importar el API de Google Maps
● Con el API v2 hacía falta un API Key, ahora ya no
<head>.........<script src="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></script><script type="text/javascript" src="openlayers/lib/OpenLayers.js"></script>.........</head>
Añadiendo capasAñadiendo capas
Capas de GoogleCapas de Google● Creamos las capas, igual que en el primer ejemplo, y las añadimos al mapa
Capas de GoogleCapas de Google● Creamos las capas, igual que en el primer ejemplo, y las añadimos al mapa
var fisica = new OpenLayers.Layer.Google( "Google Física", {type: google.maps.MapTypeId.TERRAIN} ); var mapa = new OpenLayers.Layer.Google( "Google Mapa", {numZoomLevels: 20} ); var hibrida = new OpenLayers.Layer.Google( "Google Híbrida", {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20} ); var satelite = new OpenLayers.Layer.Google( "Google Satélite", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22} ); map.addLayers([fisica, mapa, hibrida, satelite]);
Añadiendo capasAñadiendo capas
Capas de GoogleCapas de Google● Fíjate:
● Añadimos las capas todas a la vez, mediante el método addLayers() de la clase OpenLayers.Map
● Recibe como parámetro un array de capas
– A diferencia del método addLayer() que recibe una capa● El orden en que se añaden es el orden en que están contenidas en el
array
– Importante en cuanto a la superposición de capas (z-index)
Capas de GoogleCapas de Google● Fíjate:
● Añadimos las capas todas a la vez, mediante el método addLayers() de la clase OpenLayers.Map
● Recibe como parámetro un array de capas
– A diferencia del método addLayer() que recibe una capa● El orden en que se añaden es el orden en que están contenidas en el
array
– Importante en cuanto a la superposición de capas (z-index)
Añadiendo capasAñadiendo capas
Capas de GoogleCapas de Google● El constructor recibe los parámetros:
● name: nombre arbitrario que le damos a la capa → “Google Fisica”, ...
● optons: opciones para la capa de Google:
– Necesitamos el tpo de capa, o se aplicará el valor por defecto (capa de Mapa, google.maps.MapTypeId.TERRAIN)
● Son tpos defnidos por el API de Google Maps– Se le puede indicar el número de niveles de zoom a cada capa
Capas de GoogleCapas de Google● El constructor recibe los parámetros:
● name: nombre arbitrario que le damos a la capa → “Google Fisica”, ...
● optons: opciones para la capa de Google:
– Necesitamos el tpo de capa, o se aplicará el valor por defecto (capa de Mapa, google.maps.MapTypeId.TERRAIN)
● Son tpos defnidos por el API de Google Maps– Se le puede indicar el número de niveles de zoom a cada capa
Añadiendo capasAñadiendo capas
Capas de GoogleCapas de Google● Para establecer el centro del mapa, tenemos que tener en cuenta que
la proyección de las capas de Google es distnta a la del primer ejemplo, ya no usa lattud/longitud en grados● Todo mapa y toda capa tenen una proyección● Toda proyección tene un identfcador● Indica cómo se proyecta la información espacial (3D) en el mapa (2D)● Si no se indica nada, OpenLayers utlizará la EPSG:4326● No las hay mejores ni peores, sino más o menos adecuadas para cada
caso o trozo de planeta
Capas de GoogleCapas de Google● Para establecer el centro del mapa, tenemos que tener en cuenta que
la proyección de las capas de Google es distnta a la del primer ejemplo, ya no usa lattud/longitud en grados● Todo mapa y toda capa tenen una proyección● Toda proyección tene un identfcador● Indica cómo se proyecta la información espacial (3D) en el mapa (2D)● Si no se indica nada, OpenLayers utlizará la EPSG:4326● No las hay mejores ni peores, sino más o menos adecuadas para cada
caso o trozo de planeta
Añadiendo capasAñadiendo capas
Capas de GoogleCapas de Google● Las capas de Google, así como las de Yahoo, Bing, y otros, están en la
proyección conocida como Spherical Mercator
● También se conoce como EPSG:900913 (aunque nombre el ofcial es EPSG:3785)– WTF!? La explicación es sencilla: 900913 ↔ GOOGLE, y se utliza porque se llamó así
extraofcialmente primero
● Al contrario que otras, trata la Tierra como una esfera, no como un elipsoide
● Si se utliza alguna capa en esta proyección, los elementos (→ capas) que se superpongan han de estar en esa proyección (o reproyectados a ella)
Capas de GoogleCapas de Google● Las capas de Google, así como las de Yahoo, Bing, y otros, están en la
proyección conocida como Spherical Mercator
● También se conoce como EPSG:900913 (aunque nombre el ofcial es EPSG:3785)– WTF!? La explicación es sencilla: 900913 ↔ GOOGLE, y se utliza porque se llamó así
extraofcialmente primero
● Al contrario que otras, trata la Tierra como una esfera, no como un elipsoide
● Si se utliza alguna capa en esta proyección, los elementos (→ capas) que se superpongan han de estar en esa proyección (o reproyectados a ella)
Añadiendo capasAñadiendo capas
Capas de GoogleCapas de Google● En términos práctcos:
● Hay que reproyectar el centro que se le pasa al mapa
– Valdría pasárselo ya en la proyección de Google, pero no es habitual manejar la información geográfca en esa proyección
● ¿Cómo?
– OpenLayers incluye métodos para reproyectar datos vectoriales (nunca ráster!) entre las proyecciones más habituales
● Para otras, se puede integrar fácilmente la librería proj4js (htp://proj4js.org/)
Capas de GoogleCapas de Google● En términos práctcos:
● Hay que reproyectar el centro que se le pasa al mapa
– Valdría pasárselo ya en la proyección de Google, pero no es habitual manejar la información geográfca en esa proyección
● ¿Cómo?
– OpenLayers incluye métodos para reproyectar datos vectoriales (nunca ráster!) entre las proyecciones más habituales
● Para otras, se puede integrar fácilmente la librería proj4js (htp://proj4js.org/)
Añadiendo capasAñadiendo capas
Capas de GoogleCapas de Google● El establecimiento del centro del mapa queda así:
● El método transform() de la clase LonLat recibe 2 parámetros:
● La proyección “original”● La proyección “destno”
● El método map.getProjectonObject() devolverá la proyección EPSG:900913 (pruébalo en el Firebug!)
Capas de GoogleCapas de Google● El establecimiento del centro del mapa queda así:
● El método transform() de la clase LonLat recibe 2 parámetros:
● La proyección “original”● La proyección “destno”
● El método map.getProjectonObject() devolverá la proyección EPSG:900913 (pruébalo en el Firebug!)
map.setCenter(new OpenLayers.LonLat(-8, 42.8).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ), 8);
Añadiendo capasAñadiendo capas
Capas de GoogleCapas de Google● Por últmo, para poder cambiar de capas, añadimos el control:
● Los controles extenden la jerarquía OpenLayers.Control
● Hay muchos predefnidos, entre ellos éste, el LayerSwitcher:
● Como su nombre indica, crea un selector de clases● Veremos algunos otros más adelante
● Fíjate cómo los controles, al igual que las capas, las gestona el objeto OpenLayers.Map
Capas de GoogleCapas de Google● Por últmo, para poder cambiar de capas, añadimos el control:
● Los controles extenden la jerarquía OpenLayers.Control
● Hay muchos predefnidos, entre ellos éste, el LayerSwitcher:
● Como su nombre indica, crea un selector de clases● Veremos algunos otros más adelante
● Fíjate cómo los controles, al igual que las capas, las gestona el objeto OpenLayers.Map
map.addControl(new OpenLayers.Control.LayerSwitcher());
Añadiendo capasAñadiendo capas
Capas de GoogleCapas de Google● El resultado (en htp://localhost/curso-openlayers/curso-2.html):
Capas de GoogleCapas de Google● El resultado (en htp://localhost/curso-openlayers/curso-2.html):
Añadiendo capasAñadiendo capas
Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth)• Al igual que Google, Bing proporciona un API para trabajar con mapas
➔ htp://www.microsof.com/maps/developers/• Presenta también los mismos inconvenientes:
• Código cerrado• API menos madura que la de Google
• Y que la de OpenLayers• También se pueden incluir capas de Bing con OpenLayers!
Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth)• Al igual que Google, Bing proporciona un API para trabajar con mapas
➔ htp://www.microsof.com/maps/developers/• Presenta también los mismos inconvenientes:
• Código cerrado• API menos madura que la de Google
• Y que la de OpenLayers• También se pueden incluir capas de Bing con OpenLayers!
Añadiendo capasAñadiendo capas
Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth)• De nuevo, haremos un ejemplo sencillo:
Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth)• De nuevo, haremos un ejemplo sencillo:
Añadiendo capasAñadiendo capas
Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth)• Partmos del código proporcionado por el fchero curso-3.html
• Idéntco al del ejercicio anterior• Como en el ejemplo de Google, tenemos que importar el API de Bing
Maps:
Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth)• Partmos del código proporcionado por el fchero curso-3.html
• Idéntco al del ejercicio anterior• Como en el ejemplo de Google, tenemos que importar el API de Bing
Maps:
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script><script type="text/javascript" src="openlayers/lib/OpenLayers.js"></script>
Añadiendo capasAñadiendo capas
Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth)• La forma de crear las capas es idéntca a la de las capas de Google:
• Los tpos de capa, de nuevo, los defne la librería externa (Bing Maps)
Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth)• La forma de crear las capas es idéntca a la de las capas de Google:
• Los tpos de capa, de nuevo, los defne la librería externa (Bing Maps)
var mapa = new OpenLayers.Layer.VirtualEarth("Mapa", {type: VEMapStyle.Shaded
});var hibrida = new OpenLayers.Layer.VirtualEarth("Híbrida", {
type: VEMapStyle.Hybrid});var aerea = new OpenLayers.Layer.VirtualEarth("Aérea", {
type: VEMapStyle.Aerial});map.addLayers([mapa, hibrida, aerea]);
Añadiendo capasAñadiendo capas
Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth)• Por últmo, añadimos el LayerSwitcher y centramos el mapa:
Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth)• Por últmo, añadimos el LayerSwitcher y centramos el mapa:
map.setCenter(new OpenLayers.LonLat(-8, 42.8), 8);map.addControl(new OpenLayers.Control.LayerSwitcher());
Añadiendo capasAñadiendo capas
Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth)• Fíjate que el centro lo establecemos en lattud / longitud
• Los mapas de Bing se cargan en EPSG:4326, a no ser que se indique lo contrario
➔ Habría que indicarlo en las opciones de las capas:
• En ese caso habría que transformar las coordenadas igual que hicimos con las capas de Google
Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth)• Fíjate que el centro lo establecemos en lattud / longitud
• Los mapas de Bing se cargan en EPSG:4326, a no ser que se indique lo contrario
➔ Habría que indicarlo en las opciones de las capas:
• En ese caso habría que transformar las coordenadas igual que hicimos con las capas de Google
var mapa = new OpenLayers.Layer.VirtualEarth("Mapa", {type: VEMapStyle.Shaded,sphericalMercator: true
});
Añadiendo capasAñadiendo capas
Capas de OpenStreetMapCapas de OpenStreetMap• ¿Qué es OpenStreetMap?
Capas de OpenStreetMapCapas de OpenStreetMap• ¿Qué es OpenStreetMap?
Añadiendo capasAñadiendo capas
Capas de OpenStreetMapCapas de OpenStreetMap• ¿Qué es OpenStreetMap?
● htp://www.openstreetmap.org/ :
“Es un mapa libremente editable por todo el mundo. Está hecho por personas como usted.”
• Además de tener una interfaz propia en la web, publica sus capas para que cualquiera pueda mostrarlas y verlas (y de hecho editarlas)
Capas de OpenStreetMapCapas de OpenStreetMap• ¿Qué es OpenStreetMap?
● htp://www.openstreetmap.org/ :
“Es un mapa libremente editable por todo el mundo. Está hecho por personas como usted.”
• Además de tener una interfaz propia en la web, publica sus capas para que cualquiera pueda mostrarlas y verlas (y de hecho editarlas)
Añadiendo capasAñadiendo capas
Capas de OpenStreetMapCapas de OpenStreetMap• OpenLayers incorpora un tpo de capa específco para OSM
• Para este ejemplo partmos del código proporcionado en el fchero curso-4.html.
• Añadimos simplemente lo siguiente:
Capas de OpenStreetMapCapas de OpenStreetMap• OpenLayers incorpora un tpo de capa específco para OSM
• Para este ejemplo partmos del código proporcionado en el fchero curso-4.html.
• Añadimos simplemente lo siguiente:
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");map.addLayer(layer);map.setCenter(new OpenLayers.LonLat(-8, 42.8).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ), 8);
Añadiendo capasAñadiendo capas
Capas de OpenStreetMapCapas de OpenStreetMap• Fíjate:
• Necesitamos transformar las coordenadas porque OSM sirve sus capas en EPSG:900913
• El resultado:
Capas de OpenStreetMapCapas de OpenStreetMap• Fíjate:
• Necesitamos transformar las coordenadas porque OSM sirve sus capas en EPSG:900913
• El resultado:
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS• WFS: Web Feature Service
• Estándar OGC• Permite recuperar las propias geometrías y los atributos de las
entdades
entdad ↔ feature
• OpenLayers incorpora un tpo de capa especial, pero está deprecada• Lo mejor es utlizar una capa Vector con un protocolo WFS
Capas WFSCapas WFS• WFS: Web Feature Service
• Estándar OGC• Permite recuperar las propias geometrías y los atributos de las
entdades
entdad ↔ feature
• OpenLayers incorpora un tpo de capa especial, pero está deprecada• Lo mejor es utlizar una capa Vector con un protocolo WFS
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS• Varias cosas a tener en cuenta en este ejemplo:
Necesidad de un proxy
• El funcionamiento de OpenLayers es el siguiente
1. El navegador carga el html
Capas WFSCapas WFS• Varias cosas a tener en cuenta en este ejemplo:
Necesidad de un proxy
• El funcionamiento de OpenLayers es el siguiente
1. El navegador carga el html
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS2. OpenLayers dibuja el mapa y carga las capas
Hasta ahora, el navegador (a través de OpenLayers) sólo pidió imágenes a servidores externos
• Al realizar petciones XMLHTTPRequests, las restricciones del navegador sólo dejan hacerlo al mismo servidor:puerto de la página
Capas WFSCapas WFS2. OpenLayers dibuja el mapa y carga las capas
Hasta ahora, el navegador (a través de OpenLayers) sólo pidió imágenes a servidores externos
• Al realizar petciones XMLHTTPRequests, las restricciones del navegador sólo dejan hacerlo al mismo servidor:puerto de la página
...
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS¿Cómo hacemos entonces para pedir features (geometrías + propiedades = XML, GML, texto...)?
➔ A través de un proxy en la máquina que sirve la página que contene el mapa de OpenLayers
• OpenLayers.org proporciona un proxy CGI escrito en Pythonhtp://trac.osgeo.org/openlayers/browser/trunk/openlayers/examples/proxy.cgi?format=txt
• Instalarlo en el servidor web➔ Instrucciones: htp://trac.osgeo.org/openlayers/wiki/FrequentlyAskedQuestons#ProxyHost
Capas WFSCapas WFS¿Cómo hacemos entonces para pedir features (geometrías + propiedades = XML, GML, texto...)?
➔ A través de un proxy en la máquina que sirve la página que contene el mapa de OpenLayers
• OpenLayers.org proporciona un proxy CGI escrito en Pythonhtp://trac.osgeo.org/openlayers/browser/trunk/openlayers/examples/proxy.cgi?format=txt
• Instalarlo en el servidor web➔ Instrucciones: htp://trac.osgeo.org/openlayers/wiki/FrequentlyAskedQuestons#ProxyHost
Añadiendo capasAñadiendo capas
Capas WFSCapas WFSTodavía falta una cosa...
• ¿Cómo sabe OpenLayers dónde está el proxy?
● Estableciendo la variable OpenLayers.ProxyHost a la ruta relatva al proxy
● A partr de ahí, cualquier petción gestonada por OpenLayers susceptble de necesitar pasar por un proxy lo hará correctamente
Capas WFSCapas WFSTodavía falta una cosa...
• ¿Cómo sabe OpenLayers dónde está el proxy?
● Estableciendo la variable OpenLayers.ProxyHost a la ruta relatva al proxy
● A partr de ahí, cualquier petción gestonada por OpenLayers susceptble de necesitar pasar por un proxy lo hará correctamente
Añadiendo capasAñadiendo capas
Capas WFSCapas WFSAl grano.
• Partremos del código de curso-5.html.
• Como dijimos, lo primero es establecer dónde está nuestro proxy
● En Ubuntu, Windows con XAMPP y Mac con MAMP está en "/cgi-bin/proxy.cgi?url="
Capas WFSCapas WFSAl grano.
• Partremos del código de curso-5.html.
• Como dijimos, lo primero es establecer dónde está nuestro proxy
● En Ubuntu, Windows con XAMPP y Mac con MAMP está en "/cgi-bin/proxy.cgi?url="
<script type="text/javascript"> var map; OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url="; function init() {....
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS• Dado que nuestra capa WFS sólo contene features de los EEUU,
vamos a crear una capa base WMS primero
• Así conseguimos una imagen de fondo de referencia
Capas WFSCapas WFS• Dado que nuestra capa WFS sólo contene features de los EEUU,
vamos a crear una capa base WMS primero
• Así conseguimos una imagen de fondo de referencia
var base = new OpenLayers.Layer.WMS("Capa base", "http://tilecache.osgeo.org/wms-c/Basic.py", {layers: "basic"} ); map.addLayer(base);
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS• Creamos la capa WFS, a la cual le pasamos algunas opciones nuevas
que explicamos a contnuación
Capas WFSCapas WFS• Creamos la capa WFS, a la cual le pasamos algunas opciones nuevas
que explicamos a contnuación
var wfs = new OpenLayers.Layer.Vector("Capa WFS", { strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.WFS({ url: "http://demo.opengeo.org/geoserver/wfs", featureType: "states", featureNS: "http://www.openplans.org/topp" }) }); map.addLayer(wfs);
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS• Fíjate:
• La capa es en realidad una capa Vector• El que sea WFS, KML, GML, etc. lo establece el protocolo
• Esto se debe a una decisión de diseño que tomaron los desarrolladores de la librería
• El número de capas aumenta constantemente• Muchas comparten la naturaleza vectorial➔ Simplifcación de la librería
Capas WFSCapas WFS• Fíjate:
• La capa es en realidad una capa Vector• El que sea WFS, KML, GML, etc. lo establece el protocolo
• Esto se debe a una decisión de diseño que tomaron los desarrolladores de la librería
• El número de capas aumenta constantemente• Muchas comparten la naturaleza vectorial➔ Simplifcación de la librería
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS• La estrategia:
• Indica a OpenLayers cómo solicitar las features• Al utlizar la estrategia Fixed, OpenLayers pedirá todas las
features existentes sólo una vez• Si utlizásemos la estrategia BBOX, OpenLayers solicitaría
features dentro del marco que se está visualizando• En este ejemplo es asumible utlizar Fixed porque:
• Son pocas features• Somos muchos a la vez :) (menos petciones)
Capas WFSCapas WFS• La estrategia:
• Indica a OpenLayers cómo solicitar las features• Al utlizar la estrategia Fixed, OpenLayers pedirá todas las
features existentes sólo una vez• Si utlizásemos la estrategia BBOX, OpenLayers solicitaría
features dentro del marco que se está visualizando• En este ejemplo es asumible utlizar Fixed porque:
• Son pocas features• Somos muchos a la vez :) (menos petciones)
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS● Existen otras (Fixed, Filter, Refresh, Save...)● Combinables● Algunas sirven para otras cosas
– Save: permite guardar cambios en el servidor– Refresh: permite recargar manualmente o por intervalos las
features– ...
Capas WFSCapas WFS● Existen otras (Fixed, Filter, Refresh, Save...)● Combinables● Algunas sirven para otras cosas
– Save: permite guardar cambios en el servidor– Refresh: permite recargar manualmente o por intervalos las
features– ...
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS● El protocolo WFS:
● Recibe parámetros parecidos a los que recibe una capa WMS
Capas WFSCapas WFS● El protocolo WFS:
● Recibe parámetros parecidos a los que recibe una capa WMS
protocol: new OpenLayers.Protocol.WFS({ url: "http://demo.opengeo.org/geoserver/wfs", featureType: "states", featureNS: "http://www.openplans.org/topp" })...
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS● url: la URL del servicio WFS → "http://demo.opengeo.org/geoserver/wfs"
● featureType: el tpo de feature (equivalente a la capa concreta en las capas WMS) → "states"
● featureNS: el namespace del tpo de feature (cada tpo de feature se defne en un espacio de nombres) → "http://www.openplans.org/topp"
● Con esto, OpenLayers tene sufciente para pedir y dibujar la capa
Capas WFSCapas WFS● url: la URL del servicio WFS → "http://demo.opengeo.org/geoserver/wfs"
● featureType: el tpo de feature (equivalente a la capa concreta en las capas WMS) → "states"
● featureNS: el namespace del tpo de feature (cada tpo de feature se defne en un espacio de nombres) → "http://www.openplans.org/topp"
● Con esto, OpenLayers tene sufciente para pedir y dibujar la capa
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS● Por últmo, establecemos el viewport y añadimos el selector de capas
● Fíjate:
● Ahora, en lugar de establecer el centro, defnimos directamente el campo de visión con el método zoomToExtent()
– Recibe como parámetro un objeto OpenLayers.Bounds, que defne un rectángulo a través de minx, miny, maxx, maxy
Capas WFSCapas WFS● Por últmo, establecemos el viewport y añadimos el selector de capas
● Fíjate:
● Ahora, en lugar de establecer el centro, defnimos directamente el campo de visión con el método zoomToExtent()
– Recibe como parámetro un objeto OpenLayers.Bounds, que defne un rectángulo a través de minx, miny, maxx, maxy
map.zoomToExtent(new OpenLayers.Bounds(-140.4, 25.1, -44.4, 50.5)); map.addControl(new OpenLayers.Control.LayerSwitcher());
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS● El resultado:
Capas WFSCapas WFS● El resultado:
Añadiendo capasAñadiendo capas
Capas WFSCapas WFS● Fíjate:
● La petción (mira el Firebug!) no recibe una imagen como con las capas WMS, recibe un XML con las geometrías
● Es OpenLayers quien renderiza al vuelo la imagen a partr de los datos
● El estlo utlizado es el que viene por defecto, pero se puede confgurar
Capas WFSCapas WFS● Fíjate:
● La petción (mira el Firebug!) no recibe una imagen como con las capas WMS, recibe un XML con las geometrías
● Es OpenLayers quien renderiza al vuelo la imagen a partr de los datos
● El estlo utlizado es el que viene por defecto, pero se puede confgurar
Introducción a OpenLayersIntroducción a OpenLayers
Qué vamos a verQué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capas
➔ ControlesControles
➔ Interacción con el servidor
(a través de estándares OGC)
Qué vamos a verQué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capas
➔ ControlesControles
➔ Interacción con el servidor
(a través de estándares OGC)
ControlesControles
Introducción a los ControlesIntroducción a los Controles
Muy bonito Xurxo, pero... ¿ahora qué?● Controles: permiten interactuar con el mapa .
➢ Extenden a la clase: OpenLayers.Control● Paneles: agregación de controles.
➢ Extenden a la clase: OpenLayers.Panel
Introducción a los ControlesIntroducción a los Controles
Muy bonito Xurxo, pero... ¿ahora qué?● Controles: permiten interactuar con el mapa .
➢ Extenden a la clase: OpenLayers.Control● Paneles: agregación de controles.
➢ Extenden a la clase: OpenLayers.Panel
ControlesControles
Introducción a los ControlesIntroducción a los Controles● ¿Quién puso eso ahí?
Introducción a los ControlesIntroducción a los Controles● ¿Quién puso eso ahí?
ControlesControles
Introducción a los ControlesIntroducción a los Controles● Por defecto, si no se añade explícitamente ningún
control al mapa, éste se inicializa con 4 controles:● OpenLayers.Control.ArgParser : Lee los parámetros de la URL y actualiza el
mapa.
● OpenLayers.Control.Atributon : muestra las atribuciones de los mapas consultados (propiedad 'atributon' de OpenLayers.Layer).
● OpenLayers.Control.PanZoom : agregación de dos controles: PanPanel y ZoomPanel.
● OpenLayers.Control.Navigaton : permite controlar la visualización del mapa a través del ratón.
Introducción a los ControlesIntroducción a los Controles● Por defecto, si no se añade explícitamente ningún
control al mapa, éste se inicializa con 4 controles:● OpenLayers.Control.ArgParser : Lee los parámetros de la URL y actualiza el
mapa.
● OpenLayers.Control.Atributon : muestra las atribuciones de los mapas consultados (propiedad 'atributon' de OpenLayers.Layer).
● OpenLayers.Control.PanZoom : agregación de dos controles: PanPanel y ZoomPanel.
● OpenLayers.Control.Navigaton : permite controlar la visualización del mapa a través del ratón.
ControlesControles
Otros controles predefnidos Otros controles predefnidos ● OpenLayers.Control.KeyboardDefaults : para navegar por el mapa mediante el teclado (fechas, +/-,...)
● OpenLayers.Control.PanZoomBar : dibuja una barra de zoom que permite acercar y alejar el mapa.
● OpenLayers.Control.PanPanel : dibuja unos botones dentro del visor para desplazar el mapa.
● OpenLayers.Control.ZoomPanel : agregación de los tres controles que gestonan el nivel de zoom : OpenLayers.Control.ZoomIn, OpenLayers.Control.ZoomToMaxExtent, OpenLayers.Control.ZoomOut.
● OpenLayers.Control.Permalink : crea un enlace a la visualización actual del mapa.
● OpenLayers.Control.MousePositon : indica la posición del cursor en el mapa.
● OpenLayers.Control.OverviewMap : mapa de referencia en la esquina inferior derecha del mapa.
● OpenLayers.Control.LayerSwitcher : permite ver la leyenda del mapa, mostrando las capas disponibles y permitendo elegir las que se desean visualizar.
● OpenLayers.Control.Measure : permite medir tanto distancias como áreas dentro del visor.
● ...
Otros controles predefnidos Otros controles predefnidos ● OpenLayers.Control.KeyboardDefaults : para navegar por el mapa mediante el teclado (fechas, +/-,...)
● OpenLayers.Control.PanZoomBar : dibuja una barra de zoom que permite acercar y alejar el mapa.
● OpenLayers.Control.PanPanel : dibuja unos botones dentro del visor para desplazar el mapa.
● OpenLayers.Control.ZoomPanel : agregación de los tres controles que gestonan el nivel de zoom : OpenLayers.Control.ZoomIn, OpenLayers.Control.ZoomToMaxExtent, OpenLayers.Control.ZoomOut.
● OpenLayers.Control.Permalink : crea un enlace a la visualización actual del mapa.
● OpenLayers.Control.MousePositon : indica la posición del cursor en el mapa.
● OpenLayers.Control.OverviewMap : mapa de referencia en la esquina inferior derecha del mapa.
● OpenLayers.Control.LayerSwitcher : permite ver la leyenda del mapa, mostrando las capas disponibles y permitendo elegir las que se desean visualizar.
● OpenLayers.Control.Measure : permite medir tanto distancias como áreas dentro del visor.
● ...
ControlesControles
Ejemplo 1Ejemplo 1
Añadimos más controles al visor
Ejemplo 1Ejemplo 1
Añadimos más controles al visorfunction init() { var map = new OpenLayers.Map( 'map' , {controls: []}); … // CONTROLES map.addControl(new OpenLayers.Control.Navigation()); map.addControl(new OpenLayers.Control.Attribution()); map.addControl(new OpenLayers.Control.PanZoomBar()); map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.ArgParser()); map.addControl(new OpenLayers.Control.Permalink()); map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.OverviewMap()); map.addControl(new OpenLayers.Control.KeyboardDefaults()); map.addControl(new OpenLayers.Control.ScaleLine()); …}
ControlesControles
Ejemplo 1Ejemplo 1● Y a jugar!!!
Ejemplo 1Ejemplo 1● Y a jugar!!!
ControlesControles
Controles de ediciónControles de edición● Estos controles tienen que tener asociada una capa vectorial (
OpenLayers.Layer.Vector) sobre la que se dibujarán los elementos.
● OpenLayers.Control.DrawFeature : permite dibujar polígonos, líneas o puntos.
● OpenLayers.Control.ModifyFeature : permite modificar elementos.
● OpenLayers.Control.SelectFeature : permite seleccionar elementos haciendo click sobre ellos.
● OpenLayers.Control.TransformFeature : permite aplicar transformaciones a elementos
● OpenLayers.Control.EditingToolbar : panel que incorpora los controles de dibujar polígonos, líneas, puntos y navegación.
Controles de ediciónControles de edición● Estos controles tienen que tener asociada una capa vectorial (
OpenLayers.Layer.Vector) sobre la que se dibujarán los elementos.
● OpenLayers.Control.DrawFeature : permite dibujar polígonos, líneas o puntos.
● OpenLayers.Control.ModifyFeature : permite modificar elementos.
● OpenLayers.Control.SelectFeature : permite seleccionar elementos haciendo click sobre ellos.
● OpenLayers.Control.TransformFeature : permite aplicar transformaciones a elementos
● OpenLayers.Control.EditingToolbar : panel que incorpora los controles de dibujar polígonos, líneas, puntos y navegación.
ControlesControles
Ejemplo 2Ejemplo 2
Añadimos controles de edición:
Ejemplo 2Ejemplo 2
Añadimos controles de edición:
function init() { … var vector_layer = new OpenLayers.Layer.Vector( "Editable" ); ...
var edit_panel = new OpenLayers.Control.EditingToolbar(vector_layer); map.addControl(edit_panel); …}
ControlesControles
Ejemplo 2Ejemplo 2
Añadimos un nuevo control al toolbar:
Ejemplo 2Ejemplo 2
Añadimos un nuevo control al toolbar:function init() { … var vector_layer = new OpenLayers.Layer.Vector( "Editable" ); ...
var edit_panel = new OpenLayers.Control.EditingToolbar(vector_layer); var modify_feature_ctrl = new OpenLayers.Control.ModifyFeature(vector_layer,
{ title: "Modify Feature", displayClass: "olControlModifyFeature" }); edit_panel.addControls(modify_feature_ctrl); map.addControl(edit_panel); …}
ControlesControles
Ejemplo 2Ejemplo 2● Y a jugar again!!!
Ejemplo 2Ejemplo 2● Y a jugar again!!!
ControlesControles
Defniendo nuestros propios controlesDefniendo nuestros propios controles● Extender la clase OpenLayers.Control o cualquiera de las clases
de los controles predefinidos.
Defniendo nuestros propios controlesDefniendo nuestros propios controles● Extender la clase OpenLayers.Control o cualquiera de las clases
de los controles predefinidos.
OpenLayers.Control.MiControl = OpenLayers.Class(OpenLayers.Control, { …
}
ControlesControles
Ejemplo 3Ejemplo 3
Control para borrar elementos:
Ejemplo 3Ejemplo 3
Control para borrar elementos:OpenLayers.Control.DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
initialize: function(layer, options) { OpenLayers.Control.prototype.initialize.apply(this, [options]); this.layer = layer; this.handler = new OpenLayers.Handler.Feature( this, layer, {click: this.clickFeature} ); }, clickFeature: function(feature) { this.layer.destroyFeatures([feature]); }, CLASS_NAME: "OpenLayers.Control.DeleteFeature"});
Introducción a OpenLayersIntroducción a OpenLayers
Qué vamos a verQué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capas
➔ Controles
➔ Interacción con el servidor Interacción con el servidor
(a través de estándares OGC)(a través de estándares OGC)
Qué vamos a verQué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capas
➔ Controles
➔ Interacción con el servidor Interacción con el servidor
(a través de estándares OGC)(a través de estándares OGC)
Interacción con el servidorInteracción con el servidor
OGCOGC● Open Geospacial Consortum.
● Organización estandarizadora (1994).● Internacional.● Sin ánimo de lucro.● Persigue, sobre todo, la interoperabilidad de los diferentes
sistemas GIS● +400 miembros.
htp://www.opengeospatal.org/
OGCOGC● Open Geospacial Consortum.
● Organización estandarizadora (1994).● Internacional.● Sin ánimo de lucro.● Persigue, sobre todo, la interoperabilidad de los diferentes
sistemas GIS● +400 miembros.
htp://www.opengeospatal.org/
Interacción con el servidorInteracción con el servidor
Estándares OGCEstándares OGC● GML (Geography Markup Language):
● XML para representar información geográfca.● KML (Keyhole Markup Language):
● XML para representar datos geográfcos en 3D.● WMS (Web Map Server):
● Interfaz para publicar mapas de información georeferenciadas (imágenes).
Estándares OGCEstándares OGC● GML (Geography Markup Language):
● XML para representar información geográfca.● KML (Keyhole Markup Language):
● XML para representar datos geográfcos en 3D.● WMS (Web Map Server):
● Interfaz para publicar mapas de información georeferenciadas (imágenes).
Interacción con el servidorInteracción con el servidor
Estándares OGCEstándares OGC● WFS (Web Feature Service):
● Interfaz para publicar información geoespacial a través de la web (GML sobre HTTP).
● WCS (Web Coverage Service):
● Interfaz para publicar coberturas.● SOS (Sensor Observaton Service):
● Defne el modo de acceso a los sensores a través de la web.● ...
Estándares OGCEstándares OGC● WFS (Web Feature Service):
● Interfaz para publicar información geoespacial a través de la web (GML sobre HTTP).
● WCS (Web Coverage Service):
● Interfaz para publicar coberturas.● SOS (Sensor Observaton Service):
● Defne el modo de acceso a los sensores a través de la web.● ...
Interacción con el servidorInteracción con el servidor
WFSWFS● OGC Web Feature Service Implementaton Specifcaton
● Petciones WFS:
● GetCapabilites: ➢ Ejemplo
● DescribeFeatureType:➢ Ejemplo
● GetFeature:➢ Ejemplo
WFSWFS● OGC Web Feature Service Implementaton Specifcaton
● Petciones WFS:
● GetCapabilites: ➢ Ejemplo
● DescribeFeatureType:➢ Ejemplo
● GetFeature:➢ Ejemplo
Interacción con el servidorInteracción con el servidor
Ejemplo 1: WFS GetFeatureEjemplo 1: WFS GetFeatureEjemplo 1: WFS GetFeatureEjemplo 1: WFS GetFeaturefunction init() { … getFeature_control = new OpenLayers.Control.GetFeature({ protocol: OpenLayers.Protocol.WFS.fromWMSLayer(wms_layer), box: true, hover: false, multipleKey: "shiftKey", toggleKey: "ctrlKey" }); getFeature_control.events.register("featureselected", this, function(e) { select_layer.addFeatures([e.feature]); modify_control.deactivate(); }); getFeature_control.events.register("featureunselected", this, function(e) { select_layer.removeFeatures([e.feature]); }); map.addControl(getFeature_control); getFeature_control.activate(); …}
Interacción con el servidorInteracción con el servidor
Ejemplo 1: WFS GetFeatureEjemplo 1: WFS GetFeature● Y a cambiar el mundo!
Ejemplo 1: WFS GetFeatureEjemplo 1: WFS GetFeature● Y a cambiar el mundo!
Interacción con el servidorInteracción con el servidor
WFS-TWFS-T● Permite cambiar la información en el servidor.
● Ejemplo con OpenLayers:
htp://openlayers.org/dev/examples/wfs-protocol-transactons.html
WFS-TWFS-T● Permite cambiar la información en el servidor.
● Ejemplo con OpenLayers:
htp://openlayers.org/dev/examples/wfs-protocol-transactons.html
Interacción con el servidorInteracción con el servidor
WMSWMS● OGC Web Map Service Implementaton Specifcaton
● Petciones WMS:● GetCapabilites:
➢ Ejemplo● DescribeLayer:
➢ Ejemplo● GetMap:
➢ Ejemplo● GetFeatureInfo:
➢ Ejemplo
WMSWMS● OGC Web Map Service Implementaton Specifcaton
● Petciones WMS:● GetCapabilites:
➢ Ejemplo● DescribeLayer:
➢ Ejemplo● GetMap:
➢ Ejemplo● GetFeatureInfo:
➢ Ejemplo
Interacción con el servidorInteracción con el servidor
Ejemplo 2: WMS GetFeatureInfoEjemplo 2: WMS GetFeatureInfoEjemplo 2: WMS GetFeatureInfoEjemplo 2: WMS GetFeatureInfofunction init() { … info = new OpenLayers.Control.WMSGetFeatureInfo({ url: 'http://v2.suite.opengeo.org/geoserver/ows', title: 'Identify features by clicking', queryVisible: true, eventListeners: { getfeatureinfo: function(event) { if (popup !== undefined) { map.removePopup(popup); } popup = new OpenLayers.Popup.FramedCloud( "chicken", map.getLonLatFromPixel(event.xy), new OpenLayers.Size(50,50), event.text, null, true ); map.addPopup(popup); } } }); map.addControl(info); info.activate(); …}
Interacción con el servidorInteracción con el servidor
Ejemplo 2: WMS GetFeatureInfoEjemplo 2: WMS GetFeatureInfo● Y consultando...
Ejemplo 2: WMS GetFeatureInfoEjemplo 2: WMS GetFeatureInfo● Y consultando...
Introducción a OpenLayersIntroducción a OpenLayers
GraciasGracias por asistir a este curso
Te quedaste geoinquieto...? ►
GraciasGracias por asistir a este curso
Te quedaste geoinquieto...? ►
Introducción a la libreríaIntroducción a la librería
Permanece conectado...Permanece conectado...
►
Permanece conectado...Permanece conectado...
►
Xeoinquedoshttp://xeoinquedos.wordpress.com
http://wiki.osgeo.org/wiki/Geoinquietos_Zona_Norte
: #xeoinquedos
Introducción a la libreríaIntroducción a la librería
Permanece conectado...Permanece conectado...
►
Permanece conectado...Permanece conectado...
►
OSGeo-ESCapítulo Local de la comunidad hispanohablante del OSGeo
(http://wiki.osgeo.org/wiki/Capítulo_Local_de_la_comunidad_hispanohablante)
: #osgeoes
Micho García
: #michogar
Introducción a OpenLayersIntroducción a OpenLayers
Gracias a...Gracias a...Gracias a...Gracias a...
Francisco Puga
: #fpuga
Introducción a OpenLayersIntroducción a OpenLayers
IMPARTIDO POR:
Gracia Fernández López Xurxo Méndez Pérez
[email protected] : #sonxurxo
http://blog.sonxurxo.com
IMPARTIDO POR:
Gracia Fernández López Xurxo Méndez Pérez
[email protected] : #sonxurxo
http://blog.sonxurxo.com
Xeoinquedoshttp://xeoinquedos.wordpress.com
http://wiki.osgeo.org/wiki/Geoinquietos_Zona_Norte
: #xeoinquedos
OSGeo-ES(http://wiki.osgeo.org/wiki/Capítulo_Local_de_la_comunidad_hispanohablante)
: #osgeoes