Tutorial sobre visualização de dados geo-referenciados com
OpenLayers e SIMILE Widgets
DEI-IST 2009/2010
Organização do Tutorial
Introdução do OpenLayers
Visualização de dados georeferenciados
Apresentação da framework
Mapas simples, uso de várias camadas e posicionamento.
Visualização de de dados representados em GML
Visualização de dados representados em KML
Visualização de dados com o SIMILE Exhibit
Visualização de informação com referências geo-temporais
Aplicações com mapas, timelines e pesquisa por facetas
Parte 1
INTRODUÇÃO AO
OPENLAYERS
Introdução ao OpenLayers
2005
Mapas dinâmicos em aplicações Web com Google Maps, Yahoo! Maps, ...
Várias APIs proprietárias.
2006
Lançamento do OpenLayers (MetaCarta, código aberto, licença BSD)
Uma framework “client-side” para aplicações Web-GIS
Suporta formatos abertos e proprietários
Facilita desenvolvimento de aplicações Web com mapas dinâmicos
Framework muito utilizada no desenvolvimento de mashups
http://gallery.openlayers.org/
Framework cliente para Web-GIS
http://mapserver.org/
http://geoserver.org/
Apresentação de um mapa
<html>
<head>
<title>OpenLayers Example</title>
<script src=”http://openlayers.org/api/OpenLayers.js” />
<script type="text/javascript”>
function init() { }
</script>
</head>
<body onload=init()>
<div style="width: 800px; height: 475px;" id="map">
Hello My Map
</div>
</body>
</html>
Apresentação de um mapa
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers:'basic'} );
map.addLayer(wms);
map.zoomToMaxExtent();
Sistema de coordenadas
usado por omissão:
EPSG: 4326 (WGS84)
Alterações no mapa inicial
remover map.zoomToMaxExtent(); e adicionar:
var lon = 9.06; var lat = 45.80;
var zoom = 10;
map.setCenter(
new OpenLayers.LonLat(lon, lat),
zoom
);
Adição de novos controlos sobre o mapa:
map.addControl(
new OpenLayers.Control.LayerSwitcher()
);
map.addControl(
new OpenLayers.Control.MousePosition()
);
Adição de novas camadas
var CTR = new OpenLayers.Layer.WMS(
'CTR WMS',
'http://www.cartografia.regione.lombardia.it/’ +
'arcgis93/services/wms/ctr_wms/MapServer/WMSServer',
{layers:'0', projection: 'EPSG:4326'}
);
map.addLayer(CTR);
Adicionar uma “overlay layer”:
var CT10 = new OpenLayers.Layer.WMS(
'CT10 WMS','http://www.cartografia.regione.lombardia.it’
‘/ArcGIS93/services/wms/ct10_wms /MapServer/WMSServer',
{layers:'5', projection:'EPSG:4326', transparent:'true'}
);
map.addLayer(CT10);
http://www.cartografia.regione.lombardia.it/geoportale
Receitas rápidas
http://trac.openlayers.org/wiki/UserRecipes
Apresentação de mapas de serviços comerciais
Interrogações sobre serviços WMS ou WFS
Adição de nova informação sobre o mapa
Overlays de informação em GML ou KML
http://openlayers.org/dev/examples/vector-formats.html
Parte 2
VISUALIZAÇÃO DE DOCUMENTOS
GML E KML COM O OPENLAYERS
Geometrias GML sobre um mapa
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5; var lat = 40; var zoom = 5;
var map, layer;
function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.zoomToExtent(new OpenLayers.Bounds(-3.9221,44.3353,4.8669,49.5538));
map.addLayer(new OpenLayers.Layer.GML("GML",
"http://openlayers.org/dev/examples/gml/polygon.xml"));
}
</script>
</head>
<body onload="init()">
<h1 id="title">GML Layer Example</h1><div id="tags"></div>
<p id="shortdesc">Loads GML vector data on a basemap.</p>
<div id="map" class="smallmap"></div><div id="docs"></div>
</body>
</html>
Geometrias GML sobre um mapa
Documento KML sobre um mapa
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.addLayer(new OpenLayers.Layer.GML("KML", "http://openlayers.org/dev/examples/kml/lines.kml",
{
format: OpenLayers.Format.KML,
formatOptions: { extractStyles: true, extractAttributes: true, maxDepth: 2 }
}));
map.zoomToExtent(new OpenLayers.Bounds(-112.3066,36.0177,-112.032,36.180));
}
</script>
</head>
<body onload="init()">
<h1 id="title">KML Layer Example</h1><div id="tags"></div>
<p id="shortdesc">Displaying a KML file over basemap.</p>
<div id="map" class="smallmap"></div><div id="docs"></div>
</body>
</html>
Documento KML sobre um mapa
Mapas de cloropletas (cores)
function init(){
var lon = 5;
var lat = 15;
var zoom = 2;
var options = { numZoomLevels: 6, controls: [] };
map = new OpenLayers.Map('olmap', options);
var vectors = new OpenLayers.Layer.GML( "KML",
"http://thematicmapping.org/data/kml/internet_users_2005_choropleth_lowres.kml",
{ isBaseLayer: true, format: OpenLayers.Format.KML,
formatOptions: { extractStyles: true, extractAttributes: true }});
map.addLayer(vectors);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MouseDefaults());
map.addControl(new OpenLayers.Control.PanZoomBar());
}
http://thematicmapping.org/playground/openlayers_choropleth_kml.php
Mais ideias
Thematic mapping with KML
http://blog.thematicmapping.org/
Map tiles com o GDAL2Tiles
Mapas de símbolos proporcionais
http://blog.thematicmapping.org/2008/03/generating-map-tiles-with-gdal2tiles.html
http://thematicmapping.org/playground/openlayers_maptiles.php
http://thematicmapping.org/playground/openlayers_propsymbols_geojson.php
http://blog.thematicmapping.org/2008/04/proportional-symbol-mapping-with.html
Integração com o Google Charts
http://thematicmapping.org/playground/openlayers_piecharts_geojson_google_chart.php
http://blog.thematicmapping.org/2008/04/openlayers-and-google-chart-mashup.html
Parte 3
SIMILE EXHIBIT
Publishing Framework for DataRich Interactive Web Pages
O SIMILE Exhibit facilita criação de páginas Web com:
Mapas e informação georreferenciada
Timelines
Pesquisa e navegação com base em facetas
Usa API do Google Maps para apresentação
de informação georreferenciada sobre mapas
Interessante para a construção de mashups.
http://www.simile-widgets.org/exhibit/
SIMILE EXHIBIT
Exemplo “U.S. Presidents”
Timeline
Mapa com pins
Pesquisa texto
Facetas
Religião
Repúblicano/Democrata
...
Mais exemplos na página Web do SIMILE Exhibit
Mapas e SIMILE Exhibit
{
items: [
{
},
{
},
{
},
{
}
] }
label:
address:
subject:
"MIT", type:
"School",
"77 Massachusetts Avenue, Cambridge, MA 02139",
"Computer Science"
label:
address:
subject:
"Harvard Medical School", type:
"25 Shattuck St., Boston, MA 02115",
"Medical"
label:
address:
subject:
"Stanford", type:
"Stanford, CA 94305",
"Computer Science"
label:
address:
subject:
"CMU", type:
"School",
"5000 Forbes Avenue, Pittsburgh, PA 15213",
"Computer Science"
"School",
"School",
Mapas e SIMILE Exhibit
<html>
<head>
<title>Schools</title>
<link href="schools.js" type="application/json" rel="exhibit/data" />
<script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js"
type="text/javascript"></script>
<script src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/map-extension.js?gmapkey="
type="text/javascript"></script>
</head>
<body>
<button onclick="getLatLng();">Get Lat/Lng</button><br/>
<textarea id="results" rows="20" style="width: 100%;"></textarea>
<script type="text/javascript">
function getLatLng() {
var database = exhibit.getDatabase();
Exhibit.MapView.lookupLatLng(
database.getSubjects("School", "type"), ".address", "addressLatLng",
document.getElementById("results"), database, 4
);
}
</script>
</body>
</html>
Mapas e SIMILE Exhibit
{ items: [
{
},
{
},
{
},
{
label:
address:
subject:
"MIT", type:
"School",
"77 Massachusetts Avenue, Cambridge, MA 02139",
"Computer Science"
label:
address:
subject:
"Harvard Medical School", type:
"25 Shattuck St., Boston, MA 02115",
"Medical"
label:
address:
subject:
"Stanford", type:
"Stanford, CA 94305",
"Computer Science"
label:
address:
subject:
"CMU", type:
"School",
"5000 Forbes Avenue, Pittsburgh, PA 15213",
"Computer Science"
},
{ id:
{ id:
{ id:
{ id:
] }
"School",
"School",
'MIT', addressLatLng: '42.359,-71.093553' },
'Harvard Medical School', addressLatLng: '42.335743,-71.105138' },
'Stanford', addressLatLng: '37.423573,-122.161867' },
'CMU', addressLatLng: '40.444583,-79.942868' }
Mapas e SIMILE Exhibit
<html>
<head>
<title>Schools</title>
<link href="schools.js" type="application/json" rel="exhibit/data" />
<script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js"
type="text/javascript"></script>
<script
src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/map-extension.js?gmapkey="
type="text/javascript"></script>
</head>
<body>
<div ex:role="view"
ex:viewClass="Map"
ex:latlng=".addressLatLng"
ex:colorKey=".subject">
</div>
</body>
</html>
Documentação sobre as opções para ex:viewClass=“Map”
http://simile.mit.edu/wiki/Exhibit/2.0/Map_View
Questões?
Download
