Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil...
-
Upload
trinhkhanh -
Category
Documents
-
view
223 -
download
0
Transcript of Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil...
![Page 1: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/1.jpg)
Getting Started with the ArcGIS API for JavaScript
Julie Powell Jose Antonio Anta
European Developer SummitMadrid, Nov. 15, 2012
![Page 2: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/2.jpg)
Agenda
• Introdución• Buenas Prácticas
- Utilizar WebMap• Utilizar nuevas funcionalidad para construir Aplicaciones
• HTML5• Tips & Tricks• What’s next?• Recursos
![Page 3: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/3.jpg)
Maximizando Funcionalidad
• Capas cacheadas (Tiled) Vs Dinámicas
• Feature Services- Muy potente. Cuidado- Generalización de Geometrías
• Comprobar estadisticas con el navegador- Petición- Dibujo
• Cálculo de estadísticas
![Page 4: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/4.jpg)
Feature Layers
• Purpose?
• Modo de Visualizar- Snapshot- On-Demand- Selection only
• Generalización de Geometrías
![Page 5: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/5.jpg)
Consulta de Estadísticas
• Cálculo de estadísticas del lado Servidor
• Large # features: Solo envia resultados estadísticos al cliente
• Varios Tipos de Cálculos
![Page 6: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/6.jpg)
Aplicación Interactiva
Optimizing Performance
Demo
![Page 7: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/7.jpg)
Diseño de aplicaciones
Creando un Widget Propio
Demo
![Page 8: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/8.jpg)
Agenda
• Introdución• Buenas Prácticas
- Utilizar WebMap- Utilizar nuevas funcionalidad para construir Aplicaciones
• HTML5• Tips & Tricks• What’s next?• Recursos
![Page 9: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/9.jpg)
HTML5: 5 Puntos Claves
1. No es algo grande2. No necesitas descartar nada3. Es fácil empezar4. Ya funciona5. Está aquí para quedarse
• MARK PILGRIM, Dive into HTML5
![Page 10: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/10.jpg)
Evolución de HTML5
By Sergey Mavrody 2011 | CC Attribution-ShareAlike 3.0
![Page 12: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/12.jpg)
Componentes HTML5 en el API JavaScript (o proximamente)
Canvas (Control del Pixely gráficos android)
Transiciones CSS3CORS
Operaciones intensivas CPU
Alto rendimiento en navegadores
Transformaciones 3D CSS
![Page 13: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/13.jpg)
Ejemplo: Almacenar marcadores localmente
• Tratar de almacenar el marcador en el almacenamiento local.
• Si no es soportado: Cookie
![Page 14: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/14.jpg)
Ejemplo: Apilamiento offline
• Trabajadores web• Utilizar almacenamiento web
para apilar
• Próximamente… TPK• Utilizando API de archivo,
BLOB API
![Page 16: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/16.jpg)
Agenda
• Introdución• Buenas Prácticas
- Utilizar WebMap- Utilizar nuevas funcionalidad para construir Aplicaciones
• HTML5• Tips & Tricks• What’s next?• Recursos
![Page 17: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/17.jpg)
Ayuda!!!!…
• Getting Started• Working with Dojo
![Page 18: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/18.jpg)
Tips & Tricks : Usar herramientas de desarrollador(firebug, Chrome, etc)
![Page 19: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/19.jpg)
JS Beautifier
![Page 20: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/20.jpg)
JSHint / JSLint
![Page 21: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/21.jpg)
Plug-ins
![Page 22: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/22.jpg)
Y si no quiero utilizar Dojo?
• Compatability with other JavaScript frameworks, for example:
- jQuery- ExtJS- Multiple versions of Dojo- Leaflet
![Page 23: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/23.jpg)
![Page 24: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/24.jpg)
![Page 25: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/25.jpg)
Agenda
• Introdución• Buenas Prácticas
- Utilizar WebMap- Utilizar nuevas funcionalidad para construir Aplicaciones
• HTML5• Tips & Tricks• What’s next?• Recursos
![Page 26: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/26.jpg)
ArcGIS API JavaScript Roadmap
• Simplificación del API• Nuevos Widgets (widget Localizar lugares) • Dojo 1.8• More build profiles • Conformidad AMD • Soporte tactil completo en IE 10
En desarrollo• Web Workers• Conexiones Socket• CityEngine WebScenes
![Page 27: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/27.jpg)
Coming soon… Interactive Sandbox
![Page 28: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/28.jpg)
![Page 29: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/29.jpg)
![Page 30: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/30.jpg)
Layers
![Page 31: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/31.jpg)
Configure Development Environment
• Set up web server• IDEs• Debugging & Tools
![Page 32: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/32.jpg)
How to run code from web server (IIS)
![Page 33: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/33.jpg)
esri.request
Your code
Browser Web Server Remote Server
ArcGIS Server
proxy
Proxy
![Page 34: Getting Started with the ArcGIS API for JavaScript · Capas cacheadas (Tiled) ... 3. Es fácil empezar 4. Ya funciona 5. Está aquí para quedarse ... Ejemplo: Apilamiento offline](https://reader030.fdocuments.us/reader030/viewer/2022013000/5bc25c4c09d3f291178bf1ff/html5/thumbnails/34.jpg)
CORS
esri.request
Your code
Browser Remote Server
ArcGIS Server