Introducción a OpenLayers Introducción a OpenLayers Xeoinquedos organiza: Xeoinquedos organiza: Curso de introducción a OpenLayers Curso 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 OpenLayers Curso 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
OpenLayers course organized by Xeoinquedos in A Coruña on May 20th. Speakers: Gracia Fernández López & Xurxo Méndez Pérez
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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”
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
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
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
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.