EXPLORANDO O HTML5 PARA 
VISUALIZAÇ ÃO DE DADOS 
GEOGRÁFICOS 
Marcel Mendonça Grilo1, Jéferson José Ribeiro2,, Sérgio S...
Sérgio Souza Costa 
Professor - UFMA 
Doutor em Computação Aplicada (INPE)
A “invenção da Web” - 1991 
http://info.cern.ch/hypertext/WWW/TheProject.html
Consumidor Provedor 
Requisição 
Resposta 
Cliente 
Servidor 
Informação
Mapas, um importante meio de apresentar 
informações espaciais. 
Informações 
não textuais.
Servidores de mapas 
Primeiro servidor 
de mapas 1993
Servidores de mapas - wms 
GetMap 
Cliente 
Servidor 
Resposta 
1. Preparar dados 
2. Definir simbologias 
3. Gerar e rend...
Mudança de paradigma 
A Web não é apenas um meio de transmissão de 
informações. Aplicações ricas na internet.
Whatwg 
Uma nova especificação, 
paras as novas necessidades. 
Multimedia 
Offline & Storage 
Graphics & 3D 
Performance 
...
Dados vetoriais 
● Inline SVG 
● Canvas
Inline SVG 
SVG (Scalabe Vector Graphics) integrado ao 
documento HTML. 
Um bairro de Recife.
Canvas 
Uma região retangular da tela, que pode ser manipulada 
por uma API JavaScript. 
HTML 
<canvas id="c" width="500" ...
Abstraindo a visualização 
Uma biblioteca que abstraia a renderização dados 
geográficos, lidando com diferentes formatos....
Leaflet (http://leafletjs.com/) 
● Biblioteca JavaScript, moderna (JQuery like) e leve 
(125kb). 
● Desenvolvida e mantida...
Leaflet - Explorando Usando requisições assíncronas 
Integrando diferentes camadas, de 
diferentes fontes. 
Fonte: GeoSON ...
OpenLayer 3 
● Biblioteca JavaScript moderna (versão 3 redesenhada). 
● Muito bem documentada, com guias, tutoriais e exem...
OpenLayer 3 - Explorando 
BingMaps + Recife Dados (GeoJSON)
Fonte de dados vetoriais 
1. Localmente 
2. Portal de dados abertos governamentais 
3. OpenStreetMap (API) 
4. Servidores ...
Portal de dados abertos 
governamentais 
Micro-regiões 
Ciclovia 
Praças e áreas verdes 
http://dados.recife.pe.gov.br/dat...
http://api.openstreetmap.org/api/0.6/map?bbox=-43.7161000,-20.5347000, 
-43.6822000,-20.5061000 
OSM (API) + 
Bing Maps 
O...
OpenStreetMap (API) 
Formato Tamanho 
OSM (XML) 4,1 MB 
GeoJSON 6,3 MB 
GeoJSON 
Minify 
1,9 MB
OpenStreetMap (API) 
Visualização prejudicada em níveis de zoom 
baixos, pelo grande volume de dados.
Servidores de dados vetoriais 
Vector tiling 
Multiescala e 
generalização 
Fonte: GAFFURI (2012)
Servidores de dados vetoriais 
Existem alguns protótipos, como o TileStache 
(Python) e OpenCarto (Java). Neste trabalho n...
Considerações finais 
● Os servidores de mapas evoluíram muito nos últimos 20 anos, 
tornando mais fácil a experiência do ...
Referências 
GAFFURI, J. Toward Web Mapping with Vector Data. In: XIAO, N.; KWAN, 
M.-P.; GOODCHILD, M.; SHEKHAR, S. (Eds....
Próximos SlideShares
Carregando em…5
×

Explorando o HTML5 para visualização de dados geográficos

770 visualizações

Publicada em

Os novos recursos do HTML5 estão trazendo novas possibilidades para o desenvolvimento de aplicações web, como por exemplo, as aplicações para visualização de dados geográficos. Agora é possível visualizar dados vetoriais diretamente nos navegadores web. Este recurso pode ter um grande impacto na forma de desenvolver e projetar essas aplicações, pois não requer que estes dados sejam convertidos em imagens. Considerando este novo cenário, este trabalho tem como objetivo investigar estes novos recursos, identificando suas vantagens e restrições para visualização de dados vetoriais através da web.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
770
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Explorando o HTML5 para visualização de dados geográficos

  1. 1. EXPLORANDO O HTML5 PARA VISUALIZAÇ ÃO DE DADOS GEOGRÁFICOS Marcel Mendonça Grilo1, Jéferson José Ribeiro2,, Sérgio Souza Costa3 1Cientista da Computação, UNIFEI, Itajubá-MG, marcelgrilo86@gmail.com 2Cientista da Computação, UNIFEI, Itajubá-MG, jefersonjribeiro@gmail.com 3Doutor em Computação Aplicada, UFMA, São Luís-MA, prof.sergio.costa@gmail.com
  2. 2. Sérgio Souza Costa Professor - UFMA Doutor em Computação Aplicada (INPE)
  3. 3. A “invenção da Web” - 1991 http://info.cern.ch/hypertext/WWW/TheProject.html
  4. 4. Consumidor Provedor Requisição Resposta Cliente Servidor Informação
  5. 5. Mapas, um importante meio de apresentar informações espaciais. Informações não textuais.
  6. 6. Servidores de mapas Primeiro servidor de mapas 1993
  7. 7. Servidores de mapas - wms GetMap Cliente Servidor Resposta 1. Preparar dados 2. Definir simbologias 3. Gerar e renderizar tiles 4. Fazer caches de tiles 5. Publicar tile 1. Exibir tiles Toda interação com o usuário gera uma requisição ao servidor, ex: zoom, mover , consulta a atributos.
  8. 8. Mudança de paradigma A Web não é apenas um meio de transmissão de informações. Aplicações ricas na internet.
  9. 9. Whatwg Uma nova especificação, paras as novas necessidades. Multimedia Offline & Storage Graphics & 3D Performance Devices Semantics Connectivity
  10. 10. Dados vetoriais ● Inline SVG ● Canvas
  11. 11. Inline SVG SVG (Scalabe Vector Graphics) integrado ao documento HTML. Um bairro de Recife.
  12. 12. Canvas Uma região retangular da tela, que pode ser manipulada por uma API JavaScript. HTML <canvas id="c" width="500" height="375"></canvas> var b_canvas = document. getElementById("c"); var context = b_canvas.getContext ("2d"); context.fillRect(50, 25, 150, 100); Canvas JavaScript Cores Estilos Sombras Caminhos Texto Desenho de Estilos de Manipulação Composição imagens linha de pixels Retângulos Transformações
  13. 13. Abstraindo a visualização Uma biblioteca que abstraia a renderização dados geográficos, lidando com diferentes formatos. Inline SVG Canvas Aplicação Biblioteca GML KML GeoJSON OSM-XML 1. Leaflet 2. OpenLayer 3. Cartagen
  14. 14. Leaflet (http://leafletjs.com/) ● Biblioteca JavaScript, moderna (JQuery like) e leve (125kb). ● Desenvolvida e mantida pela Cloudmade, e com contribuições de diversos programadores. ● Muito bem documentada, com guias, tutoriais e exemplos. ● Suporte a SVG, canvas e VML (IE antigos). ● Extendido através de plugins ● Tile layers (OSM, WMS) ● Vector layers (GeoJSON) ● Projeção (latlong,Spherical Mercator)
  15. 15. Leaflet - Explorando Usando requisições assíncronas Integrando diferentes camadas, de diferentes fontes. Fonte: GeoSON - Recife Dados Micro-regiões Ciclovia Praças e áreas verdes (AJAX) para retornar os dados geográficos que coincidem com uma região selecionada.
  16. 16. OpenLayer 3 ● Biblioteca JavaScript moderna (versão 3 redesenhada). ● Muito bem documentada, com guias, tutoriais e exemplos. ● Suporte a SVG, canvas e VML (IE antigos). ● Muitos recursos. ● Tile layers (OSM, Bing, MapQuest, WMS) ● Vector layers (GeoJSON, KML, GML, TopoJSON) ● Projeção (latlong,Spherical Mercator)
  17. 17. OpenLayer 3 - Explorando BingMaps + Recife Dados (GeoJSON)
  18. 18. Fonte de dados vetoriais 1. Localmente 2. Portal de dados abertos governamentais 3. OpenStreetMap (API) 4. Servidores de dados vetoriais
  19. 19. Portal de dados abertos governamentais Micro-regiões Ciclovia Praças e áreas verdes http://dados.recife.pe.gov.br/dataset Dados abertos governamentais são “dados produzidos pelo governo e colocados à disposição das pessoas de forma a tornar possı́vel não apenas sua leitura e acompanhamento, mas também sua reutilização em novos projetos, sı́tios e aplicativos; seu cruzamento com outros dados de diferentes fontes” (W3C, 2011)
  20. 20. http://api.openstreetmap.org/api/0.6/map?bbox=-43.7161000,-20.5347000, -43.6822000,-20.5061000 OSM (API) + Bing Maps OpenStreetMap (API)
  21. 21. OpenStreetMap (API) Formato Tamanho OSM (XML) 4,1 MB GeoJSON 6,3 MB GeoJSON Minify 1,9 MB
  22. 22. OpenStreetMap (API) Visualização prejudicada em níveis de zoom baixos, pelo grande volume de dados.
  23. 23. Servidores de dados vetoriais Vector tiling Multiescala e generalização Fonte: GAFFURI (2012)
  24. 24. Servidores de dados vetoriais Existem alguns protótipos, como o TileStache (Python) e OpenCarto (Java). Neste trabalho não foram explorados. OpenCarto
  25. 25. Considerações finais ● Os servidores de mapas evoluíram muito nos últimos 20 anos, tornando mais fácil a experiência do usuário. ● O HTML5 traz novas oportunidades e desafios na construção de outros tipos de aplicativos ○ Não apenas prover informações espaciais. ● O uso de dados vetoriais, não pode ser visto como substituto aos servidores de mapas atuais, mas sim a base para uma nova geração de aplicativos geográficos na web. ● Existem ainda outros recursos, como GeoLocation, WebSocket, Offline Storage. ● Visualização de dados vetoriais se mostra um importante instrumento de apoio a divulgação e integração de dados abertos governamentais.
  26. 26. Referências GAFFURI, J. Toward Web Mapping with Vector Data. In: XIAO, N.; KWAN, M.-P.; GOODCHILD, M.; SHEKHAR, S. (Eds.). Geographic Information Science SE - 7. Lecture Notes in Computer Science. [S.l.]: Springer Berlin Heidelberg, 2012. v. 7478p. 87–101. W3C. Manual dos dados abertos: governo. Disponı́vel em: <http://www. w3c.br/pub/Materiais/PublicacoesW3C/Manual_Dados_Abertos_WEB.pd f>.

×