OpenLayers permite poner un mapa dinámico en cualquier página web.
Puede mostrar bloques de mapas y marcadores desde cualquier fuente, fue desarrollado inicialmente por MetaCarta y se lo dio al público para promover el uso de la información geográfica de todo tipo.
OpenLayers es totalmente gratuito, de código abierto de JavaScript (OpenSource), liberado bajo una licencia tipo BSD.
Manual para el desarrollador del API para la generación de mapas interactivos en la web MAPEA v3. MAPEA es la solución corporativa desarrollada por la Junta de Andalucía para construir mapas interactivos a partir de servicios interoperables. El manual versa sobre la versión REST del API, que genera mapas a partir de URLs para ser embebidos en otras webs como IFrames (según la filosofía mashup)
OpenLayers permite poner un mapa dinámico en cualquier página web.
Puede mostrar bloques de mapas y marcadores desde cualquier fuente, fue desarrollado inicialmente por MetaCarta y se lo dio al público para promover el uso de la información geográfica de todo tipo.
OpenLayers es totalmente gratuito, de código abierto de JavaScript (OpenSource), liberado bajo una licencia tipo BSD.
Manual para el desarrollador del API para la generación de mapas interactivos en la web MAPEA v3. MAPEA es la solución corporativa desarrollada por la Junta de Andalucía para construir mapas interactivos a partir de servicios interoperables. El manual versa sobre la versión REST del API, que genera mapas a partir de URLs para ser embebidos en otras webs como IFrames (según la filosofía mashup)
Leo Hsu and Regina Obe
We'll demonstrate integrating PostGIS in both PHP and ASP.NET applications.
We'll demonstrate using the new PostGIS 1.5 geography offering to extend existing web applications with proximity analysis.
More advanced use to display maps and stats using OpenLayers, WMS/WFS services and roll your own WFS like service using the PostGIS KML/GML/and or GeoJSON output functions.
Cartografía, anexos y estudios completos en: http://goo.gl/t9YaXM
Objetivo General: Conseguir que la Bicicleta se posicione como un modo de transporte consolidado dentro del área Metropolitana de Monterrey, es decir, que el número de viajes en bicicleta aumente y que pueda llegar al menos hasta el 5% del reparto modal.
C++ TRAINING IN AMBALA CANTT! BATRA COMPUTER CENTERgroversimrans
Are you in search of C++Training in Ambala?
Now your search ends here.. Batra Computer Center provides you the best professional C++ Training in Ambala.
03 de Marzo 2015: Andrés Villarreal - Herramientas del Desarrollador Modernowpargentina
En ocasiones nuestras herramientas de desarrollo retrasan nuestro trabajo y nuestro crecimiento profesional sin que siquiera nos demos cuenta. Vamos a detectar esos casos y a explorar distintas opciones para construir un ambiente de desarrollo local moderno, ágil, portable y adecuado a las tecnologías más actuales del desarrollo web, y cómo acoplarlo a nuestro trabajo con WordPress.
Esta e sla presentación, de la 2da clase de Open Journal System, dictado a Webmaster, Instalación y configuración de la plataforma, ademas de la creación de una revista en plataforma.
Leo Hsu and Regina Obe
We'll demonstrate integrating PostGIS in both PHP and ASP.NET applications.
We'll demonstrate using the new PostGIS 1.5 geography offering to extend existing web applications with proximity analysis.
More advanced use to display maps and stats using OpenLayers, WMS/WFS services and roll your own WFS like service using the PostGIS KML/GML/and or GeoJSON output functions.
Cartografía, anexos y estudios completos en: http://goo.gl/t9YaXM
Objetivo General: Conseguir que la Bicicleta se posicione como un modo de transporte consolidado dentro del área Metropolitana de Monterrey, es decir, que el número de viajes en bicicleta aumente y que pueda llegar al menos hasta el 5% del reparto modal.
C++ TRAINING IN AMBALA CANTT! BATRA COMPUTER CENTERgroversimrans
Are you in search of C++Training in Ambala?
Now your search ends here.. Batra Computer Center provides you the best professional C++ Training in Ambala.
03 de Marzo 2015: Andrés Villarreal - Herramientas del Desarrollador Modernowpargentina
En ocasiones nuestras herramientas de desarrollo retrasan nuestro trabajo y nuestro crecimiento profesional sin que siquiera nos demos cuenta. Vamos a detectar esos casos y a explorar distintas opciones para construir un ambiente de desarrollo local moderno, ágil, portable y adecuado a las tecnologías más actuales del desarrollo web, y cómo acoplarlo a nuestro trabajo con WordPress.
Esta e sla presentación, de la 2da clase de Open Journal System, dictado a Webmaster, Instalación y configuración de la plataforma, ademas de la creación de una revista en plataforma.
Docker: la revolución en virtualizaciónMarcelo Ochoa
Durante el último año la evolución de proyectos como LXC concluyo en el mundialmente reconocido proyecto Docker, un sistema de virtualización open source ultra delgado que permite optimizar por medio de la automatización vía scripts la provisión de ambientes para desarrollo, test y producción.
Entre las principales ventajas de este ambiente de virtualización podemos encontrar:
– Nativo en Linux, sin requerimientos de virtualización hardware, cero impacto en la performance
– Definición/Creación del entorno vía scripts
– Ultra liviano, se pueden correr hasta 2048 maquinas virtuales con un servidor Web en un simple micro-computador Raspberry PI
– Disponible en otras plataformas como Windows/Solaris
Charla para la #PEUMConf2018.
Introducción a docker, cómo hemos evolucionado los entornos de desarrollo, desde la instalación de soluciones manualmente, uso de servidores, vagrant...
Realización de una demo práctica usando docker-compose para montar un entorno de desarrollo de algo tipo Php, Wordpress, Node...
la presentación te muestra como utilizar los componentes de el programa de eclipse y así poder utilizar mejor el programa de eclipse sin complicaciones.
Catalogo Refrigeracion Miele Distribuidor Oficial Amado Salvador ValenciaAMADO SALVADOR
Descubre el catálogo general de la gama de productos de refrigeración del fabricante de electrodomésticos Miele, presentado por Amado Salvador distribuidor oficial Miele en Valencia. Como distribuidor oficial de electrodomésticos Miele, Amado Salvador ofrece una amplia selección de refrigeradores, congeladores y soluciones de refrigeración de alta calidad, resistencia y diseño superior de esta marca.
La gama de productos de Miele se caracteriza por su innovación tecnológica y eficiencia energética, garantizando que cada electrodoméstico no solo cumpla con las expectativas, sino que las supere. Los refrigeradores Miele están diseñados para ofrecer un rendimiento óptimo y una conservación perfecta de los alimentos, con características avanzadas como la tecnología de enfriamiento Dynamic Cooling, sistemas de almacenamiento flexible y acabados premium.
En este catálogo, encontrarás detalles sobre los distintos modelos de refrigeradores y congeladores Miele, incluyendo sus especificaciones técnicas, características destacadas y beneficios para el usuario. Amado Salvador, como distribuidor oficial de electrodomésticos Miele, garantiza que todos los productos cumplen con los más altos estándares de calidad y durabilidad.
Explora el catálogo completo y encuentra el refrigerador Miele perfecto para tu hogar con Amado Salvador, el distribuidor oficial de electrodomésticos Miele.
Estructuras básicas_ conceptos de programación (1).docx
Curso OpenLayers Xeoinquedos
1. Introducción a OpenLayers
Xeoinquedos organiza:
Curso de introducción a OpenLayers
20 de Mayo de 2011
Lugar: ETS de Camiños, Canais e Portos – Universidade de A Coruña, Campus de Elviña
2. Introducción a OpenLayers
Qué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capas
➔ Controles
➔ Interacción con el servidor
(a través de estándares OGC)
3. Introducción a OpenLayers
Qué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capas
➔ Controles
➔ Interacción con el servidor
(a través de estándares OGC)
4. Introducción a la librería
• ¿Qué es?
• Framework GIS desarrollado en JavaScript para la creación de
mapas web dinámicos
5. Introducción a la librería
• ¿Qué puedo hacer con él?
• Crear mapas interactvos
6. Introducción a la librería
• ¿Qué puedo hacer con él?
• Visualizar información espacial / geográfca
7. Introducción a la librería
• ¿Qué puedo hacer con él?
• Incluir y superponer distntos tpos de capas
8. Introducción a la librería
• ¿Qué puedo hacer con él?
• Editar información espacial / geográfca
9. Introducción a la librería
• ¿Qué puedo hacer con él?
• Interactuar con servicios GIS externos
11. Introducción a la librería
• Más...
• Creado en 2005 por Metacarta
• Licencia estlo BSD (htp://svn.openlayers.org/trunk/openlayers/license.txt)
• Actualmente en la versión 2.10 (en breve la 2.11)
• Trabajando ya en la versión 3.0
12. Introducción a la librería
• ¿Dónde encuentro documentación y ejemplos?
• htp://docs.openlayers.org/
• Home de la documentación de OpenLayers
• htp://openlayers.org/dev/examples/
• Multtud de ejemplos de casi todo lo que puede hacer
13. Introducción a la librería
• ¿Dónde encuentro documentación y ejemplos?
• htp://trac.osgeo.org/openlayers/wiki
• Wiki con ejemplos, documentación, API docs...
• Listas de correo (muy actvas):
• htp://lists.osgeo.org/mailman/listnfo/openlayers-users
• htp://lists.osgeo.org/mailman/listnfo/openlayers-dev
14. Introducción a la librería
¡Hola Mundo!
• Vamos a hacer esto:
• Un mapa navegable con una capa simple WMS, obtenida
de un servidor externo (osgeo.org)
15. Introducción a la librería
¡Hola Mundo!
• ¿Qué es WMS?
• WMS = Web Map Service
• Protocolo estándar OGC que permite servir y consumir
mapas
• Implementado por casi toda aplicación GIS
• Por supuesto, también por OpenLayers
16. Introducción a la librería
¡Hola Mundo!
• Para hacerlo necesito:
• Editor de texto
• Librería OpenLayers – 3 opciones:
• Descargar la versión estable
– htp://openlayers.org/download/OpenLayers-2.10.tar.gz
– htp://openlayers.org/download/OpenLayers-2.10.zip
• Descargar la versión trunk del repositorio Subversion
– svn checkout htp://svn.openlayers.org/trunk/openlayers/
• Utlizar la hosted version, pero cargas contra el servidor de openlayers.org...
17. Introducción a la librería
¡Hola Mundo!
• Utlizaremos la versión trunk
• Es la últma, con todas las mejoras añadidas tras la publicación
de la versión 2.10 estable
• Soluciona un bug aparecido con Firefox 4 al utlizar
OpenLayers en modo debug (se comenta más adelante)
• A día de hoy, es práctcamente igual a la futura 2.11
18. Introducción a la librería
¡Hola Mundo!
• Para verlo necesito:
• Cualquier navegador web
19. Introducción a la librería
¡Hola Mundo!
Pasos:
1.En la carpeta pública* crear carpeta “curso-openlayers/”
2.Descomprimir la librería y
• copiar la carpeta “openlayers/” dentro de la carpeta creada
3.Crear el archivo “curso-openlayers/curso-1.html”
4.¡A picar código!
* : Ubuntu: /var/www
WAMP-MAMP-XAMP: $SERVER_HOME/htdocs
20. Introducción a la librería
¡Hola Mundo!
• Pasos:
• Crear estructura del HTML
• Establecer dimensiones del mapa
• Enlazar la librería
• Crear el mapa
• Añadirle capas
• Añadir controles
• Establecer centro y nivel de zoom
21. Introducción a la librería
¡Hola Mundo!
Partmos de una página base
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Curso de OpenLayers - Ejemplo 1 - Capas WMS</title>
</head>
<body>
<h1 id="title">Curso de OpenLayers - Ejemplo 1 - Capas WMS</h1>
<div id="map">
</div>
</body>
</html>
22. Introducción a la librería
¡Hola Mundo!
Incluimos la librería y creamos el mapa y las capas
<head>
...............
<script type="text/javascript" src="openlayers/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init() {
map = new OpenLayers.Map( 'map' );
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(-8, 42.8), 8);
}
</script>
</head>
23. Introducción a la librería
¡Hola Mundo!
¿Qué estamos haciendo?
<script type="text/javascript" src="openlayers/lib/OpenLayers.js"></script>
• Enlazamos la librería descargada
• 2 opciones:
➔ Un sólo fchero → para producción
➔
Incluir “OpenLayers-2.10/OpenLayers.js”
➔ Librería desplegada → para desarrollo (Firebug!)
➔
Incluir “OpenLayers-2.10/lib/OpenLayers.js”
24. Introducción a la librería
¡Hola Mundo!
¡Ojo!
➔ La versión desplegada carga todos los archivos de
OpenLayers por separado (bueno para debug)
➔ Sólo ellos depuran con en modo singlefle
25. Introducción a la librería
¡Hola Mundo!
● Si utlizas Firefox 4... :
● La versión 2.10 estable tene un bug con Firefox 4
– En modo depuración, cargando todos los archivos, no los carga bien
● Solución:
● Utlizar la versión trunk
svn checkout htp://svn.openlayers.org/trunk/openlayers/
– Los ejemplos dados para este curso utlizan esta versión
26. Introducción a la librería
¡Hola Mundo!
Creamos una función init() a la que llamaremos al cargar
la página
<script type="text/javascript">
var map;
function init() {
..............
}
</script>
• En ella metemos el código de inicialización del mapa
• La variable map se crea en el scope global (→ debug)
27. Introducción a la librería
¡Hola Mundo!
Creamos el objeto OpenLayers.Map
map = new OpenLayers.Map( 'map' );
• Es el objeto “central” de OpenLayers
• Varias versiones del constructor
• En esta se le pasa el id del <div> que contendrá el
mapa
• OpenLayers se encarga de renderizar el mapa en él
28. Introducción a la librería
¡Hola Mundo!
● Clase OpenLayers.Map
● Es la clase fundamental de OpenLayers, representa el
mapa
● Contene las capas, los controles, la confguración de
visualización...
● Puede haber varios por página
29. Introducción a la librería
¡Hola Mundo!
Creamos una capa WMS (objeto que extende de
OpenLayers.Layer)
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
Parámetros:
• name: nombre arbitrario que le damos a la capa → “OpenLayers WMS”
• url: URL del servicio WMS → “htp://vmap0.tles.osgeo.org/wms/vmap”
• params: parámetros para la petción WMS → {layers: 'basic'}
• optons: opciones para la capa (en este ejemplo no lo usamos)
30. Introducción a la librería
¡Hola Mundo!
● Jerarquía de clases OpenLayers.Layer
● Representan las distntas capas que se pueden añadir
a un mapa:
– WMS, WFS, WMTS, Vector, GML, KML, GeoRSS,
Google, OSM, Yahoo, VirtualEarth (Bing)...
● La confguración depende del tpo de capa
● Jerarquía extensible
31. Introducción a la librería
¡Hola Mundo!
Tenemos que añadir la capa al mapa y defnir la zona que
vamos a visualizar
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(-8, 42.8), 8);
• El método OpenLayers.Map.setCenter() recibe el punto central y el nivel de zoom
• zoom = 0 → se visualiza todo el extent del mapa
• La clase OpenLayers.LonLat representa pares lattud, longitud
• Con esto, OpenLayers tene sufciente para saber cómo dibujar el mapa
32. Introducción a la librería
¡Hola Mundo!
Por últmo, llamamos al método al cargar la página
<body onload="init()">
...............
</body>
El método se ejecuta al lanzarse el evento onload, cosa
que ocurre tras cargar la página
➔ Necesario cuando manipulamos en DOM
33. Introducción a la librería
¡Hola Mundo!
Sólo falta defnir las dimensiones de nuestro mapa... :
<head>
...............
<style type="text/css">
#map {
width: 600px;
height: 400px;
border: 1px solid;
}
</style>
</head>
34. Introducción a la librería
¡Hola Mundo!
● Y listo! Accede a htp://localhost/curso-openlayers/curso-1.html (o
equivalente según la instalación del servidor web)
35. Introducción a OpenLayers
Qué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capas
➔ Controles
➔ Interacción con el servidor
(a través de estándares OGC)
36. Añadiendo capas
Capas de Google
● Google Maps ofrece su propio API
● htp://code.google.com/intl/es/apis/maps/documentaton/javascript/
● Sin embargo:
● No es open source
– Su licencia, aunque permisiva, restringe su uso
● No admite tantos tpos de capas
● ¿Rapidez? Si quieres las capas de Google, van a ir igual de rápido en
OpenLayers!
– Además, podrás superponer las capas que quieras
37. Añadiendo capas
Capas de Google
● OpenLayers incluye un tpo especial de capa para ver las capas públicas de
Google
● OpenLayers.Layer.Google y OpenLayers.Layer.Google.v3
● Dado que la versión 2.X del API de Google Maps está deprecada
utlizaremos la v3
38. Añadiendo capas
Capas de Google
● Partmos del fchero curso-2.html
● Primero hay que importar el API de Google Maps
<head>
.........
<script src="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></script>
<script type="text/javascript" src="openlayers/lib/OpenLayers.js"></script>
.........
</head>
● Con el API v2 hacía falta un API Key, ahora ya no
39. Añadiendo capas
Capas de Google
● Creamos las capas, igual que en el primer ejemplo, y las añadimos al mapa
var fisica = new OpenLayers.Layer.Google(
"Google Física", {type: google.maps.MapTypeId.TERRAIN}
);
var mapa = new OpenLayers.Layer.Google(
"Google Mapa", {numZoomLevels: 20}
);
var hibrida = new OpenLayers.Layer.Google(
"Google Híbrida", {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var satelite = new OpenLayers.Layer.Google(
"Google Satélite", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);
map.addLayers([fisica, mapa, hibrida, satelite]);
40. Añadiendo capas
Capas de Google
● Fíjate:
● Añadimos las capas todas a la vez, mediante el método addLayers() de la
clase OpenLayers.Map
● Recibe como parámetro un array de capas
– A diferencia del método addLayer() que recibe una capa
● El orden en que se añaden es el orden en que están contenidas en el
array
– Importante en cuanto a la superposición de capas (z-index)
41. Añadiendo capas
Capas de Google
● El constructor recibe los parámetros:
● name: nombre arbitrario que le damos a la capa → “Google Fisica”, ...
● optons: opciones para la capa de Google:
– Necesitamos el tpo de capa, o se aplicará el valor por defecto (capa de
Mapa, google.maps.MapTypeId.TERRAIN)
● Son tpos defnidos por el API de Google Maps
– Se le puede indicar el número de niveles de zoom a cada capa
42. Añadiendo capas
Capas de Google
● Para establecer el centro del mapa, tenemos que tener en cuenta que
la proyección de las capas de Google es distnta a la del primer
ejemplo, ya no usa lattud/longitud en grados
● Todo mapa y toda capa tenen una proyección
● Toda proyección tene un identfcador
● Indica cómo se proyecta la información espacial (3D) en el mapa (2D)
● Si no se indica nada, OpenLayers utlizará la EPSG:4326
● No las hay mejores ni peores, sino más o menos adecuadas para cada
caso o trozo de planeta
43. Añadiendo capas
Capas de Google
● Las capas de Google, así como las de Yahoo, Bing, y otros, están en la
proyección conocida como Spherical Mercator
● También se conoce como EPSG:900913 (aunque nombre el ofcial es
EPSG:3785)
– WTF!? La explicación es sencilla: 900913 ↔ GOOGLE, y se utliza porque se llamó así
extraofcialmente primero
● Al contrario que otras, trata la Tierra como una esfera, no como un
elipsoide
● Si se utliza alguna capa en esta proyección, los elementos (→ capas) que
se superpongan han de estar en esa proyección (o reproyectados a ella)
44. Añadiendo capas
Capas de Google
● En términos práctcos:
● Hay que reproyectar el centro que se le pasa al mapa
– Valdría pasárselo ya en la proyección de Google, pero no es habitual
manejar la información geográfca en esa proyección
● ¿Cómo?
– OpenLayers incluye métodos para reproyectar datos vectoriales
(nunca ráster!) entre las proyecciones más habituales
● Para otras, se puede integrar fácilmente la librería proj4js
(htp://proj4js.org/)
45. Añadiendo capas
Capas de Google
● El establecimiento del centro del mapa queda así:
map.setCenter(new OpenLayers.LonLat(-8, 42.8).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 8);
● El método transform() de la clase LonLat recibe 2 parámetros:
● La proyección “original”
● La proyección “destno”
● El método map.getProjectonObject() devolverá la proyección
EPSG:900913 (pruébalo en el Firebug!)
46. Añadiendo capas
Capas de Google
● Por últmo, para poder cambiar de capas, añadimos el control:
map.addControl(new OpenLayers.Control.LayerSwitcher());
● Los controles extenden la jerarquía OpenLayers.Control
● Hay muchos predefnidos, entre ellos éste, el LayerSwitcher:
● Como su nombre indica, crea un selector de clases
● Veremos algunos otros más adelante
● Fíjate cómo los controles, al igual que las capas, las gestona el objeto
OpenLayers.Map
47. Añadiendo capas
Capas de Google
● El resultado (en htp://localhost/curso-openlayers/curso-2.html):
48. Añadiendo capas
Capas de Bing (VirtualEarth)
• Al igual que Google, Bing proporciona un API para trabajar con mapas
➔ htp://www.microsof.com/maps/developers/
• Presenta también los mismos inconvenientes:
• Código cerrado
• API menos madura que la de Google
• Y que la de OpenLayers
• También se pueden incluir capas de Bing con OpenLayers!
49. Añadiendo capas
Capas de Bing (VirtualEarth)
• De nuevo, haremos un ejemplo sencillo:
50. Añadiendo capas
Capas de Bing (VirtualEarth)
• Partmos del código proporcionado por el fchero curso-3.html
• Idéntco al del ejercicio anterior
• Como en el ejemplo de Google, tenemos que importar el API de Bing
Maps:
<script
src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us">
</script>
<script type="text/javascript" src="openlayers/lib/OpenLayers.js"></script>
51. Añadiendo capas
Capas de Bing (VirtualEarth)
• La forma de crear las capas es idéntca a la de las capas de Google:
var mapa = new OpenLayers.Layer.VirtualEarth("Mapa", {
type: VEMapStyle.Shaded
});
var hibrida = new OpenLayers.Layer.VirtualEarth("Híbrida", {
type: VEMapStyle.Hybrid
});
var aerea = new OpenLayers.Layer.VirtualEarth("Aérea", {
type: VEMapStyle.Aerial
});
map.addLayers([mapa, hibrida, aerea]);
• Los tpos de capa, de nuevo, los defne la librería externa (Bing Maps)
52. Añadiendo capas
Capas de Bing (VirtualEarth)
• Por últmo, añadimos el LayerSwitcher y centramos el mapa:
map.setCenter(new OpenLayers.LonLat(-8, 42.8), 8);
map.addControl(new OpenLayers.Control.LayerSwitcher());
53. Añadiendo capas
Capas de Bing (VirtualEarth)
• Fíjate que el centro lo establecemos en lattud / longitud
• Los mapas de Bing se cargan en EPSG:4326, a no ser que se indique
lo contrario
➔ Habría que indicarlo en las opciones de las capas:
var mapa = new OpenLayers.Layer.VirtualEarth("Mapa", {
type: VEMapStyle.Shaded,
sphericalMercator: true
});
• En ese caso habría que transformar las coordenadas igual que
hicimos con las capas de Google
54. Añadiendo capas
Capas de OpenStreetMap
• ¿Qué es OpenStreetMap?
55. Añadiendo capas
Capas de OpenStreetMap
• ¿Qué es OpenStreetMap?
● htp://www.openstreetmap.org/ :
“Es un mapa libremente editable por todo el mundo. Está hecho por
personas como usted.”
• Además de tener una interfaz propia en la web, publica sus capas para
que cualquiera pueda mostrarlas y verlas (y de hecho editarlas)
56. Añadiendo capas
Capas de OpenStreetMap
• OpenLayers incorpora un tpo de capa específco para OSM
• Para este ejemplo partmos del código proporcionado en el fchero
curso-4.html.
• Añadimos simplemente lo siguiente:
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(-8, 42.8).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 8);
57. Añadiendo capas
Capas de OpenStreetMap
• Fíjate:
• Necesitamos transformar las coordenadas porque OSM sirve sus
capas en EPSG:900913
• El resultado:
58. Añadiendo capas
Capas WFS
• WFS: Web Feature Service
• Estándar OGC
• Permite recuperar las propias geometrías y los atributos de las
entdades
entdad ↔ feature
• OpenLayers incorpora un tpo de capa especial, pero está
deprecada
• Lo mejor es utlizar una capa Vector con un protocolo WFS
59. Añadiendo capas
Capas WFS
• Varias cosas a tener en cuenta en este ejemplo:
Necesidad de un proxy
• El funcionamiento de OpenLayers es el siguiente
1. El navegador carga el html
60. Añadiendo capas
Capas WFS
2. OpenLayers dibuja el mapa y carga las capas
...
Hasta ahora, el navegador (a través de OpenLayers) sólo pidió
imágenes a servidores externos
• Al realizar petciones XMLHTTPRequests, las restricciones del
navegador sólo dejan hacerlo al mismo servidor:puerto de la página
61. Añadiendo capas
Capas WFS
¿Cómo hacemos entonces para pedir features (geometrías +
propiedades = XML, GML, texto...)?
➔ A través de un proxy en la máquina que sirve la página que contene el
mapa de OpenLayers
• OpenLayers.org proporciona un proxy CGI escrito en Python
htp://trac.osgeo.org/openlayers/browser/trunk/openlayers/examples/proxy.cgi?format=txt
• Instalarlo en el servidor web
➔
Instrucciones: htp://trac.osgeo.org/openlayers/wiki/FrequentlyAskedQuestons#ProxyHost
62. Añadiendo capas
Capas WFS
Todavía falta una cosa...
• ¿Cómo sabe OpenLayers dónde está el proxy?
● Estableciendo la variable OpenLayers.ProxyHost a la ruta relatva
al proxy
● A partr de ahí, cualquier petción gestonada por OpenLayers
susceptble de necesitar pasar por un proxy lo hará correctamente
63. Añadiendo capas
Capas WFS
Al grano.
• Partremos del código de curso-5.html.
• Como dijimos, lo primero es establecer dónde está nuestro proxy
● En Ubuntu, Windows con XAMPP y Mac con MAMP está en "/cgi-
bin/proxy.cgi?url="
<script type="text/javascript">
var map;
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
function init() {
....
64. Añadiendo capas
Capas WFS
• Dado que nuestra capa WFS sólo contene features de los EEUU,
vamos a crear una capa base WMS primero
var base = new OpenLayers.Layer.WMS("Capa base",
"http://tilecache.osgeo.org/wms-c/Basic.py",
{layers: "basic"}
);
map.addLayer(base);
• Así conseguimos una imagen de fondo de referencia
65. Añadiendo capas
Capas WFS
• Creamos la capa WFS, a la cual le pasamos algunas opciones nuevas
que explicamos a contnuación
var wfs = new OpenLayers.Layer.Vector("Capa WFS", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.WFS({
url: "http://demo.opengeo.org/geoserver/wfs",
featureType: "states",
featureNS: "http://www.openplans.org/topp"
})
});
map.addLayer(wfs);
66. Añadiendo capas
Capas WFS
• Fíjate:
• La capa es en realidad una capa Vector
• El que sea WFS, KML, GML, etc. lo establece el protocolo
• Esto se debe a una decisión de diseño que tomaron los
desarrolladores de la librería
• El número de capas aumenta constantemente
• Muchas comparten la naturaleza vectorial
➔ Simplifcación de la librería
67. Añadiendo capas
Capas WFS
• La estrategia:
• Indica a OpenLayers cómo solicitar las features
• Al utlizar la estrategia Fixed, OpenLayers pedirá todas las
features existentes sólo una vez
• Si utlizásemos la estrategia BBOX, OpenLayers solicitaría
features dentro del marco que se está visualizando
• En este ejemplo es asumible utlizar Fixed porque:
• Son pocas features
• Somos muchos a la vez :) (menos petciones)
68. Añadiendo capas
Capas WFS
● Existen otras (Fixed, Filter, Refresh, Save...)
● Combinables
● Algunas sirven para otras cosas
– Save: permite guardar cambios en el servidor
– Refresh: permite recargar manualmente o por intervalos las
features
– ...
69. Añadiendo capas
Capas WFS
● El protocolo WFS:
protocol: new OpenLayers.Protocol.WFS({
url: "http://demo.opengeo.org/geoserver/wfs",
featureType: "states",
featureNS: "http://www.openplans.org/topp"
})
...
● Recibe parámetros parecidos a los que recibe una capa WMS
70. Añadiendo capas
Capas WFS
● url: la URL del servicio WFS → "http://demo.opengeo.org/geoserver/wfs"
● featureType: el tpo de feature (equivalente a la capa concreta en las
capas WMS) → "states"
● featureNS: el namespace del tpo de feature (cada tpo de feature se
defne en un espacio de nombres) → "http://www.openplans.org/topp"
● Con esto, OpenLayers tene sufciente para pedir y dibujar la capa
71. Añadiendo capas
Capas WFS
● Por últmo, establecemos el viewport y añadimos el selector de capas
map.zoomToExtent(new OpenLayers.Bounds(-140.4, 25.1, -44.4, 50.5));
map.addControl(new OpenLayers.Control.LayerSwitcher());
● Fíjate:
● Ahora, en lugar de establecer el centro, defnimos directamente el
campo de visión con el método zoomToExtent()
– Recibe como parámetro un objeto OpenLayers.Bounds, que
defne un rectángulo a través de minx, miny, maxx, maxy
73. Añadiendo capas
Capas WFS
● Fíjate:
● La petción (mira el Firebug!) no recibe una imagen como con las
capas WMS, recibe un XML con las geometrías
● Es OpenLayers quien renderiza al vuelo la imagen a partr de los
datos
● El estlo utlizado es el que viene por defecto, pero se puede
confgurar
74. Introducción a OpenLayers
Qué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capas
➔ Controles
➔ Interacción con el servidor
(a través de estándares OGC)
75. Controles
Introducción a los Controles
Muy bonito Xurxo, pero... ¿ahora qué?
● Controles: permiten interactuar con el mapa .
➢ Extenden a la clase: OpenLayers.Control
● Paneles: agregación de controles.
➢ Extenden a la clase: OpenLayers.Panel
76. Controles
Introducción a los Controles
● ¿Quién puso eso ahí?
77. Controles
Introducción a los Controles
● Por defecto, si no se añade explícitamente ningún
control al mapa, éste se inicializa con 4 controles:
● OpenLayers.Control.ArgParser : Lee los parámetros de la URL y actualiza el
mapa.
● OpenLayers.Control.Atributon : muestra las atribuciones de los mapas consultados
(propiedad 'atributon' de OpenLayers.Layer).
● OpenLayers.Control.PanZoom : agregación de dos controles: PanPanel y ZoomPanel.
● OpenLayers.Control.Navigaton : permite controlar la visualización del mapa a través
del ratón.
78. Controles
Otros controles predefnidos
● OpenLayers.Control.KeyboardDefaults : para navegar por el mapa mediante el teclado (fechas, +/-,...)
● OpenLayers.Control.PanZoomBar : dibuja una barra de zoom que permite acercar y alejar el mapa.
● OpenLayers.Control.PanPanel : dibuja unos botones dentro del visor para desplazar el mapa.
● OpenLayers.Control.ZoomPanel : agregación de los tres controles que gestonan el nivel de zoom :
OpenLayers.Control.ZoomIn, OpenLayers.Control.ZoomToMaxExtent, OpenLayers.Control.ZoomOut.
● OpenLayers.Control.Permalink : crea un enlace a la visualización actual del mapa.
● OpenLayers.Control.MousePositon : indica la posición del cursor en el mapa.
● OpenLayers.Control.OverviewMap : mapa de referencia en la esquina inferior derecha del mapa.
● OpenLayers.Control.LayerSwitcher : permite ver la leyenda del mapa, mostrando las capas disponibles y permitendo
elegir las que se desean visualizar.
● OpenLayers.Control.Measure : permite medir tanto distancias como áreas dentro del visor.
● ...
79. Controles
Ejemplo 1
Añadimos más controles al visor
function init() {
var map = new OpenLayers.Map( 'map' , {controls: []});
…
// CONTROLES
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Attribution());
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.ArgParser());
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.KeyboardDefaults());
map.addControl(new OpenLayers.Control.ScaleLine());
…
}
81. Controles
Controles de edición
● Estos controles tienen que tener asociada una capa vectorial (
OpenLayers.Layer.Vector) sobre la que se dibujarán los
elementos.
● OpenLayers.Control.DrawFeature : permite dibujar polígonos, líneas o puntos.
● OpenLayers.Control.ModifyFeature : permite modificar elementos.
● OpenLayers.Control.SelectFeature : permite seleccionar elementos haciendo click sobre
ellos.
● OpenLayers.Control.TransformFeature : permite aplicar transformaciones a elementos
● OpenLayers.Control.EditingToolbar : panel que incorpora los controles de dibujar
polígonos, líneas, puntos y navegación.
82. Controles
Ejemplo 2
Añadimos controles de edición:
function init() {
…
var vector_layer = new OpenLayers.Layer.Vector( "Editable" );
...
var edit_panel = new OpenLayers.Control.EditingToolbar(vector_layer);
map.addControl(edit_panel);
…
}
83. Controles
Ejemplo 2
Añadimos un nuevo control al toolbar:
function init() {
…
var vector_layer = new OpenLayers.Layer.Vector( "Editable" );
...
var edit_panel = new OpenLayers.Control.EditingToolbar(vector_layer);
var modify_feature_ctrl = new OpenLayers.Control.ModifyFeature(vector_layer,
{
title: "Modify Feature",
displayClass: "olControlModifyFeature"
});
edit_panel.addControls(modify_feature_ctrl);
map.addControl(edit_panel);
…
}
85. Controles
Defniendo nuestros propios controles
● Extender la clase OpenLayers.Control o cualquiera de las clases
de los controles predefinidos.
OpenLayers.Control.MiControl = OpenLayers.Class(OpenLayers.Control, {
…
}
87. Introducción a OpenLayers
Qué vamos a ver
➔ Introducción a la librería
➔ Añadiendo capas
➔ Controles
➔ Interacción con el servidor
(a través de estándares OGC)
88. Interacción con el servidor
OGC
● Open Geospacial Consortum.
● Organización estandarizadora (1994).
● Internacional.
● Sin ánimo de lucro.
● Persigue, sobre todo, la interoperabilidad de los diferentes
sistemas GIS
● +400 miembros.
htp://www.opengeospatal.org/
89. Interacción con el servidor
Estándares OGC
● GML (Geography Markup Language):
● XML para representar información geográfca.
● KML (Keyhole Markup Language):
● XML para representar datos geográfcos en 3D.
● WMS (Web Map Server):
● Interfaz para publicar mapas de información georeferenciadas
(imágenes).
90. Interacción con el servidor
Estándares OGC
● WFS (Web Feature Service):
● Interfaz para publicar información geoespacial a través de la web
(GML sobre HTTP).
● WCS (Web Coverage Service):
● Interfaz para publicar coberturas.
● SOS (Sensor Observaton Service):
● Defne el modo de acceso a los sensores a través de la web.
● ...
91. Interacción con el servidor
WFS
● OGC Web Feature Service Implementaton Specifcaton
● Petciones WFS:
● GetCapabilites:
➢ Ejemplo
● DescribeFeatureType:
➢ Ejemplo
● GetFeature:
➢ Ejemplo
93. Interacción con el servidor
Ejemplo 1: WFS GetFeature
● Y a cambiar el mundo!
94. Interacción con el servidor
WFS-T
● Permite cambiar la información en el servidor.
● Ejemplo con OpenLayers:
htp://openlayers.org/dev/examples/wfs-protocol-transactons.html
95. Interacción con el servidor
WMS
● OGC Web Map Service Implementaton Specifcaton
● Petciones WMS:
●
GetCapabilites:
➢ Ejemplo
● DescribeLayer:
➢ Ejemplo
● GetMap:
➢ Ejemplo
● GetFeatureInfo:
➢ Ejemplo
96. Interacción con el servidor
Ejemplo 2: WMS GetFeatureInfo
function init() {
…
info = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'http://v2.suite.opengeo.org/geoserver/ows',
title: 'Identify features by clicking',
queryVisible: true,
eventListeners: {
getfeatureinfo: function(event) {
if (popup !== undefined) {
map.removePopup(popup);
}
popup = new OpenLayers.Popup.FramedCloud(
"chicken",
map.getLonLatFromPixel(event.xy),
new OpenLayers.Size(50,50),
event.text,
null, true );
map.addPopup(popup);
}
}
});
map.addControl(info);
info.activate();
…
}
97. Interacción con el servidor
Ejemplo 2: WMS GetFeatureInfo
● Y consultando...
99. Introducción a la librería
Permanece conectado...
Xeoinquedos
http://xeoinquedos.wordpress.com
http://wiki.osgeo.org/wiki/Geoinquietos_Zona_Norte
: #xeoinquedos
►
100. Introducción a la librería
Permanece conectado...
OSGeo-ES
Capítulo Local de la comunidad hispanohablante del OSGeo
(http://wiki.osgeo.org/wiki/Capítulo_Local_de_la_comunidad_hispanohablante)
: #osgeoes
►