View
230
Download
0
Category
Preview:
DESCRIPTION
Para aquellos que quieren saber de Cartografía
Citation preview
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
Introduccin a OpenLayersIntroduccin a OpenLayers
Qu vamos a verQu vamos a ver Introduccin a la librera
Aadiendo capas
Controles
Interaccin con el servidor
(a travs de estndares OGC)
Qu vamos a verQu vamos a ver Introduccin a la librera
Aadiendo capas
Controles
Interaccin con el servidor
(a travs de estndares OGC)
Introduccin a OpenLayersIntroduccin a OpenLayers
Qu vamos a verQu vamos a ver Introduccin a la libreraIntroduccin a la librera
Aadiendo capas
Controles
Interaccin con el servidor
(a travs de estndares OGC)
Qu vamos a verQu vamos a ver Introduccin a la libreraIntroduccin a la librera
Aadiendo capas
Controles
Interaccin con el servidor
(a travs de estndares OGC)
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
Introduccin a la libreraIntroduccin a la librera
Qu puedo hacer con l?
Crear mapas interactvos
Qu puedo hacer con l?
Crear mapas interactvos
Introduccin a la libreraIntroduccin a la librera
Qu puedo hacer con l?
Visualizar informacin espacial / geogrfca
Qu puedo hacer con l?
Visualizar informacin espacial / geogrfca
Introduccin a la libreraIntroduccin a la librera
Qu puedo hacer con l?
Incluir y superponer distntos tpos de capas
Qu puedo hacer con l?
Incluir y superponer distntos tpos de capas
Introduccin a la libreraIntroduccin a la librera
Qu puedo hacer con l?
Editar informacin espacial / geogrfca
Qu puedo hacer con l?
Editar informacin espacial / geogrfca
Introduccin a la libreraIntroduccin a la librera
Qu puedo hacer con l?
Interactuar con servicios GIS externos
Qu puedo hacer con l?
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...
Introduccin a la libreraIntroduccin a la librera
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
Introduccin a la libreraIntroduccin a la librera
Introduccin a la libreraIntroduccin a la librera
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
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
Introduccin a la libreraIntroduccin a la librera
Dnde encuentro documentacin y ejemplos?
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
Dnde encuentro documentacin y ejemplos?
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
Introduccin a la libreraIntroduccin a la librera
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)
Introduccin a la libreraIntroduccin a la librera
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
Introduccin a la libreraIntroduccin a la librera
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...
Introduccin a la libreraIntroduccin a la librera
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
Introduccin a la libreraIntroduccin a la librera
Hola Mundo!Hola Mundo! Para verlo necesito:
Cualquier navegador web
Hola Mundo!Hola Mundo! Para verlo necesito:
Cualquier navegador web
Introduccin a la libreraIntroduccin a la librera
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
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
Introduccin a la libreraIntroduccin a la librera
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
Introduccin a la libreraIntroduccin a la librera
Hola Mundo!Hola Mundo!
Partmos de una pgina base
Hola Mundo!Hola Mundo!
Partmos de una pgina base
Curso de OpenLayers - Ejemplo 1 - Capas WMS Curso de OpenLayers - Ejemplo 1 - Capas WMS
Introduccin a la libreraIntroduccin a la librera
Hola Mundo!Hola Mundo!
Incluimos la librera y creamos el mapa y las capas
Hola Mundo!Hola Mundo!
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); }
Introduccin a la libreraIntroduccin a la librera
Hola Mundo!Hola Mundo!
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
Hola Mundo!Hola Mundo!
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
Introduccin a la libreraIntroduccin a la librera
Hola Mundo!Hola Mundo!
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!
Ojo! La versin desplegada carga todos los archivos de
OpenLayers por separado (bueno para debug)
Slo ellos depuran con en modo singlefle
Introduccin a la libreraIntroduccin a la librera
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
Introduccin a la libreraIntroduccin a la librera
Hola Mundo!Hola Mundo!
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)
Hola Mundo!Hola Mundo!
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() {.............. }
Introduccin a la libreraIntroduccin a la librera
Hola Mundo!Hola Mundo!
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
Hola Mundo!Hola Mundo!
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' );
Introduccin a la libreraIntroduccin a la librera
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
Introduccin a la libreraIntroduccin a la librera
Hola Mundo!Hola Mundo!
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)
Hola Mundo!Hola Mundo!
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'} );
Introduccin a la libreraIntroduccin a la librera
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
Introduccin a la libreraIntroduccin a la librera
Hola Mundo!Hola Mundo!
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
Hola Mundo!Hola Mundo!
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);
Introduccin a la libreraIntroduccin a la librera
Hola Mundo!Hola Mundo!
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
Hola Mundo!Hola Mundo!
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
...............
Introduccin a la libreraIntroduccin a la librera
Hola Mundo!Hola Mundo!
Slo falta defnir las dimensiones de nuestro mapa... :
Hola Mundo!Hola Mundo!
Slo falta defnir las dimensiones de nuestro mapa... :
............... #map { width: 600px; height: 400px; border: 1px solid; }
Introduccin a la libreraIntroduccin a la librera
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)
Introduccin a OpenLayersIntroduccin a OpenLayers
Qu vamos a verQu vamos a ver Introduccin a la librera
Aadiendo capasAadiendo capas
Controles
Interaccin con el servidor
(a travs de estndares OGC)
Qu vamos a verQu vamos a ver Introduccin a la librera
Aadiendo capasAadiendo capas
Controles
Interaccin con el servidor
(a travs de estndares OGC)
Aadiendo capasAadiendo capas
Capas de GoogleCapas de Google Google Maps ofrece su propio API
htp://code.google.com/intl/es/apis/maps/documentaton/javascript/ Sin embargo:
No es open source Su licencia, aunque permisiva, restringe su uso
No admite tantos tpos de capas Rapidez? Si quieres las capas de Google, van a ir igual de 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
Aadiendo capasAadiendo capas
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
Aadiendo capasAadiendo capas
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
.........
.........
Aadiendo capasAadiendo capas
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]);
Aadiendo capasAadiendo capas
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)
Aadiendo capasAadiendo capas
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
Aadiendo capasAadiendo capas
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
Aadiendo capasAadiendo capas
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)
Aadiendo capasAadiendo capas
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/)
Aadiendo capasAadiendo capas
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);
Aadiendo capasAadiendo capas
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());
Aadiendo capasAadiendo capas
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):
Aadiendo capasAadiendo capas
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!
Aadiendo capasAadiendo capas
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:
Aadiendo capasAadiendo capas
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:
Aadiendo capasAadiendo capas
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]);
Aadiendo capasAadiendo capas
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());
Aadiendo capasAadiendo capas
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
});
Aadiendo capasAadiendo capas
Capas de OpenStreetMapCapas de OpenStreetMap Qu es OpenStreetMap?
Capas de OpenStreetMapCapas de OpenStreetMap Qu es OpenStreetMap?
Aadiendo capasAadiendo capas
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)
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)
Aadiendo capasAadiendo capas
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);
Aadiendo capasAadiendo capas
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:
Aadiendo capasAadiendo capas
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
Aadiendo capasAadiendo capas
Capas WFSCapas WFS Varias cosas a tener en cuenta en este ejemplo:
Necesidad de un proxy El funcionamiento de OpenLayers es el siguiente
1. El navegador carga el html
Capas WFSCapas WFS Varias cosas a tener en cuenta en este ejemplo:
Necesidad de un proxy El funcionamiento de OpenLayers es el siguiente
1. El navegador carga el html
Aadiendo capasAadiendo capas
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
...
Aadiendo capasAadiendo capas
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
Aadiendo capasAadiendo capas
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
Aadiendo capasAadiendo capas
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() {....
Aadiendo capasAadiendo capas
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);
Aadiendo capasAadiendo capas
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);
Aadiendo capasAadiendo capas
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
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
Aadiendo capasAadiendo capas
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)
Aadiendo capasAadiendo capas
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 ...
Aadiendo capasAadiendo capas
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" })...
Aadiendo capasAadiendo capas
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
Aadiendo capasAadiendo capas
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());
Aadiendo capasAadiendo capas
Capas WFSCapas WFS El resultado:
Capas WFSCapas WFS El resultado:
Aadiendo capasAadiendo capas
Capas WFSCapas WFS Fjate:
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
Capas WFSCapas WFS Fjate:
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
Introduccin a OpenLayersIntroduccin a OpenLayers
Qu vamos a verQu vamos a ver Introduccin a la librera
Aadiendo capas
ControlesControles
Interaccin con el servidor
(a travs de estndares OGC)
Qu vamos a verQu vamos a ver Introduccin a la librera
Aadiendo capas
ControlesControles
Interaccin con el servidor
(a travs de estndares OGC)
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"});
Introduccin a OpenLayersIntroduccin a OpenLayers
Qu vamos a verQu vamos a ver Introduccin a la librera
Aadiendo capas
Controles
Interaccin con el servidor Interaccin con el servidor
(a travs de estndares OGC)(a travs de estndares OGC)
Qu vamos a verQu vamos a ver Introduccin a la librera
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/
Interaccin con el servidorInteraccin con el servidor
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).
Interaccin con el servidorInteraccin con el servidor
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.
...
Interaccin con el servidorInteraccin con el servidor
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
Interaccin con el servidorInteraccin con el servidor
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(); }
Interaccin con el servidorInteraccin con el servidor
Ejemplo 1: WFS GetFeatureEjemplo 1: WFS GetFeature Y a cambiar el mundo!
Ejemplo 1: WFS GetFeatureEjemplo 1: WFS GetFeature Y a cambiar el mundo!
Interaccin con el servidorInteraccin con el servidor
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
Interaccin con el servidorInteraccin con el servidor
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
Interaccin con el servidorInteraccin con el servidor
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(); }
Interaccin con el servidorInteraccin con el servidor
Ejemplo 2: WMS GetFeatureInfoEjemplo 2: WMS GetFeatureInfo Y consultando...
Ejemplo 2: WMS GetFeatureInfoEjemplo 2: WMS GetFeatureInfo Y consultando...
Introduccin a OpenLayersIntroduccin a OpenLayers
GraciasGracias por asistir a este curso
Te quedaste geoinquieto...?
GraciasGracias por asistir a este curso
Te quedaste geoinquieto...?
Introduccin a la libreraIntroduccin a la librera
Permanece conectado...Permanece conectado...
Permanece conectado...Permanece conectado...
Xeoinquedoshttp://xeoinquedos.wordpress.com
http://wiki.osgeo.org/wiki/Geoinquietos_Zona_Norte
: #xeoinquedos
Introduccin a la libreraIntroduccin a la librera
Permanece conectado...Permanece conectado...
Permanece conectado...Permanece conectado...
OSGeo-ESCaptulo Local de la comunidad hispanohablante del OSGeo
(http://wiki.osgeo.org/wiki/Captulo_Local_de_la_comunidad_hispanohablante)
: #osgeoes
Micho Garca
: #michogar
Introduccin a OpenLayersIntroduccin a OpenLayers
Gracias a...Gracias a...Gracias a...Gracias a...
Francisco Puga: #fpuga
Introduccin a OpenLayersIntroduccin a OpenLayers
IMPARTIDO POR:
Gracia Fernndez Lpez Xurxo Mndez Prez
graciafdez@gmail.com : #sonxurxo http://blog.sonxurxo.com
sonxurxo@gmail.com
IMPARTIDO POR:
Gracia Fernndez Lpez Xurxo Mndez Prez
graciafdez@gmail.com : #sonxurxo http://blog.sonxurxo.com
sonxurxo@gmail.com
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
Recommended