EXPLORANDO O HTML5 PARA VISUALIZAC A O DE DADOS GEOGRA FICOS

Tamanho: px

Começar a partir da página:

Download "EXPLORANDO O HTML5 PARA VISUALIZAC A O DE DADOS GEOGRA FICOS"

Alícia Figueiredo da Silva
6 Há anos
Visualizações:

EXPLORANDO O HTML5 PARA VISUALIZAC A O DE DADOS GEOGRA FICOS Marcel Mendonça Grilo1, Jéferson José Ribeiro2,, Sérgio Souza Costa3 1 Cientista da Computação, UNIFEI, Itajubá-MG,

1 EXPLORANDO O HTML5 PARA VISUALIZAC A O DE DADOS GEOGRA FICOS Marcel Mendonça Grilo1, Jéferson José Ribeiro2,, Sérgio Souza Costa3 1 Cientista da Computação, UNIFEI, Itajubá-MG, marcelgrilo86@gmail.com Cientista da Computação, UNIFEI, Itajubá-MG, jefersonjribeiro@gmail.com 3 Doutor 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 A invenção da Web

4 Informação Consumidor Provedor Requisição Resposta Cliente Servidor

5 Mapas, um importante meio de apresentar informações espaciais. Informações não textuais.

6 Servidores de mapas Primeiro servidor de mapas 1993

7 Servidores de mapas - wms GetMap Resposta Cliente Servidor 1. Exibir tiles Toda interação com o usuário gera uma requisição ao servidor, ex: zoom, mover, consulta a atributos Preparar dados Definir simbologias Gerar e renderizar tiles Fazer caches de tiles Publicar tile

8 Mudança de paradigma A Web não é apenas um meio de transmissão de informações. Aplicações ricas na internet.

9 C M ia es ic D ev ed tim ul s tic an m Se ity iv ct ne on rfo Pe & an ce 3D ag e rm ic s or St ph & ra G e in ffl O Whatwg Uma nova especificação, paras as novas necessidades.

10 Dados vetoriais Inline SVG Canvas

11 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 <canvas id="c" width="500" height="375"></canvas> JavaScript var b_canvas = document.

12 Canvas Uma região retangular da tela, que pode ser manipulada por uma API JavaScript. HTML Canvas <canvas id="c" width="500" height="375"></canvas> JavaScript var b_canvas = document. getelementbyid("c"); var context = b_canvas.getcontext ("2d"); context.fillrect(50, 25, 150, 100); Cores Desenho de imagens Estilos Estilos de linha Sombras Caminhos Manipulação de pixels Texto Composição Transformações Retângulos

13 Abstraindo a visualização Uma biblioteca que abstraia a renderização dados geográficos, lidando com diferentes formatos. Inline SVG Aplicação Biblioteca GML KML GeoJSON OSM-XML Leaflet OpenLayer Cartagen Canvas

14 Leaflet ( 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 Leaflet - Explorando Integrando diferentes camadas, de diferentes fontes. Fonte: GeoSON - Recife Dados Micro-regiões Ciclovia Praças e áreas verdes Usando requisições assíncronas (AJAX) para retornar os dados geográficos que coincidem com uma região selecionada.

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 OpenLayer 3 - Explorando BingMaps + Recife Dados (GeoJSON)

18 Fonte de dados vetoriais Localmente Portal de dados abertos governamentais OpenStreetMap (API) Servidores de dados vetoriais

19 Portal de dados abertos governamentais Dados abertos governamentais são dados produzidos pelo governo e colocados a disposic a o das pessoas de forma a tornar possı vel na o apenas sua leitura e acompanhamento, mas tambe m sua reutilizac a o em novos projetos, sı tios e aplicativos; seu cruzamento com outros dados de diferentes fontes (W3C, 2011) Micro-regiões Ciclovia Praças e áreas verdes

OpenStreetMap (API) OSM (API) + Bing Maps http://api.openstreetmap.

20 OpenStreetMap (API) OSM (API) + Bing Maps ,

21 OpenStreetMap (API) Formato Tamanho OSM (XML) 4,1 MB GeoJSON 6,3 MB GeoJSON Minify 1,9 MB

22 OpenStreetMap (API) Visualização prejudicada em níveis de zoom baixos, pelo grande volume de dados.

23 Servidores de dados vetoriais Vector tiling Multiescala e generalização Fonte: GAFFURI (2012)

24 Servidores de dados vetoriais Existem alguns protótipos, como o TileStache (Python) e OpenCarto (Java). Neste trabalho não foram explorados. OpenCarto

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 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, v. 7478p W3C. Manual dos dados abertos: governo. Disponı vel em: < w3c.br/pub/materiais/publicacoesw3c/manual_dados_abertos_web.pd f>.

Documentos relacionados

EXPLORANDO O HTML5 PARA VISUALIZAÇÃO DE DADOS GEOGRÁFICOS. PALAVRAS-CHAVE: SIG, HTML5, Servidor de Mapas, Dados Geográficos

EXPLORANDO O HTML5 PARA VISUALIZAÇÃO DE DADOS GEOGRÁFICOS Marcel Mendonça Grilo 1, Jéferson José Ribeiro 2,, Sérgio Souza Costa 3 1 Cientista da Computação, UNIFEI, Itajubá-MG, marcelgrilo86@gmail.com