explorando o html5 para visualização de dados geográficos
Post on 04-Jul-2015
380 Views
Preview:
DESCRIPTION
TRANSCRIPT
EXPLORANDO O HTML5 PARA VISUALIZACAO DE DADOS
GEOGRAFICOS
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.com3Doutor em Computação Aplicada, UFMA, São Luís-MA, prof.sergio.costa@gmail.com
Sérgio Souza CostaProfessor - UFMADoutor em Computação Aplicada (INPE)
http://info.cern.ch/hypertext/WWW/TheProject.html
A “invenção da Web” - 1991
Requisição
Resposta
ClienteServidor
Consumidor ProvedorInformação
Mapas, um importante meio de apresentar informações espaciais.
Informações não textuais.
Servidores de mapas
Primeiro servidor de mapas 1993
GetMap
ClienteServidor
Resposta
Servidores de mapas - wms
1. Preparar dados2. Definir simbologias3. Gerar e renderizar tiles4. Fazer caches de tiles5. Publicar tile
1. Exibir tiles
Toda interação com o usuário gera uma requisição ao servidor, ex: zoom, mover , consulta a atributos.
A Web não é apenas um meio de transmissão de informações. Aplicações ricas na internet.
Mudança de paradigma
Multim
edia
Offline
& S
torag
e
Graphic
s & 3D
Perform
ance
Device
s
Seman
tics
Conne
ctivit
y
Uma nova especificação, paras as novas necessidades.
Whatwg
Dados vetoriais
● Inline SVG● Canvas
Inline SVG
SVG (Scalabe Vector Graphics) integrado ao documento HTML.
Um bairro de Recife.
var b_canvas = document.getElementById("c");var context = b_canvas.getContext("2d");context.fillRect(50, 25, 150, 100);
Canvas
JavaScript
Canvas Uma região retangular da tela, que pode ser manipulada por uma API JavaScript.
Cores Estilos Sombras Caminhos Texto
Desenho de imagens
Manipulação de pixels
ComposiçãoEstilos de linha
Retângulos
Transformações
<canvas id="c" width="500" height="375"></canvas>
HTML
Inline SVG
Canvas
BibliotecaAplicação
GMLKMLGeoJSONOSM-XML
Uma biblioteca que abstraia a renderização dados geográficos, lidando com diferentes formatos.
1. Leaflet2. OpenLayer3. Cartagen
Abstraindo a visualização
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)
Micro-regiõesCicloviaPraças e áreas verdes
Integrando diferentes camadas, de diferentes fontes.
Fonte: GeoSON - Recife Dados
Leaflet - Explorando Usando requisições assíncronas (AJAX) para retornar os dados geográficos que coincidem com uma região selecionada.
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)
OpenLayer 3 - Explorando
BingMaps + Recife Dados (GeoJSON)
Fonte de dados vetoriais
1. Localmente2. Portal de dados abertos governamentais3. OpenStreetMap (API)4. Servidores de dados vetoriais
Micro-regiõesCicloviaPraças e áreas verdes
http://dados.recife.pe.gov.br/dataset
Portal de dados abertos governamentais
Dados abertos governamentais são “dados produzidos pelo governo e colocados a disposicao das pessoas de forma a tornar possıvel nao apenas sua leitura e acompanhamento, mas tambem sua reutilizacao em novos projetos, sıtios e aplicativos; seu cruzamento com outros dados de diferentes fontes” (W3C, 2011)
http://api.openstreetmap.org/api/0.6/map?bbox=-43.7161000,-20.5347000,-43.6822000,-20.5061000
OSM (API) + Bing Maps
OpenStreetMap (API)
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ão foram explorados.
OpenCarto
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.
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>.
top related