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

1. Introducción a OpenLayers
Xeoinquedos organiza:
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

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. 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. Introducción a la librería
• ¿Qué es?
• Framework GIS desarrollado en JavaScript para la creación de
mapas web dinámicos

5. Introducción a la librería
• ¿Qué puedo hacer con él?
• Crear mapas interactvos

6. Introducción a la librería
• ¿Qué puedo hacer con él?
• Visualizar información espacial / geográfca

7. Introducción a la librería
• ¿Qué puedo hacer con él?
• Incluir y superponer distntos tpos de capas

8. Introducción a la librería
• ¿Qué puedo hacer con él?
• Editar información espacial / geográfca

9. Introducción a la librería
• ¿Qué puedo hacer con él?
• Interactuar con servicios GIS externos

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. 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. 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. 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. 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. 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. 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. 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. Introducción a la librería
¡Hola Mundo!
• Para verlo necesito:
• Cualquier navegador web

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 creada
3.Crear el archivo “curso-openlayers/curso-1.html”
4.¡A picar código!
* : Ubuntu: /var/www
WAMP-MAMP-XAMP: $SERVER_HOME/htdocs

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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, cosa
que ocurre tras cargar la página
➔ Necesario cuando manipulamos en DOM

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Añadiendo capas
Capas de Google
● El resultado (en htp://localhost/curso-openlayers/curso-2.html):

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. Añadiendo capas
Capas de Bing (VirtualEarth)
• De nuevo, haremos un ejemplo sencillo:

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. 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. 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. 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. Añadiendo capas
Capas de OpenStreetMap
• ¿Qué es OpenStreetMap?

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. 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. Añadiendo capas
Capas de OpenStreetMap
• Fíjate:
• Necesitamos transformar las coordenadas porque OSM sirve sus
capas en EPSG:900913
• El resultado:

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Añadiendo capas
Capas WFS
● El resultado:

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. 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. 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. Controles
Introducción a los Controles
● ¿Quién puso eso ahí?

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. 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. Controles
Ejemplo 1
Añ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. Controles
Ejemplo 1
● Y a jugar!!!

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. Controles
Ejemplo 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);
…
}

83. Controles
Ejemplo 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);
…
}

84. Controles
Ejemplo 2
● Y a jugar again!!!

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. Controles
Ejemplo 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"
});

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. 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. 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. 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. Interacción con el servidor
WFS
● OGC Web Feature Service Implementaton Specifcaton
● Petciones WFS:
● GetCapabilites:
➢ Ejemplo
● DescribeFeatureType:
➢ Ejemplo
● GetFeature:
➢ Ejemplo

92. Interacción con el servidor
Ejemplo 1: WFS GetFeature
function 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. Interacción con el servidor
Ejemplo 1: WFS GetFeature
● Y a cambiar el mundo!

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. Interacción con el servidor
WMS
● OGC Web Map Service Implementaton Specifcaton
● Petciones WMS:
●
GetCapabilites:
➢ Ejemplo
● DescribeLayer:
➢ Ejemplo
● GetMap:
➢ Ejemplo
● GetFeatureInfo:
➢ Ejemplo

96. Interacción con el servidor
Ejemplo 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. Interacción con el servidor
Ejemplo 2: WMS GetFeatureInfo
● Y consultando...

98. Introducción a OpenLayers
Gracias por asistir a este curso
Te quedaste geoinquieto...? ►

99. Introducción a la librería
Permanece conectado...
Xeoinquedos
http://xeoinquedos.wordpress.com
http://wiki.osgeo.org/wiki/Geoinquietos_Zona_Norte
: #xeoinquedos
►

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. Introducción a OpenLayers
Gracias a...
Francisco Puga Micho García
: #fpuga
: #michogar

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. 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