Curso OpenLayers Xeoinquedos

19,406 views

Published on

OpenLayers course organized by Xeoinquedos in A Coruña on May 20th. Speakers: Gracia Fernández López & Xurxo Méndez Pérez

Published in: Technology
3 Comments
6 Likes
Statistics
Notes
  • Buenos días,

    tras leer todo el curso (que por cierto, está muy bien explicado y me ha sido muy útil para lo que quiero hacer) no me ha quedado muy claro cómo grabar datos. Veamos...

    Tengo implementado mi mapa con dos capas: una es la capa base, desde IGN, y la otra es la capa con las funcionalidades de crear líneas, puntos, áreas, etc. También tengo un botón para grabar los cambios, y he seguido los pasos que se comentan en los diferentes ejemplos para intentar guardar los cambios que haga con las herramientas de dibujo.

    El problema es que no sé controlar dónde se guardan estos datos (ni siquiera sé si se están guardando en algún sitio) y tampoco sé cargarlos en el mapa una vez que lo recargo.

    Lo ideal sería que al pinchar sobre el botón de grabación estos datos se guardasen en algún directorio de mi servidor, pudiendo tener control sobre el nombre del archivo para poder guardar en base de datos, ya que necesito tener un mapa distinto por cada registro. De esta forma, los datos se grabarían, y una vez que vuelva a acceder al registro en cuestión se recuperasen y se pintasen directamente en el mapa al abrirse.

    Muchas gracias, enhorabuena por el curso, y un saludo!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Los SIg pasaron de implementacion a configuracion, pues ya todo esta hecho, personalizado... le falta a todos!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • wiiii
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
19,406
On SlideShare
0
From Embeds
0
Number of Embeds
5,677
Actions
Shares
0
Downloads
497
Comments
3
Likes
6
Embeds 0
No embeds

No notes for slide

Curso OpenLayers Xeoinquedos

  1. 1. Introducción a OpenLayers Xeoinquedos organiza: Curso de introducción a OpenLayers 20 de Mayo de 2011Lugar: ETS de Camiños, Canais e Portos – Universidade de A Coruña, Campus de Elviña
  2. 2. Introducción a OpenLayers Qué 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)
  3. 3. Introducción a OpenLayers Qué 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)
  4. 4. Introducción a la librería• ¿Qué es? • Framework GIS desarrollado en JavaScript para la creación de mapas web dinámicos
  5. 5. Introducción a la librería• ¿Qué puedo hacer con él? • Crear mapas interactvos
  6. 6. Introducción a la librería• ¿Qué puedo hacer con él? • Visualizar información espacial / geográfca
  7. 7. Introducción a la librería• ¿Qué puedo hacer con él? • Incluir y superponer distntos tpos de capas
  8. 8. Introducción a la librería• ¿Qué puedo hacer con él? • Editar información espacial / geográfca
  9. 9. Introducción a la librería• ¿Qué puedo hacer con él? • Interactuar con servicios GIS externos
  10. 10. Introducción a la librería• ¿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...
  11. 11. Introducció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
  12. 12. Introducció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
  13. 13. Introducció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
  14. 14. Introducción a la librería ¡Hola Mundo!• Vamos a hacer esto:• Un mapa navegable con una capa simple WMS, obtenida de un servidor externo (osgeo.org)
  15. 15. Introducción a la librería ¡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
  16. 16. Introducción a la librería ¡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...
  17. 17. Introducción a la librería ¡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
  18. 18. Introducción a la librería ¡Hola Mundo!• Para verlo necesito: • Cualquier navegador web
  19. 19. Introducción a la librería ¡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 creada3.Crear el archivo “curso-openlayers/curso-1.html”4.¡A picar código! * : Ubuntu: /var/www WAMP-MAMP-XAMP: $SERVER_HOME/htdocs
  20. 20. Introducción a la librería ¡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
  21. 21. Introducción a la librería ¡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>
  22. 22. Introducción a la librería ¡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>
  23. 23. Introducción a la librería ¡Hola Mundo! ¿Qué estamos haciendo? <script type="text/javascript" src="openlayers/lib/OpenLayers.js"></script>• 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”
  24. 24. Introducción a la librería ¡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
  25. 25. Introducción a la librería ¡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
  26. 26. Introducción a la librería ¡Hola Mundo! Creamos una función init() a la que llamaremos al cargar la página <script type="text/javascript"> var map; function init() { .............. } </script>• En ella metemos el código de inicialización del mapa • La variable map se crea en el scope global (→ debug)
  27. 27. Introducción a la librería ¡Hola Mundo! Creamos el objeto OpenLayers.Map map = new OpenLayers.Map( 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
  28. 28. Introducción a la librería ¡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
  29. 29. Introducción a la librería ¡Hola Mundo! Creamos una capa WMS (objeto que extende de OpenLayers.Layer) var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: basic} ); 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)
  30. 30. Introducción a la librería ¡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
  31. 31. Introducción a la librería ¡Hola Mundo! Tenemos que añadir la capa al mapa y defnir la zona que vamos a visualizar map.addLayer(layer); map.setCenter(new OpenLayers.LonLat(-8, 42.8), 8);• 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
  32. 32. Introducción a la librería ¡Hola Mundo!Por últmo, llamamos al método al cargar la página <body onload="init()"> ............... </body>El método se ejecuta al lanzarse el evento onload, cosaque ocurre tras cargar la página➔ Necesario cuando manipulamos en DOM
  33. 33. Introducción a la librería ¡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>
  34. 34. Introducción a la librería ¡Hola Mundo!● Y listo! Accede a htp://localhost/curso-openlayers/curso-1.html (o equivalente según la instalación del servidor web)
  35. 35. Introducción a OpenLayers Qué 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)
  36. 36. Añadiendo capas Capas 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
  37. 37. Añadiendo capas Capas 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
  38. 38. Añadiendo capas Capas de Google● Partmos del fchero curso-2.html ● Primero hay que importar el API de Google Maps<head>.........<script src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=false"></script><script type="text/javascript" src="openlayers/lib/OpenLayers.js"></script>.........</head> ● Con el API v2 hacía falta un API Key, ahora ya no
  39. 39. Añadiendo capas Capas 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]);
  40. 40. Añadiendo capas Capas 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)
  41. 41. Añadiendo capas Capas 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
  42. 42. Añadiendo capas Capas 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
  43. 43. Añadiendo capas Capas 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)
  44. 44. Añadiendo capas Capas 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/)
  45. 45. Añadiendo capas Capas de Google● El establecimiento del centro del mapa queda así: map.setCenter(new OpenLayers.LonLat(-8, 42.8).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ), 8);● 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!)
  46. 46. Añadiendo capas Capas de Google● Por últmo, para poder cambiar de capas, añadimos el control: map.addControl(new OpenLayers.Control.LayerSwitcher());● 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
  47. 47. Añadiendo capas Capas de Google● El resultado (en htp://localhost/curso-openlayers/curso-2.html):
  48. 48. Añadiendo capas 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!
  49. 49. Añadiendo capas Capas de Bing (VirtualEarth)• De nuevo, haremos un ejemplo sencillo:
  50. 50. Añadiendo capas 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>
  51. 51. Añadiendo capas Capas de Bing (VirtualEarth)• La forma de crear las capas es idéntca a la de las capas de Google: 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]);• Los tpos de capa, de nuevo, los defne la librería externa (Bing Maps)
  52. 52. Añadiendo capas 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());
  53. 53. Añadiendo capas 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: var mapa = new OpenLayers.Layer.VirtualEarth("Mapa", { type: VEMapStyle.Shaded, sphericalMercator: true }); • En ese caso habría que transformar las coordenadas igual que hicimos con las capas de Google
  54. 54. Añadiendo capas Capas de OpenStreetMap• ¿Qué es OpenStreetMap?
  55. 55. Añadiendo capas Capas 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)
  56. 56. Añadiendo capas Capas 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);
  57. 57. Añadiendo capas Capas de OpenStreetMap• Fíjate: • Necesitamos transformar las coordenadas porque OSM sirve sus capas en EPSG:900913 • El resultado:
  58. 58. Añadiendo capas Capas 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
  59. 59. Añadiendo capas Capas 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
  60. 60. Añadiendo capas Capas WFS 2. 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
  61. 61. Añadiendo capas Capas 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 Python htp://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
  62. 62. Añadiendo capas Capas WFS Todaví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
  63. 63. Añadiendo capas Capas WFS Al 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() { ....
  64. 64. Añadiendo capas Capas WFS• Dado que nuestra capa WFS sólo contene features de los EEUU, vamos a crear una capa base WMS primero var base = new OpenLayers.Layer.WMS("Capa base", "http://tilecache.osgeo.org/wms-c/Basic.py", {layers: "basic"} ); map.addLayer(base);• Así conseguimos una imagen de fondo de referencia
  65. 65. Añadiendo capas Capas 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);
  66. 66. Añadiendo capas Capas 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
  67. 67. Añadiendo capas Capas 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)
  68. 68. Añadiendo capas Capas 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 – ...
  69. 69. Añadiendo capas Capas WFS● El protocolo WFS: protocol: new OpenLayers.Protocol.WFS({ url: "http://demo.opengeo.org/geoserver/wfs", featureType: "states", featureNS: "http://www.openplans.org/topp" }) ...● Recibe parámetros parecidos a los que recibe una capa WMS
  70. 70. Añadiendo capas Capas 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
  71. 71. Añadiendo capas Capas WFS● Por últmo, establecemos el viewport y añadimos el selector de capas map.zoomToExtent(new OpenLayers.Bounds(-140.4, 25.1, -44.4, 50.5)); map.addControl(new OpenLayers.Control.LayerSwitcher());● 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
  72. 72. Añadiendo capas Capas WFS● El resultado:
  73. 73. Añadiendo capas Capas 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
  74. 74. Introducción a OpenLayers Qué 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)
  75. 75. Controles Introducció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
  76. 76. Controles Introducción a los Controles● ¿Quién puso eso ahí?
  77. 77. Controles Introducció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.
  78. 78. Controles 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.● ...
  79. 79. Controles Ejemplo 1Añadimos más controles al visor function 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()); … }
  80. 80. Controles Ejemplo 1● Y a jugar!!!
  81. 81. Controles Controles 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.
  82. 82. Controles Ejemplo 2Añ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); … }
  83. 83. Controles Ejemplo 2Añ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); …}
  84. 84. Controles Ejemplo 2● Y a jugar again!!!
  85. 85. Controles Defniendo nuestros propios controles● Extender la clase OpenLayers.Control o cualquiera de las clases de los controles predefinidos. OpenLayers.Control.MiControl = OpenLayers.Class(OpenLayers.Control, { … }
  86. 86. Controles Ejemplo 3Control 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" });
  87. 87. Introducción a OpenLayers Qué 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)
  88. 88. Interacción con el servidor OGC● 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/
  89. 89. Interacción con el servidor Está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).
  90. 90. Interacción con el servidor Está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.● ...
  91. 91. Interacción con el servidor WFS● OGC Web Feature Service Implementaton Specifcaton● Petciones WFS: ● GetCapabilites: ➢ Ejemplo ● DescribeFeatureType: ➢ Ejemplo ● GetFeature: ➢ Ejemplo
  92. 92. Interacción con el servidor Ejemplo 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(); …}
  93. 93. Interacción con el servidor Ejemplo 1: WFS GetFeature● Y a cambiar el mundo!
  94. 94. Interacción con el servidor WFS-T● Permite cambiar la información en el servidor.● Ejemplo con OpenLayers: htp://openlayers.org/dev/examples/wfs-protocol-transactons.html
  95. 95. Interacción con el servidor WMS● OGC Web Map Service Implementaton Specifcaton● Petciones WMS: ● GetCapabilites: ➢ Ejemplo ● DescribeLayer: ➢ Ejemplo ● GetMap: ➢ Ejemplo ● GetFeatureInfo: ➢ Ejemplo
  96. 96. Interacción con el servidorEjemplo 2: WMS GetFeatureInfo function 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(); … }
  97. 97. Interacción con el servidor Ejemplo 2: WMS GetFeatureInfo● Y consultando...
  98. 98. Introducción a OpenLayersGracias por asistir a este curso Te quedaste geoinquieto...? ►
  99. 99. Introducción a la librería Permanece conectado... Xeoinquedos http://xeoinquedos.wordpress.comhttp://wiki.osgeo.org/wiki/Geoinquietos_Zona_Norte : #xeoinquedos ►
  100. 100. Introducción a la librería Permanece conectado... OSGeo-ES Capítulo Local de la comunidad hispanohablante del OSGeo(http://wiki.osgeo.org/wiki/Capítulo_Local_de_la_comunidad_hispanohablante) : #osgeoes ►
  101. 101. Introducción a OpenLayers Gracias a...Francisco Puga Micho García: #fpuga : #michogar
  102. 102. Introducción a OpenLayers IMPARTIDO POR:Gracia Fernández López Xurxo Méndez Pérez graciafdez@gmail.com : #sonxurxo http://blog.sonxurxo.com sonxurxo@gmail.com
  103. 103. Xeoinquedos http://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

×