curso openlayers

Introduccin a OpenLayersIntroduccin a OpenLayers

Xeoinquedos organiza:Xeoinquedos organiza:

Curso de introduccin a OpenLayersCurso de introduccin a OpenLayers

20 de Mayo de 2011

Lugar: ETS de Camios, Canais e Portos Universidade de A Corua, Campus de Elvia

Xeoinquedos organiza:Xeoinquedos organiza:

Curso de introduccin a OpenLayersCurso de introduccin a OpenLayers

20 de Mayo de 2011

Lugar: ETS de Camios, Canais e Portos Universidade de A Corua, Campus de Elvia


Qu vamos a verQu vamos a ver Introduccin a la librera

Aadiendo capas

Controles

Interaccin con el servidor

(a travs de estndares OGC)


Aadiendo capas

Controles




Qu vamos a verQu vamos a ver Introduccin a la libreraIntroduccin a la librera

Aadiendo capas

Controles



Qu vamos a verQu vamos a ver Introduccin a la libreraIntroduccin a la librera

Aadiendo capas

Controles



Introduccin a la libreraIntroduccin a la librera

Qu es?

Framework GIS desarrollado en JavaScript para la creacin de

mapas web dinmicos

Qu es?

Framework GIS desarrollado en JavaScript para la creacin de

mapas web dinmicos


Qu puedo hacer con l?

Crear mapas interactvos


Crear mapas interactvos



Visualizar informacin espacial / geogrfca


Visualizar informacin espacial / geogrfca



Incluir y superponer distntos tpos de capas


Incluir y superponer distntos tpos de capas



Editar informacin espacial / geogrfca


Editar informacin espacial / geogrfca



Interactuar con servicios GIS externos


Interactuar con servicios GIS externos

Cmo lo hace?

Arquitectura modular

Capas WMS, Vector, KML, Google, VirtualEarth, Images...

Geometras Point, Polygon, LinearRing...

Controles Zoom, Pan, Measure, Modify...

Formatos WMS, WFS, OSM, KML, GeoJSON, GeoRSS...

Protocolos HTTP, SOS, WFS, SQL...

Cmo lo hace?

Arquitectura modular

Capas WMS, Vector, KML, Google, VirtualEarth, Images...

Geometras Point, Polygon, LinearRing...

Controles Zoom, Pan, Measure, Modify...

Formatos WMS, WFS, OSM, KML, GeoJSON, GeoRSS...

Protocolos HTTP, SOS, WFS, SQL...


Ms...

Creado en 2005 por Metacarta

Licencia estlo BSD (htp://svn.openlayers.org/trunk/openlayers/license.txt)

Actualmente en la versin 2.10 (en breve la 2.11)

Trabajando ya en la versin 3.0

Ms...

Creado en 2005 por Metacarta

Licencia estlo BSD (htp://svn.openlayers.org/trunk/openlayers/license.txt)

Actualmente en la versin 2.10 (en breve la 2.11)

Trabajando ya en la versin 3.0



Dnde encuentro documentacin y ejemplos?

htp://docs.openlayers.org/

Home de la documentacin de OpenLayers

htp://openlayers.org/dev/examples/

Multtud de ejemplos de casi todo lo que puede hacer


htp://docs.openlayers.org/

Home de la documentacin de OpenLayers

htp://openlayers.org/dev/examples/

Multtud de ejemplos de casi todo lo que puede hacer



htp://trac.osgeo.org/openlayers/wiki

Wiki con ejemplos, documentacin, API docs...

Listas de correo (muy actvas):

htp://lists.osgeo.org/mailman/listnfo/openlayers-users

htp://lists.osgeo.org/mailman/listnfo/openlayers-dev


htp://trac.osgeo.org/openlayers/wiki

Wiki con ejemplos, documentacin, API docs...

Listas de correo (muy actvas):

htp://lists.osgeo.org/mailman/listnfo/openlayers-users

htp://lists.osgeo.org/mailman/listnfo/openlayers-dev


Hola Mundo!Hola Mundo! Vamos a hacer esto:

Un mapa navegable con una capa simple WMS, obtenida de un servidor externo (osgeo.org)

Hola Mundo!Hola Mundo! Vamos a hacer esto:

Un mapa navegable con una capa simple WMS, obtenida de un servidor externo (osgeo.org)


Hola Mundo!Hola Mundo! Qu es WMS? WMS = Web Map Service Protocolo estndar OGC que permite servir y consumir

mapas Implementado por casi toda aplicacin GIS Por supuesto, tambin por OpenLayers

Hola Mundo!Hola Mundo! Qu es WMS? WMS = Web Map Service Protocolo estndar OGC que permite servir y consumir

mapas Implementado por casi toda aplicacin GIS Por supuesto, tambin por OpenLayers


Hola Mundo!Hola Mundo! Para hacerlo necesito:

Editor de texto Librera OpenLayers 3 opciones:

Descargar la versin estable htp://openlayers.org/download/OpenLayers-2.10.tar.gz htp://openlayers.org/download/OpenLayers-2.10.zip

Descargar la versin trunk del repositorio Subversion svn checkout htp://svn.openlayers.org/trunk/openlayers/

Utlizar la hosted version, pero cargas contra el servidor de openlayers.org...

Hola Mundo!Hola Mundo! Para hacerlo necesito:

Editor de texto Librera OpenLayers 3 opciones:

Descargar la versin estable htp://openlayers.org/download/OpenLayers-2.10.tar.gz htp://openlayers.org/download/OpenLayers-2.10.zip

Descargar la versin trunk del repositorio Subversion svn checkout htp://svn.openlayers.org/trunk/openlayers/

Utlizar la hosted version, pero cargas contra el servidor de openlayers.org...


Hola Mundo!Hola Mundo! Utlizaremos la versin trunk

Es la ltma, con todas las mejoras aadidas tras la publicacin de la versin 2.10 estable

Soluciona un bug aparecido con Firefox 4 al utlizar OpenLayers en modo debug (se comenta ms adelante)

A da de hoy, es prctcamente igual a la futura 2.11

Hola Mundo!Hola Mundo! Utlizaremos la versin trunk

Es la ltma, con todas las mejoras aadidas tras la publicacin de la versin 2.10 estable

Soluciona un bug aparecido con Firefox 4 al utlizar OpenLayers en modo debug (se comenta ms adelante)

A da de hoy, es prctcamente igual a la futura 2.11


Hola Mundo!Hola Mundo! Para verlo necesito:

Cualquier navegador web

Hola Mundo!Hola Mundo! Para verlo necesito:

Cualquier navegador web


Hola Mundo!Hola Mundo!

Pasos:1.En la carpeta pblica* crear carpeta curso-openlayers/

2.Descomprimir la librera y copiar la carpeta openlayers/ dentro de la carpeta creada

3.Crear el archivo curso-openlayers/curso-1.html

4.A picar cdigo!* : Ubuntu: /var/www

WAMP-MAMP-XAMP: $SERVER_HOME/htdocs


Pasos:1.En la carpeta pblica* crear carpeta curso-openlayers/

2.Descomprimir la librera y copiar la carpeta openlayers/ dentro de la carpeta creada

3.Crear el archivo curso-openlayers/curso-1.html

4.A picar cdigo!* : Ubuntu: /var/www

WAMP-MAMP-XAMP: $SERVER_HOME/htdocs


Hola Mundo!Hola Mundo! Pasos:

Crear estructura del HTML Establecer dimensiones del mapa

Enlazar la librera Crear el mapa

Aadirle capas Aadir controles Establecer centro y nivel de zoom

Hola Mundo!Hola Mundo! Pasos:

Crear estructura del HTML Establecer dimensiones del mapa

Enlazar la librera Crear el mapa

Aadirle capas Aadir controles Establecer centro y nivel de zoom



Partmos de una pgina base


Partmos de una pgina base

Curso de OpenLayers - Ejemplo 1 - Capas WMS Curso de OpenLayers - Ejemplo 1 - Capas WMS



Incluimos la librera y creamos el mapa y las capas


Incluimos la librera y creamos el mapa y las capas

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



Qu estamos haciendo?

Enlazamos la librera descargada 2 opciones:

Un slo fchero para produccin Incluir OpenLayers-2.10/OpenLayers.js

Librera desplegada para desarrollo (Firebug!) Incluir OpenLayers-2.10/lib/OpenLayers.js


Qu estamos haciendo?

Enlazamos la librera descargada 2 opciones:

Un slo fchero para produccin Incluir OpenLayers-2.10/OpenLayers.js

Librera desplegada para desarrollo (Firebug!) Incluir OpenLayers-2.10/lib/OpenLayers.js



Ojo! La versin desplegada carga todos los archivos de

OpenLayers por separado (bueno para debug)

Slo ellos depuran con en modo singlefle


Ojo! La versin desplegada carga todos los archivos de

OpenLayers por separado (bueno para debug)

Slo ellos depuran con en modo singlefle


Hola Mundo!Hola Mundo! Si utlizas Firefox 4... :

La versin 2.10 estable tene un bug con Firefox 4 En modo depuracin, cargando todos los archivos, no los carga bien

Solucin: Utlizar la versin trunk

svn checkout htp://svn.openlayers.org/trunk/openlayers/ Los ejemplos dados para este curso utlizan esta versin

Hola Mundo!Hola Mundo! Si utlizas Firefox 4... :

La versin 2.10 estable tene un bug con Firefox 4 En modo depuracin, cargando todos los archivos, no los carga bien

Solucin: Utlizar la versin trunk

svn checkout htp://svn.openlayers.org/trunk/openlayers/ Los ejemplos dados para este curso utlizan esta versin



Creamos una funcin init() a la que llamaremos al cargar la pgina

En ella metemos el cdigo de inicializacin del mapa La variable map se crea en el scope global ( debug)


Creamos una funcin init() a la que llamaremos al cargar la pgina

En ella metemos el cdigo de inicializacin del mapa La variable map se crea en el scope global ( debug)

var map; function init() {.............. }



Creamos el objeto OpenLayers.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


Creamos el objeto OpenLayers.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

map = new OpenLayers.Map( 'map' );


Hola Mundo!Hola Mundo! Clase OpenLayers.Map

Es la clase fundamental de OpenLayers, representa el mapa

Contene las capas, los controles, la confguracin de visualizacin...

Puede haber varios por pgina

Hola Mundo!Hola Mundo! Clase OpenLayers.Map

Es la clase fundamental de OpenLayers, representa el mapa

Contene las capas, los controles, la confguracin de visualizacin...

Puede haber varios por pgina



Creamos una capa WMS (objeto que extende de OpenLayers.Layer)

Parmetros: name: nombre arbitrario que le damos a la capa OpenLayers WMS url: URL del servicio WMS htp://vmap0.tles.osgeo.org/wms/vmap params: parmetros para la petcin WMS {layers: 'basic'} optons: opciones para la capa (en este ejemplo no lo usamos)


Creamos una capa WMS (objeto que extende de OpenLayers.Layer)

Parmetros: name: nombre arbitrario que le damos a la capa OpenLayers WMS url: URL del servicio WMS htp://vmap0.tles.osgeo.org/wms/vmap params: parmetros para la petcin WMS {layers: 'basic'} optons: opciones para la capa (en este ejemplo no lo usamos)

var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );


Hola Mundo!Hola Mundo! Jerarqua de clases OpenLayers.Layer

Representan las distntas capas que se pueden aadir a un mapa: WMS, WFS, WMTS, Vector, GML, KML, GeoRSS,

Google, OSM, Yahoo, VirtualEarth (Bing)... La confguracin depende del tpo de capa Jerarqua extensible

Hola Mundo!Hola Mundo! Jerarqua de clases OpenLayers.Layer

Representan las distntas capas que se pueden aadir a un mapa: WMS, WFS, WMTS, Vector, GML, KML, GeoRSS,

Google, OSM, Yahoo, VirtualEarth (Bing)... La confguracin depende del tpo de capa Jerarqua extensible



Tenemos que aadir la capa al mapa y defnir la zona que vamos a visualizar

El mtodo 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 cmo dibujar el mapa


Tenemos que aadir la capa al mapa y defnir la zona que vamos a visualizar

El mtodo 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 cmo dibujar el mapa

map.addLayer(layer); map.setCenter(new OpenLayers.LonLat(-8, 42.8), 8);



Por ltmo, llamamos al mtodo al cargar la pgina

El mtodo se ejecuta al lanzarse el evento onload, cosa que ocurre tras cargar la pgina Necesario cuando manipulamos en DOM


Por ltmo, llamamos al mtodo al cargar la pgina

El mtodo se ejecuta al lanzarse el evento onload, cosa que ocurre tras cargar la pgina Necesario cuando manipulamos en DOM

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



Slo falta defnir las dimensiones de nuestro mapa... :


Slo falta defnir las dimensiones de nuestro mapa... :

............... #map { width: 600px; height: 400px; border: 1px solid; }


Hola Mundo!Hola Mundo! Y listo! Accede a htp://localhost/curso-openlayers/curso-1.html (o

equivalente segn la instalacin del servidor web)

Hola Mundo!Hola Mundo! Y listo! Accede a htp://localhost/curso-openlayers/curso-1.html (o

equivalente segn la instalacin del servidor web)



Aadiendo capasAadiendo capas

Controles





Controles




Capas de GoogleCapas de Google Google Maps ofrece su propio API

htp://code.google.com/intl/es/apis/maps/documentaton/javascript/ Sin embargo:

No es open source Su licencia, aunque permisiva, restringe su uso

No admite tantos tpos de capas Rapidez? Si quieres las capas de Google, van a ir igual de rpido en

OpenLayers! Adems, podrs superponer las capas que quieras

Capas de GoogleCapas de Google Google Maps ofrece su propio API

htp://code.google.com/intl/es/apis/maps/documentaton/javascript/ Sin embargo:

No es open source Su licencia, aunque permisiva, restringe su uso

No admite tantos tpos de capas Rapidez? Si quieres las capas de Google, van a ir igual de rpido en

OpenLayers! Adems, podrs superponer las capas que quieras


Capas de GoogleCapas de Google

OpenLayers incluye un tpo especial de capa para ver las capas pblicas de Google

OpenLayers.Layer.Google y OpenLayers.Layer.Google.v3 Dado que la versin 2.X del API de Google Maps est deprecada

utlizaremos la v3

Capas de GoogleCapas de Google

OpenLayers incluye un tpo especial de capa para ver las capas pblicas de Google

OpenLayers.Layer.Google y OpenLayers.Layer.Google.v3 Dado que la versin 2.X del API de Google Maps est deprecada

utlizaremos la v3


Capas de GoogleCapas de Google Partmos del fchero curso-2.html

Primero hay que importar el API de Google Maps

Con el API v2 haca falta un API Key, ahora ya no

Capas de GoogleCapas de Google Partmos del fchero curso-2.html

Primero hay que importar el API de Google Maps

Con el API v2 haca falta un API Key, ahora ya no

.........

.........


Capas de GoogleCapas de Google Creamos las capas, igual que en el primer ejemplo, y las aadimos al mapa

Capas de GoogleCapas de Google Creamos las capas, igual que en el primer ejemplo, y las aadimos al mapa

var fisica = new OpenLayers.Layer.Google( "Google Fsica", {type: google.maps.MapTypeId.TERRAIN} ); var mapa = new OpenLayers.Layer.Google( "Google Mapa", {numZoomLevels: 20} ); var hibrida = new OpenLayers.Layer.Google( "Google Hbrida", {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20} ); var satelite = new OpenLayers.Layer.Google( "Google Satlite", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22} ); map.addLayers([fisica, mapa, hibrida, satelite]);


Capas de GoogleCapas de Google Fjate:

Aadimos las capas todas a la vez, mediante el mtodo addLayers() de la clase OpenLayers.Map

Recibe como parmetro un array de capas A diferencia del mtodo addLayer() que recibe una capa

El orden en que se aaden es el orden en que estn contenidas en el array Importante en cuanto a la superposicin de capas (z-index)

Capas de GoogleCapas de Google Fjate:

Aadimos las capas todas a la vez, mediante el mtodo addLayers() de la clase OpenLayers.Map

Recibe como parmetro un array de capas A diferencia del mtodo addLayer() que recibe una capa

El orden en que se aaden es el orden en que estn contenidas en el array Importante en cuanto a la superposicin de capas (z-index)


Capas de GoogleCapas de Google El constructor recibe los parmetros:

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 nmero de niveles de zoom a cada capa

Capas de GoogleCapas de Google El constructor recibe los parmetros:

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 nmero de niveles de zoom a cada capa


Capas de GoogleCapas de Google Para establecer el centro del mapa, tenemos que tener en cuenta que

la proyeccin 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 proyeccin Toda proyeccin tene un identfcador Indica cmo se proyecta la informacin espacial (3D) en el mapa (2D) Si no se indica nada, OpenLayers utlizar la EPSG:4326 No las hay mejores ni peores, sino ms o menos adecuadas para cada

caso o trozo de planeta

Capas de GoogleCapas de Google Para establecer el centro del mapa, tenemos que tener en cuenta que

la proyeccin 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 proyeccin Toda proyeccin tene un identfcador Indica cmo se proyecta la informacin espacial (3D) en el mapa (2D) Si no se indica nada, OpenLayers utlizar la EPSG:4326 No las hay mejores ni peores, sino ms o menos adecuadas para cada

caso o trozo de planeta


Capas de GoogleCapas de Google Las capas de Google, as como las de Yahoo, Bing, y otros, estn en la

proyeccin conocida como Spherical Mercator

Tambin se conoce como EPSG:900913 (aunque nombre el ofcial es EPSG:3785) WTF!? La explicacin 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 proyeccin, los elementos ( capas) que se superpongan han de estar en esa proyeccin (o reproyectados a ella)

Capas de GoogleCapas de Google Las capas de Google, as como las de Yahoo, Bing, y otros, estn en la

proyeccin conocida como Spherical Mercator

Tambin se conoce como EPSG:900913 (aunque nombre el ofcial es EPSG:3785) WTF!? La explicacin 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 proyeccin, los elementos ( capas) que se superpongan han de estar en esa proyeccin (o reproyectados a ella)


Capas de GoogleCapas de Google En trminos prctcos:

Hay que reproyectar el centro que se le pasa al mapa Valdra pasrselo ya en la proyeccin de Google, pero no es habitual

manejar la informacin geogrfca en esa proyeccin Cmo?

OpenLayers incluye mtodos para reproyectar datos vectoriales (nunca rster!) entre las proyecciones ms habituales

Para otras, se puede integrar fcilmente la librera proj4js (htp://proj4js.org/)

Capas de GoogleCapas de Google En trminos prctcos:

Hay que reproyectar el centro que se le pasa al mapa Valdra pasrselo ya en la proyeccin de Google, pero no es habitual

manejar la informacin geogrfca en esa proyeccin Cmo?

OpenLayers incluye mtodos para reproyectar datos vectoriales (nunca rster!) entre las proyecciones ms habituales

Para otras, se puede integrar fcilmente la librera proj4js (htp://proj4js.org/)


Capas de GoogleCapas de Google El establecimiento del centro del mapa queda as:

El mtodo transform() de la clase LonLat recibe 2 parmetros: La proyeccin original La proyeccin destno

El mtodo map.getProjectonObject() devolver la proyeccin EPSG:900913 (prubalo en el Firebug!)

Capas de GoogleCapas de Google El establecimiento del centro del mapa queda as:

El mtodo transform() de la clase LonLat recibe 2 parmetros: La proyeccin original La proyeccin destno

El mtodo map.getProjectonObject() devolver la proyeccin EPSG:900913 (prubalo en el Firebug!)

map.setCenter(new OpenLayers.LonLat(-8, 42.8).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ), 8);


Capas de GoogleCapas de Google Por ltmo, para poder cambiar de capas, aadimos el control:

Los controles extenden la jerarqua OpenLayers.Control Hay muchos predefnidos, entre ellos ste, el LayerSwitcher:

Como su nombre indica, crea un selector de clases Veremos algunos otros ms adelante

Fjate cmo los controles, al igual que las capas, las gestona el objeto OpenLayers.Map

Capas de GoogleCapas de Google Por ltmo, para poder cambiar de capas, aadimos el control:

Los controles extenden la jerarqua OpenLayers.Control Hay muchos predefnidos, entre ellos ste, el LayerSwitcher:

Como su nombre indica, crea un selector de clases Veremos algunos otros ms adelante

Fjate cmo los controles, al igual que las capas, las gestona el objeto OpenLayers.Map

map.addControl(new OpenLayers.Control.LayerSwitcher());


Capas de GoogleCapas de Google El resultado (en htp://localhost/curso-openlayers/curso-2.html):

Capas de GoogleCapas de Google El resultado (en htp://localhost/curso-openlayers/curso-2.html):


Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth) Al igual que Google, Bing proporciona un API para trabajar con mapas

htp://www.microsof.com/maps/developers/ Presenta tambin los mismos inconvenientes:

Cdigo cerrado API menos madura que la de Google

Y que la de OpenLayers Tambin se pueden incluir capas de Bing con OpenLayers!

Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth) Al igual que Google, Bing proporciona un API para trabajar con mapas

htp://www.microsof.com/maps/developers/ Presenta tambin los mismos inconvenientes:

Cdigo cerrado API menos madura que la de Google

Y que la de OpenLayers Tambin se pueden incluir capas de Bing con OpenLayers!


Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth) De nuevo, haremos un ejemplo sencillo:

Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth) De nuevo, haremos un ejemplo sencillo:


Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth) Partmos del cdigo proporcionado por el fchero curso-3.html

Idntco al del ejercicio anterior Como en el ejemplo de Google, tenemos que importar el API de Bing

Maps:

Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth) Partmos del cdigo proporcionado por el fchero curso-3.html

Idntco al del ejercicio anterior Como en el ejemplo de Google, tenemos que importar el API de Bing

Maps:


Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth) La forma de crear las capas es idntca a la de las capas de Google:

Los tpos de capa, de nuevo, los defne la librera externa (Bing Maps)

Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth) La forma de crear las capas es idntca a la de las capas de Google:

Los tpos de capa, de nuevo, los defne la librera externa (Bing Maps)

var mapa = new OpenLayers.Layer.VirtualEarth("Mapa", {type: VEMapStyle.Shaded

});var hibrida = new OpenLayers.Layer.VirtualEarth("Hbrida", {

type: VEMapStyle.Hybrid});var aerea = new OpenLayers.Layer.VirtualEarth("Area", {

type: VEMapStyle.Aerial});map.addLayers([mapa, hibrida, aerea]);


Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth) Por ltmo, aadimos el LayerSwitcher y centramos el mapa:

Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth) Por ltmo, aadimos el LayerSwitcher y centramos el mapa:

map.setCenter(new OpenLayers.LonLat(-8, 42.8), 8);map.addControl(new OpenLayers.Control.LayerSwitcher());


Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth) Fjate 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

Habra que indicarlo en las opciones de las capas:

En ese caso habra que transformar las coordenadas igual que hicimos con las capas de Google

Capas de Bing (VirtualEarth)Capas de Bing (VirtualEarth) Fjate 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

Habra que indicarlo en las opciones de las capas:

En ese caso habra que transformar las coordenadas igual que hicimos con las capas de Google

var mapa = new OpenLayers.Layer.VirtualEarth("Mapa", {type: VEMapStyle.Shaded,sphericalMercator: true

});


Capas de OpenStreetMapCapas de OpenStreetMap Qu es OpenStreetMap?




htp://www.openstreetmap.org/ :

Es un mapa libremente editable por todo el mundo. Est hecho por personas como usted.

Adems de tener una interfaz propia en la web, publica sus capas para que cualquiera pueda mostrarlas y verlas (y de hecho editarlas)


htp://www.openstreetmap.org/ :

Es un mapa libremente editable por todo el mundo. Est hecho por personas como usted.

Adems de tener una interfaz propia en la web, publica sus capas para que cualquiera pueda mostrarlas y verlas (y de hecho editarlas)


Capas de OpenStreetMapCapas de OpenStreetMap OpenLayers incorpora un tpo de capa especfco para OSM Para este ejemplo partmos del cdigo proporcionado en el fchero

curso-4.html. Aadimos simplemente lo siguiente:

Capas de OpenStreetMapCapas de OpenStreetMap OpenLayers incorpora un tpo de capa especfco para OSM Para este ejemplo partmos del cdigo proporcionado en el fchero

curso-4.html. Aadimos 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);


Capas de OpenStreetMapCapas de OpenStreetMap Fjate:

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

El resultado:

Capas de OpenStreetMapCapas de OpenStreetMap Fjate:

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

El resultado:


Capas WFSCapas WFS WFS: Web Feature Service

Estndar OGC Permite recuperar las propias geometras y los atributos de las

entdades

entdad feature OpenLayers incorpora un tpo de capa especial, pero est

deprecada Lo mejor es utlizar una capa Vector con un protocolo WFS

Capas WFSCapas WFS WFS: Web Feature Service

Estndar OGC Permite recuperar las propias geometras y los atributos de las

entdades

entdad feature OpenLayers incorpora un tpo de capa especial, pero est

deprecada Lo mejor es utlizar una capa Vector con un protocolo WFS


Capas WFSCapas WFS Varias cosas a tener en cuenta en este ejemplo:

Necesidad de un proxy El funcionamiento de OpenLayers es el siguiente

1. El navegador carga el html

Capas WFSCapas WFS Varias cosas a tener en cuenta en este ejemplo:

Necesidad de un proxy El funcionamiento de OpenLayers es el siguiente

1. El navegador carga el html


Capas WFSCapas WFS2. OpenLayers dibuja el mapa y carga las capas

Hasta ahora, el navegador (a travs de OpenLayers) slo pidi imgenes a servidores externos

Al realizar petciones XMLHTTPRequests, las restricciones del navegador slo dejan hacerlo al mismo servidor:puerto de la pgina

Capas WFSCapas WFS2. OpenLayers dibuja el mapa y carga las capas

Hasta ahora, el navegador (a travs de OpenLayers) slo pidi imgenes a servidores externos

Al realizar petciones XMLHTTPRequests, las restricciones del navegador slo dejan hacerlo al mismo servidor:puerto de la pgina

...


Capas WFSCapas WFSCmo hacemos entonces para pedir features (geometras + propiedades = XML, GML, texto...)?

A travs de un proxy en la mquina que sirve la pgina que contene el mapa de OpenLayers

OpenLayers.org proporciona un proxy CGI escrito en Pythonhtp://trac.osgeo.org/openlayers/browser/trunk/openlayers/examples/proxy.cgi?format=txt

Instalarlo en el servidor web Instrucciones: htp://trac.osgeo.org/openlayers/wiki/FrequentlyAskedQuestons#ProxyHost

Capas WFSCapas WFSCmo hacemos entonces para pedir features (geometras + propiedades = XML, GML, texto...)?

A travs de un proxy en la mquina que sirve la pgina que contene el mapa de OpenLayers

OpenLayers.org proporciona un proxy CGI escrito en Pythonhtp://trac.osgeo.org/openlayers/browser/trunk/openlayers/examples/proxy.cgi?format=txt

Instalarlo en el servidor web Instrucciones: htp://trac.osgeo.org/openlayers/wiki/FrequentlyAskedQuestons#ProxyHost


Capas WFSCapas WFSTodava falta una cosa...

Cmo sabe OpenLayers dnde est el proxy? Estableciendo la variable OpenLayers.ProxyHost a la ruta relatva

al proxy A partr de ah, cualquier petcin gestonada por OpenLayers

susceptble de necesitar pasar por un proxy lo har correctamente

Capas WFSCapas WFSTodava falta una cosa...

Cmo sabe OpenLayers dnde est el proxy? Estableciendo la variable OpenLayers.ProxyHost a la ruta relatva

al proxy A partr de ah, cualquier petcin gestonada por OpenLayers

susceptble de necesitar pasar por un proxy lo har correctamente


Capas WFSCapas WFSAl grano.

Partremos del cdigo de curso-5.html. Como dijimos, lo primero es establecer dnde est nuestro proxy

En Ubuntu, Windows con XAMPP y Mac con MAMP est en "/cgi-bin/proxy.cgi?url="

Capas WFSCapas WFSAl grano.

Partremos del cdigo de curso-5.html. Como dijimos, lo primero es establecer dnde est nuestro proxy

En Ubuntu, Windows con XAMPP y Mac con MAMP est en "/cgi-bin/proxy.cgi?url="

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


Capas WFSCapas WFS Dado que nuestra capa WFS slo contene features de los EEUU,

vamos a crear una capa base WMS primero

As conseguimos una imagen de fondo de referencia

Capas WFSCapas WFS Dado que nuestra capa WFS slo contene features de los EEUU,

vamos a crear una capa base WMS primero

As conseguimos una imagen de fondo de referencia

var base = new OpenLayers.Layer.WMS("Capa base", "http://tilecache.osgeo.org/wms-c/Basic.py", {layers: "basic"} ); map.addLayer(base);


Capas WFSCapas WFS Creamos la capa WFS, a la cual le pasamos algunas opciones nuevas

que explicamos a contnuacin

Capas WFSCapas WFS Creamos la capa WFS, a la cual le pasamos algunas opciones nuevas

que explicamos a contnuacin

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


Capas WFSCapas WFS Fjate:

La capa es en realidad una capa Vector El que sea WFS, KML, GML, etc. lo establece el protocolo

Esto se debe a una decisin de diseo que tomaron los desarrolladores de la librera El nmero de capas aumenta constantemente Muchas comparten la naturaleza vectorial Simplifcacin de la librera


La capa es en realidad una capa Vector El que sea WFS, KML, GML, etc. lo establece el protocolo

Esto se debe a una decisin de diseo que tomaron los desarrolladores de la librera El nmero de capas aumenta constantemente Muchas comparten la naturaleza vectorial Simplifcacin de la librera


Capas WFSCapas WFS La estrategia:

Indica a OpenLayers cmo solicitar las features Al utlizar la estrategia Fixed, OpenLayers pedir todas las

features existentes slo una vez Si utlizsemos la estrategia BBOX, OpenLayers solicitara

features dentro del marco que se est visualizando En este ejemplo es asumible utlizar Fixed porque:

Son pocas features Somos muchos a la vez :) (menos petciones)

Capas WFSCapas WFS La estrategia:

Indica a OpenLayers cmo solicitar las features Al utlizar la estrategia Fixed, OpenLayers pedir todas las

features existentes slo una vez Si utlizsemos la estrategia BBOX, OpenLayers solicitara

features dentro del marco que se est visualizando En este ejemplo es asumible utlizar Fixed porque:

Son pocas features Somos muchos a la vez :) (menos petciones)


Capas WFSCapas WFS Existen otras (Fixed, Filter, Refresh, Save...) Combinables Algunas sirven para otras cosas

Save: permite guardar cambios en el servidor Refresh: permite recargar manualmente o por intervalos las

features ...

Capas WFSCapas WFS Existen otras (Fixed, Filter, Refresh, Save...) Combinables Algunas sirven para otras cosas

Save: permite guardar cambios en el servidor Refresh: permite recargar manualmente o por intervalos las

features ...


Capas WFSCapas WFS El protocolo WFS:

Recibe parmetros parecidos a los que recibe una capa WMS

Capas WFSCapas WFS El protocolo WFS:

Recibe parmetros parecidos a los que recibe una capa WMS

protocol: new OpenLayers.Protocol.WFS({ url: "http://demo.opengeo.org/geoserver/wfs", featureType: "states", featureNS: "http://www.openplans.org/topp" })...


Capas WFSCapas WFS url: la URL del servicio WFS "http://demo.opengeo.org/geoserver/wfs" featureType: el tpo de feature (equivalente a la capa concreta en las

capas WMS) "states" featureNS: el namespace del tpo de feature (cada tpo de feature se

defne en un espacio de nombres) "http://www.openplans.org/topp" Con esto, OpenLayers tene sufciente para pedir y dibujar la capa

Capas WFSCapas WFS url: la URL del servicio WFS "http://demo.opengeo.org/geoserver/wfs" featureType: el tpo de feature (equivalente a la capa concreta en las

capas WMS) "states" featureNS: el namespace del tpo de feature (cada tpo de feature se

defne en un espacio de nombres) "http://www.openplans.org/topp" Con esto, OpenLayers tene sufciente para pedir y dibujar la capa


Capas WFSCapas WFS Por ltmo, establecemos el viewport y aadimos el selector de capas

Fjate: Ahora, en lugar de establecer el centro, defnimos directamente el

campo de visin con el mtodo zoomToExtent() Recibe como parmetro un objeto OpenLayers.Bounds, que

defne un rectngulo a travs de minx, miny, maxx, maxy

Capas WFSCapas WFS Por ltmo, establecemos el viewport y aadimos el selector de capas

Fjate: Ahora, en lugar de establecer el centro, defnimos directamente el

campo de visin con el mtodo zoomToExtent() Recibe como parmetro un objeto OpenLayers.Bounds, que

defne un rectngulo a travs de minx, miny, maxx, maxy

map.zoomToExtent(new OpenLayers.Bounds(-140.4, 25.1, -44.4, 50.5)); map.addControl(new OpenLayers.Control.LayerSwitcher());


Capas WFSCapas WFS El resultado:

Capas WFSCapas WFS El resultado:



La petcin (mira el Firebug!) no recibe una imagen como con las capas WMS, recibe un XML con las geometras

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


La petcin (mira el Firebug!) no recibe una imagen como con las capas WMS, recibe un XML con las geometras

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



Aadiendo capas

ControlesControles




Aadiendo capas

ControlesControles



ControlesControles

Introduccin a los ControlesIntroduccin a los Controles

Muy bonito Xurxo, pero... ahora qu? Controles: permiten interactuar con el mapa .

Extenden a la clase: OpenLayers.Control Paneles: agregacin de controles.

Extenden a la clase: OpenLayers.Panel

Introduccin a los ControlesIntroduccin a los Controles

Muy bonito Xurxo, pero... ahora qu? Controles: permiten interactuar con el mapa .

Extenden a la clase: OpenLayers.Control Paneles: agregacin de controles.

Extenden a la clase: OpenLayers.Panel

ControlesControles

Introduccin a los ControlesIntroduccin a los Controles Quin puso eso ah?

Introduccin a los ControlesIntroduccin a los Controles Quin puso eso ah?

ControlesControles

Introduccin a los ControlesIntroduccin a los Controles Por defecto, si no se aade explcitamente ningn

control al mapa, ste se inicializa con 4 controles: OpenLayers.Control.ArgParser : Lee los parmetros 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 : agregacin de dos controles: PanPanel y ZoomPanel. OpenLayers.Control.Navigaton : permite controlar la visualizacin del mapa a travs

del ratn.

Introduccin a los ControlesIntroduccin a los Controles Por defecto, si no se aade explcitamente ningn

control al mapa, ste se inicializa con 4 controles: OpenLayers.Control.ArgParser : Lee los parmetros 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 : agregacin de dos controles: PanPanel y ZoomPanel. OpenLayers.Control.Navigaton : permite controlar la visualizacin del mapa a travs

del ratn.

ControlesControles

Otros controles predefnidos Otros controles predefnidos OpenLayers.Control.KeyboardDefaults : para navegar por el mapa mediante el teclado (fechas, +/-,...)

OpenLayers.Control.PanZoomBar : dibuja una barra de zoom que permite acercar y alejar el mapa.

OpenLayers.Control.PanPanel : dibuja unos botones dentro del visor para desplazar el mapa.

OpenLayers.Control.ZoomPanel : agregacin 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 visualizacin actual del mapa.

OpenLayers.Control.MousePositon : indica la posicin del cursor en el mapa.

OpenLayers.Control.OverviewMap : mapa de referencia en la esquina inferior derecha del mapa.

OpenLayers.Control.LayerSwitcher : permite ver la leyenda del mapa, mostrando las capas disponibles y permitendo elegir las que se desean visualizar.

OpenLayers.Control.Measure : permite medir tanto distancias como reas dentro del visor.

...

Otros controles predefnidos Otros controles predefnidos OpenLayers.Control.KeyboardDefaults : para navegar por el mapa mediante el teclado (fechas, +/-,...)

OpenLayers.Control.PanZoomBar : dibuja una barra de zoom que permite acercar y alejar el mapa.

OpenLayers.Control.PanPanel : dibuja unos botones dentro del visor para desplazar el mapa.

OpenLayers.Control.ZoomPanel : agregacin 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 visualizacin actual del mapa.

OpenLayers.Control.MousePositon : indica la posicin del cursor en el mapa.

OpenLayers.Control.OverviewMap : mapa de referencia en la esquina inferior derecha del mapa.

OpenLayers.Control.LayerSwitcher : permite ver la leyenda del mapa, mostrando las capas disponibles y permitendo elegir las que se desean visualizar.

OpenLayers.Control.Measure : permite medir tanto distancias como reas dentro del visor.

...

ControlesControles

Ejemplo 1Ejemplo 1

Aadimos ms controles al visor

Ejemplo 1Ejemplo 1

Aadimos ms controles al visorfunction init() { var map = new OpenLayers.Map( 'map' , {controls: []}); // CONTROLES map.addControl(new OpenLayers.Control.Navigation()); map.addControl(new OpenLayers.Control.Attribution()); map.addControl(new OpenLayers.Control.PanZoomBar()); map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));

map.addControl(new OpenLayers.Control.ArgParser()); map.addControl(new OpenLayers.Control.Permalink()); map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.OverviewMap()); map.addControl(new OpenLayers.Control.KeyboardDefaults()); map.addControl(new OpenLayers.Control.ScaleLine()); }

ControlesControles

Ejemplo 1Ejemplo 1 Y a jugar!!!

Ejemplo 1Ejemplo 1 Y a jugar!!!

ControlesControles

Controles de edicinControles de edicin Estos controles tienen que tener asociada una capa vectorial (

OpenLayers.Layer.Vector) sobre la que se dibujarn los elementos. OpenLayers.Control.DrawFeature : permite dibujar polgonos, lneas 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

polgonos, lneas, puntos y navegacin.

Controles de edicinControles de edicin Estos controles tienen que tener asociada una capa vectorial (

OpenLayers.Layer.Vector) sobre la que se dibujarn los elementos. OpenLayers.Control.DrawFeature : permite dibujar polgonos, lneas 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

polgonos, lneas, puntos y navegacin.

ControlesControles

Ejemplo 2Ejemplo 2

Aadimos controles de edicin:

Ejemplo 2Ejemplo 2

Aadimos controles de edicin:

function init() { var vector_layer = new OpenLayers.Layer.Vector( "Editable" ); ...

var edit_panel = new OpenLayers.Control.EditingToolbar(vector_layer); map.addControl(edit_panel); }

ControlesControles

Ejemplo 2Ejemplo 2

Aadimos un nuevo control al toolbar:

Ejemplo 2Ejemplo 2

Aadimos un nuevo control al toolbar:function init() { var vector_layer = new OpenLayers.Layer.Vector( "Editable" ); ...

var edit_panel = new OpenLayers.Control.EditingToolbar(vector_layer); var modify_feature_ctrl = new OpenLayers.Control.ModifyFeature(vector_layer,

{ title: "Modify Feature", displayClass: "olControlModifyFeature" }); edit_panel.addControls(modify_feature_ctrl); map.addControl(edit_panel); }

ControlesControles

Ejemplo 2Ejemplo 2 Y a jugar again!!!

Ejemplo 2Ejemplo 2 Y a jugar again!!!

ControlesControles

Defniendo nuestros propios controlesDefniendo nuestros propios controles Extender la clase OpenLayers.Control o cualquiera de las clases

de los controles predefinidos.

Defniendo nuestros propios controlesDefniendo nuestros propios controles Extender la clase OpenLayers.Control o cualquiera de las clases

de los controles predefinidos.

OpenLayers.Control.MiControl = OpenLayers.Class(OpenLayers.Control, {

}

ControlesControles

Ejemplo 3Ejemplo 3

Control para borrar elementos:

Ejemplo 3Ejemplo 3

Control para borrar elementos:OpenLayers.Control.DeleteFeature = OpenLayers.Class(OpenLayers.Control, {

initialize: function(layer, options) { OpenLayers.Control.prototype.initialize.apply(this, [options]); this.layer = layer; this.handler = new OpenLayers.Handler.Feature( this, layer, {click: this.clickFeature} ); }, clickFeature: function(feature) { this.layer.destroyFeatures([feature]); }, CLASS_NAME: "OpenLayers.Control.DeleteFeature"});



Aadiendo capas

Controles

Interaccin con el servidor Interaccin con el servidor

(a travs de estndares OGC)(a travs de estndares OGC)


Aadiendo capas

Controles

Interaccin con el servidor Interaccin con el servidor

(a travs de estndares OGC)(a travs de estndares OGC)

Interaccin con el servidorInteraccin con el servidor

OGCOGC Open Geospacial Consortum.

Organizacin estandarizadora (1994). Internacional. Sin nimo de lucro. Persigue, sobre todo, la interoperabilidad de los diferentes

sistemas GIS +400 miembros.

htp://www.opengeospatal.org/

OGCOGC Open Geospacial Consortum.

Organizacin estandarizadora (1994). Internacional. Sin nimo de lucro. Persigue, sobre todo, la interoperabilidad de los diferentes

sistemas GIS +400 miembros.

htp://www.opengeospatal.org/


Estndares OGCEstndares OGC GML (Geography Markup Language):

XML para representar informacin geogrfca. KML (Keyhole Markup Language):

XML para representar datos geogrfcos en 3D. WMS (Web Map Server):

Interfaz para publicar mapas de informacin georeferenciadas (imgenes).

Estndares OGCEstndares OGC GML (Geography Markup Language):

XML para representar informacin geogrfca. KML (Keyhole Markup Language):

XML para representar datos geogrfcos en 3D. WMS (Web Map Server):

Interfaz para publicar mapas de informacin georeferenciadas (imgenes).


Estndares OGCEstndares OGC WFS (Web Feature Service):

Interfaz para publicar informacin geoespacial a travs 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 travs de la web.

...

Estndares OGCEstndares OGC WFS (Web Feature Service):

Interfaz para publicar informacin geoespacial a travs 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 travs de la web.

...


WFSWFS OGC Web Feature Service Implementaton Specifcaton

Petciones WFS:

GetCapabilites: Ejemplo

DescribeFeatureType: Ejemplo

GetFeature: Ejemplo

WFSWFS OGC Web Feature Service Implementaton Specifcaton

Petciones WFS:

GetCapabilites: Ejemplo

DescribeFeatureType: Ejemplo

GetFeature: Ejemplo


Ejemplo 1: WFS GetFeatureEjemplo 1: WFS GetFeatureEjemplo 1: WFS GetFeatureEjemplo 1: WFS GetFeaturefunction init() { getFeature_control = new OpenLayers.Control.GetFeature({ protocol: OpenLayers.Protocol.WFS.fromWMSLayer(wms_layer), box: true, hover: false, multipleKey: "shiftKey", toggleKey: "ctrlKey" }); getFeature_control.events.register("featureselected", this, function(e) { select_layer.addFeatures([e.feature]); modify_control.deactivate(); }); getFeature_control.events.register("featureunselected", this, function(e) { select_layer.removeFeatures([e.feature]); }); map.addControl(getFeature_control); getFeature_control.activate(); }


Ejemplo 1: WFS GetFeatureEjemplo 1: WFS GetFeature Y a cambiar el mundo!

Ejemplo 1: WFS GetFeatureEjemplo 1: WFS GetFeature Y a cambiar el mundo!


WFS-TWFS-T Permite cambiar la informacin en el servidor. Ejemplo con OpenLayers:

htp://openlayers.org/dev/examples/wfs-protocol-transactons.html

WFS-TWFS-T Permite cambiar la informacin en el servidor. Ejemplo con OpenLayers:

htp://openlayers.org/dev/examples/wfs-protocol-transactons.html


WMSWMS OGC Web Map Service Implementaton Specifcaton

Petciones WMS: GetCapabilites:

Ejemplo DescribeLayer:

Ejemplo GetMap:

Ejemplo GetFeatureInfo:

Ejemplo

WMSWMS OGC Web Map Service Implementaton Specifcaton

Petciones WMS: GetCapabilites:

Ejemplo DescribeLayer:

Ejemplo GetMap:

Ejemplo GetFeatureInfo:

Ejemplo


Ejemplo 2: WMS GetFeatureInfoEjemplo 2: WMS GetFeatureInfoEjemplo 2: WMS GetFeatureInfoEjemplo 2: WMS GetFeatureInfofunction init() { info = new OpenLayers.Control.WMSGetFeatureInfo({ url: 'http://v2.suite.opengeo.org/geoserver/ows', title: 'Identify features by clicking', queryVisible: true, eventListeners: { getfeatureinfo: function(event) { if (popup !== undefined) { map.removePopup(popup); } popup = new OpenLayers.Popup.FramedCloud( "chicken", map.getLonLatFromPixel(event.xy), new OpenLayers.Size(50,50), event.text, null, true ); map.addPopup(popup); } } }); map.addControl(info); info.activate(); }


Ejemplo 2: WMS GetFeatureInfoEjemplo 2: WMS GetFeatureInfo Y consultando...

Ejemplo 2: WMS GetFeatureInfoEjemplo 2: WMS GetFeatureInfo Y consultando...


GraciasGracias por asistir a este curso

Te quedaste geoinquieto...?

GraciasGracias por asistir a este curso

Te quedaste geoinquieto...?


Permanece conectado...Permanece conectado...


Xeoinquedoshttp://xeoinquedos.wordpress.com

http://wiki.osgeo.org/wiki/Geoinquietos_Zona_Norte

: #xeoinquedos




OSGeo-ESCaptulo Local de la comunidad hispanohablante del OSGeo

(http://wiki.osgeo.org/wiki/Captulo_Local_de_la_comunidad_hispanohablante)

: #osgeoes

Micho Garca

: #michogar


Gracias a...Gracias a...Gracias a...Gracias a...

Francisco Puga: #fpuga


IMPARTIDO POR:

Gracia Fernndez Lpez Xurxo Mndez Prez

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

[email protected]

IMPARTIDO POR:

Gracia Fernndez Lpez Xurxo Mndez Prez

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

[email protected]

Xeoinquedoshttp://xeoinquedos.wordpress.com

http://wiki.osgeo.org/wiki/Geoinquietos_Zona_Norte

: #xeoinquedos

OSGeo-ES(http://wiki.osgeo.org/wiki/Captulo_Local_de_la_comunidad_hispanohablante)

: #osgeoes

Pgina 1Pgina 2Pgina 3Pgina 4Pgina 5Pgina 6Pgina 7Pgina 8Pgina 9Pgina 10Pgina 11Pgina 12Pgina 13Pgina 14Pgina 15Pgina 16Pgina 17Pgina 18Pgina 19Pgina 20Pgina 21Pgina 22Pgina 23Pgina 24Pgina 25Pgina 26Pgina 27Pgina 28Pgina 29Pgina 30Pgina 31Pgina 32Pgina 33Pgina 34Pgina 35Pgina 36Pgina 37Pgina 38Pgina 39Pgina 40Pgina 41Pgina 42Pgina 43Pgina 44Pgina 45Pgina 46Pgina 47Pgina 48Pgina 49Pgina 50Pgina 51Pgina 52Pgina 53Pgina 54Pgina 55Pgina 56Pgina 57Pgina 58Pgina 59Pgina 60Pgina 61Pgina 62Pgina 63Pgina 64Pgina 65Pgina 66Pgina 67Pgina 68Pgina 69Pgina 70Pgina 71Pgina 72Pgina 73Pgina 74Pgina 75Pgina 76Pgina 77Pgina 78Pgina 79Pgina 80Pgina 81Pgina 82Pgina 83Pgina 84Pgina 85Pgina 86Pgina 87Pgina 88Pgina 89Pgina 90Pgina 91Pgina 92Pgina 93Pgina 94Pgina 95Pgina 96Pgina 97Pgina 98Pgina 99Pgina 100Pgina 101Pgina 102Pgina 103

curso openlayers

Documents