Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecidas para Internet
-
Upload
kudos-ltda -
Category
Technology
-
view
6.771 -
download
2
description
Transcript of Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecidas para Internet
Integración de Adobe Flex y Google Maps:
Aplicaciones Geográficas Enriquecidas para Internet
Carlos InfanteJuan Carlos Méndez
Kudos Ltda.
http://www.gkudos.com
Página 2
08/09/2008
Agenda
I. Introducción a los Datos Geográficos y Sistemas de Información Geográfica (SIG)
II. Taller: Integración de Adobe Flex y Google Maps(Adobe Flex como Herramienta para el Desarrollo de sistemas SIG basados en Web)
III. Aplicaciones Geográficas (Empresariales) Enriquecidas para Internet
IV. Demostración de GeoRIA’s
V. Preguntas y Conclusiones
1. Introducción a los Datos Geográficos y Sistemas de Información
Geográfica (SIG)
http://www.gkudos.com
Página 4
08/09/2008
Que es un SIG?
• Es un conjunto de funcionalidades que permiten capturar, almacenar, manipular, analizar, validar y desplegar datos geográficos utilizando adecuados canales de comunicación para su socialización y diseminación.
http://www.gkudos.com
Página 5
08/09/2008
Personas
Aplicaciones
Software
Equipos
DatosRequieren
Accesados
Canales de Comunicación
Componentes de un SIG
http://www.gkudos.com
Página 6
08/09/2008
Dato Geográfico• Se caracterizan por que tienen una localización espacial
(Latitud y longitud)
Latitud : Latitud Norte 4°35’56’’57
Longitud
Longitud Oeste de Greenwich 74°04’51’’30
http://www.gkudos.com
Página 7
08/09/2008
Ventajas de los Mapas y los SIG
• Capacidad de visualizar los eventos directamente en la localización geográfica donde ocurrieron o están sucediendo.
• Visualización rápida de eventos• Capacidad de realizar análisis espaciales donde se
combinan diferentes clases de variables• Generación de reportes que incluyen mapas
cartográficamente válidos
http://www.gkudos.com
Página 8
08/09/2008
Evolución de los SIG1960 1970 1980 1990 2000
Implementación de primeros SIG en CANADA y EEUU
Inicio de difusión en Agencias estatales
Difusión Comercial Masificación
CARTOGRAFIASISTEMAS DE INFORMACION GEOGRAFICA
WEB ‘ SIG
GRIA
* Adaptada de Online visualization of spatial data Thomas Hachler
Aplicaciones standalone
Arquitecturas Web
Sistemas AbiertosEstándares
Estandarización
RIA
http://www.gkudos.com
Página 9
08/09/2008
SIG en la WEB: 1997
Tomado de “Web Mapping Systems”http://www.slideshare.net/cageyjames/web-mapping-systems/
http://www.gkudos.com
Página 10
08/09/2008
SIG en la WEB: 2008
Google Earth
http://www.gkudos.com
Página 11
08/09/2008
Retos Actuales para los SIG Basados en WEb
• Reducción de Costos en Licenciamiento de Software
• Facilidad de Uso• Desempeño• Interoperabilidad con Otros Sistemas• Estandarización• Publicación a través de la Web
2. Taller: Integración de Adobe Flex y Google Maps
(Adobe Flex como Herramienta para el Desarrollo de sistemas SIG
basados en Web)
http://www.gkudos.com
Página 13
08/09/2008
Taller• En el presente taller se desarrollará un
prototipo de aplicación utilizando Adobe Flex y Google Maps donde se mostrarán algunas de las características más sobresalientes de dichas herramientas.
• Metodología:– Definición de Requerimientos del Sistema– Desarrollo Iterativo del Prototipo creando y
explicando cada una de las partes de código fuente que lo componen.
<Taller de Google Maps en Flex />
Prototipo de Aplicación Flex para Visualización Interactiva de Eventos
de Terremotos
antes de empezar a <programar/>…
qué desea nuestro “cliente”?(o los requerimientos…)
http://www.gkudos.com
Página 16
08/09/2008
Descripción del Problema
• Se desea proveer un sistema interactivo para consulta y visualización de información relacionada con Sismos.
• El “sistema actual” tiene algunas deficiencias respecto a presentación, usabilidad y desempeño.
http://www.gkudos.com
Página 17
08/09/2008
Descripción del Problema• Página Actual de Consulta de “Nuestro Cliente”:
http://www.ngdc.noaa.gov/nndc/struts/form?t=101650&s=1&d=1
http://www.gkudos.com
Página 18
08/09/2008
Descripción del Problema
• Página Actual de Resultados
http://www.gkudos.com
Página 19
08/09/2008
Requerimientos
• Requerimientos:– Visualización de Eventos en un Mapa– Filtrado Interactivo de Datos– Carga de Datos en XML– Personalización de Diseño Gráfico– La aplicación debe ser Basada en Web– Incorporación de Animación, Video y Fotografías– Compatibilidad con Firefox e Internet Explorer
http://www.gkudos.com
Página 20
08/09/2008
Requerimientos• Requerimientos:
– Rapidez en el Desarrollo• Alternativas Para el Desarrollo de Aplicaciones
Enriquecidas para la Web:– Tecnologías Relacionadas con Ajax: Javascript, Dhtml,
Css, XMLHttpRequest, DOM Scripting, Dojo, jQuery, Spry, YUI, etc, etc …
– Silverlight…– Otros vendedores…y….
http://www.gkudos.com
Página 21
08/09/2008
RequerimientosY nuestra selección… (por obvias razones)
– Adobe Flex
ahora si…
<el tutorial />…
http://www.gkudos.com
Página 23
08/09/2008
Prerrequisitos Técnicos
• Flex Builder 3• Google Maps Api for Flex / Flash• Servidor Web (Ejemplo:IIS, Apache / WAMP
http://www.wampserver.com/ )• Datos de Terremotos Mundiales: Tomados
del USDOC/NOAA/NESDIS/NationalGeophysical Data Center (NGDC)http://www.ngdc.noaa.gov/
http://www.gkudos.com
Página 24
08/09/2008
Código Fuente
• Puede descargar el código fuente del taller desde la siguiente ubicación:
http://gkudos.com/web/guest/portfolio/demos/equake
http://www.gkudos.com
Página 25
08/09/2008
1. Instalando Google Maps
• Google Maps API for Flash: This API lets Flex developers embed Google Maps in Flash applications.http://code.google.com/apis/maps/documentation/flash/
• Download: http://maps.googleapis.com/maps/flash/release/sdk.zip
• Google Maps API Key: http://code.google.com/apis/maps/signup.html
• Documentation: http://code.google.com/apis/maps/documentation/
http://www.gkudos.com
Página 26
08/09/2008
1. Instalando Google Maps
http://www.gkudos.com
Página 27
08/09/2008
1. Instalando Google Maps
http://www.gkudos.com
Página 28
08/09/2008
1. Instalando Google Maps
http://www.gkudos.com
Página 29
08/09/2008
• Crear proyecto en Flex Builder• Adicionar la librería de Google Maps (map_flex_1_6.swc)
al proyecto de Flex Builder• Configuración Inicial del Mapa en la Aplicación Flex
1. Instalando Google Maps
http://www.gkudos.com
Página 30
08/09/2008
2. Configurando Controles
• Adición de Controles del Mapa (Zoom, Tipo de Mapa y Posición)
• Centrado del mapa en Un Punto inicial, Modificación del Tipo de Mapa, Selección del Nivel de Zoom
http://www.gkudos.com
Página 31
08/09/2008
3. Carga de Datos y Mostrar Puntos
• Estructura del Xml de los datos de terremotos:
http://www.gkudos.com
Página 32
08/09/2008
3. Carga de Datos y Mostrar Puntos
• Carga de listado de terremotos en un Datagrid
• Selección de Dato en el Datagrid y despliegue del evento en el mapa.
http://www.gkudos.com
Página 33
08/09/2008
3. Carga de Datos y Mostrar Puntos
http://www.gkudos.com
Página 34
08/09/2008
4. Personalización de Markers y Animación
• Personalizar el Color del Marker según la Magnitud del Sismo (Azul: Magnitud Cercana a 1, Rojo: Magnitud cercana a 9.5)
• Adicionar Tooltip al Marker• Hacer animación de movimiento entre Markers
adicionados• Adicionar Botón que Muestre todos los Eventos en
el Mapa• Adicionar Etiqueta que Muestre la Cantidad de
Eventos desplegados en el Datagrid
http://www.gkudos.com
Página 35
08/09/2008
4. Personalización de Markers y Animación
http://www.gkudos.com
Página 36
08/09/2008
5. Filtrar datos en la Interfaz de Usuario
• Modificar la aplicación para que el usuario pueda realizar filtrado de datos según un rango específico de magnitud del Sismo.
http://www.gkudos.com
Página 37
08/09/2008
5. Filtrar datos en la Interfaz de Usuario
http://www.gkudos.com
Página 38
08/09/2008
6. Adicionar Polígonos
• Adicionar un polígono que represente la profundidad del sismo. (El radio del círculo representa la profundidad del sismo)
• Adicionar Botón que permita remover todos los Overlays del Mapa
http://www.gkudos.com
Página 39
08/09/2008
6. Adicionar Polígonos
http://www.gkudos.com
Página 40
08/09/2008
7. Despliegue de Imágenes
• Adicionar Filtro para Desplegar en el Datagrid únicamente los registros que contienen foto
• Mostrar la Foto en una Nueva Ventana al dar click sobre el Marker
http://www.gkudos.com
Página 41
08/09/2008
7. Despliegue de Imágenes
http://www.gkudos.com
Página 42
08/09/2008
8. Despliegue de Video
• Adicionar Filtro para Desplegar en el Datagrid únicamente los registros que contienen video
• Mostrar el Video en una Nueva Ventana al dar click sobre el Marker
• Para ver el Video se utiliza el Componente “Flex Video Player”http://www.fxcomponents.com/?p=29
http://www.gkudos.com
Página 43
08/09/2008
8. Despliegue de Video
http://www.gkudos.com
Página 44
08/09/2008
9. Personalización del Diseño Gráfico
• Modificación Simple de los Colores del Aplicativo utilizando CSS
• Adición de Logos
http://www.gkudos.com
Página 45
08/09/2008
9. Personalización del Diseño Gráfico
<Fin del Tutorial />
3. Aplicaciones Geográficas (Empresariales) Enriquecidas para
Internet
http://www.gkudos.com
Página 48
08/09/2008
Características y Requerimientos del GIS Empresarial
• Integra datos de diferentes áreas de la organización• Soporta las actividades de Misión Crítica de la
Organización• Gran cantidad de Usuarios• Requiere continuidad en la planeación, administración,
soporte y mantenimiento.• Se Integra con diferentes procesos de negocio y
sistemas de la organización• Facilidad de Uso• Bajo Costo
http://www.gkudos.com
Página 49
08/09/2008
Integración de GIS con otros Sistemas
TransportationTransportation
Business Business ApplicationsApplications
Law Law EnforcementEnforcement
PlanningPlanning
RoadsRoads
UtilitiesUtilities
Web Services &Web Services &MessagingMessaging
Tomado de: http://www.gisdevelopment.net/proceedings/mapindia/2008/KeynoteSession1/RajeshMathur.pps
http://www.gkudos.com
Página 50
08/09/2008
Gis Empresarial: Nuestra Propuesta
• Optimización de la inversión en infraestructura para el Soporte GIS a través de la utilización de Software Libre / Código Abierto
• Visualización y análisis de Información Espacial basado en Web Utilizando tecnologías interactivas de Fácil uso. (Ejm: Adobe Flex, Google Earth, Google Maps, etc)
http://www.gkudos.com
Página 51
08/09/2008
GIS Empresarial y Software Libre
Adaptada de “Adding Spatial Smarts to PostgreSQL with PostGIS Paul Ramsey
Refractions Research
4. Demostración de GeoRIA’sKudos Ltda
http://www.gkudos.com
Página 53
08/09/2008
Demostración de GeoRIA’s - Kudos Ltda.
• Visualización de Accidentalidad y Contravenciones de Tránsito http://gkudos.com/web/guest/portfolio/clients/ibague
• Seguimiento a la Ejecución de Contratos de Inversión Social http://gkudos.com/web/guest/portfolio/clients/ue
http://www.gkudos.com
Página 54
08/09/2008
Demostración de GeoRIA’s - Kudos Ltda.
• Visualización de Indicadores de Salud en Colombia http://gkudos.com/web/guest/portfolio/demos
• Visualización de Inversiones de Contratación de Colombia en 3D http://gkudos.com/web/guest/portfolio/demos
5. Preguntas y Conclusiones
Gracias por su Atención
http://gkudos.com