• Author / Uploaded
• Luigui García

• Categories
• HTML
• Servidor web
• Navegador web
• Servidor proxy
• Sistema de Información Geográfica (GIS)

Citation preview

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

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)

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)

Introducción a la librería •

¿Qué es? •

Framework GIS desarrollado en JavaScript para la creación de mapas web dinámicos

Introducción a la librería •

¿Qué puedo hacer con él? •

Crear mapas interactvos

Introducción a la librería •

¿Qué puedo hacer con él? •

Visualizar información espacial / geográfca

Introducción a la librería •

¿Qué puedo hacer con él? •

Incluir y superponer distntos tpos de capas

Introducción a la librería •

¿Qué puedo hacer con él? •

Editar información espacial / geográfca

Introducción a la librería •

¿Qué puedo hacer con él? •

Interactuar con servicios GIS externos

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

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

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

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

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)

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

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

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

Introducción a la librería ¡Hola Mundo! •

Para verlo necesito: •

Cualquier navegador web

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

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

Introducción a la librería ¡Hola Mundo! Partmos de una página base



Curso de OpenLayers - Ejemplo 1 - Capas WMS

Curso de OpenLayers - Ejemplo 1 - Capas WMS



Introducción a la librería ¡Hola Mundo! Incluimos la librería y creamos el mapa y las capas

...............



Introducción a la librería ¡Hola Mundo! ¿Qué estamos haciendo?

•

Enlazamos la librería descargada •

2 opciones: ➔

Un sólo fchero ➔

➔

→

Incluir “OpenLayers-2.10/OpenLayers.js”

Librería desplegada → ➔

para producción para desarrollo (Firebug!)

Incluir “OpenLayers-2.10/lib/OpenLayers.js”

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

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

Introducción a la librería ¡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)

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 que contendrá el mapa OpenLayers se encarga de renderizar el mapa en él

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

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

•

params: parámetros para la petción WMS → {layers: 'basic'}

•

optons: opciones para la capa (en este ejemplo no lo usamos)

→ “htp://vmap0.tles.osgeo.org/wms/vmap”

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

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

Introducción a la librería ¡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

Introducción a la librería ¡Hola Mundo! Sólo falta defnir las dimensiones de nuestro mapa... :

...............

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)

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)

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

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

Añadiendo capas Capas 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

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]);

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)

Añadiendo capas Capas de Google ●

El constructor recibe los parámetros: ●

name: nombre arbitrario que le damos a la capa

●

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 ●

–

→ “Google Fisica”, ...

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

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)

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/)

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!)

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

Añadiendo capas Capas de Google ●

El resultado (en htp://localhost/curso-openlayers/curso-2.html):

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!

Añadiendo capas Capas de Bing (VirtualEarth) •

De nuevo, haremos un ejemplo sencillo:

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:



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)

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());

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

Añadiendo capas Capas de OpenStreetMap •

¿Qué es OpenStreetMap?

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)

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);

Añadiendo capas Capas de OpenStreetMap •

Fíjate: •

•

Necesitamos transformar las coordenadas porque OSM sirve sus capas en EPSG:900913

El resultado:

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

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

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

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

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

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 "/cgibin/proxy.cgi?url="

var map; OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url="; function init() { ....

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

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);

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

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)

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

–

...

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

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

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

Añadiendo capas Capas WFS ●

El resultado:

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

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)

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

Controles Introducción a los Controles ●

¿Quién puso eso ahí?

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.

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.

●

...

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()); … }

Controles Ejemplo 1 ●

Y a jugar!!!

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.

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

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

Controles Ejemplo 2 ●

Y a jugar again!!!

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, { … }

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

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)

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/

Interacción con el servidor Estándares OGC ●

GML (Geography Markup Language): ●

●

KML (Keyhole Markup Language): ●

●

XML para representar información geográfca. 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 servidor Estándares OGC ●

WFS (Web Feature Service): ●

●

WCS (Web Coverage Service): ●

●

Interfaz para publicar coberturas.

SOS (Sensor Observaton Service): ●

●

Interfaz para publicar información geoespacial a través de la web (GML sobre HTTP).

...

Defne el modo de acceso a los sensores a través de la web.

Interacción con el servidor WFS ●

OGC Web Feature Service Implementaton Specifcaton

●

Petciones WFS: ●

GetCapabilites: ➢

●

DescribeFeatureType: ➢

●

Ejemplo Ejemplo

GetFeature: ➢

Ejemplo

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(); … }

Interacción con el servidor Ejemplo 1: WFS GetFeature ●

Y a cambiar el mundo!

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

Interacción con el servidor WMS ●

OGC Web Map Service Implementaton Specifcaton

●

Petciones WMS: ●

GetCapabilites: ➢

●

DescribeLayer: ➢

●

Ejemplo

GetMap: ➢

●

Ejemplo

Ejemplo

GetFeatureInfo: ➢

Ejemplo

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(); … }

Interacción con el servidor Ejemplo 2: WMS GetFeatureInfo ●

Y consultando...

Introducción a OpenLayers

Gracias por asistir a este curso

Te quedaste geoinquieto...? ►

Introducción a la librería

Permanece conectado... Xeoinquedos http://xeoinquedos.wordpress.com http://wiki.osgeo.org/wiki/Geoinquietos_Zona_Norte : #xeoinquedos

►

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

►

Introducción a OpenLayers

Gracias a...

Francisco Puga : #fpuga

Micho García : #michogar

Introducción a OpenLayers

IMPARTIDO POR: Gracia Fernández López [email protected]

Xurxo Méndez Pérez

: #sonxurxo http://blog.sonxurxo.com [email protected]

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