organização do tutorial
Post on 26-Jan-2016
32 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Apresentação da framework Mapas simples, uso de várias camadas e posicionamento.
Visualização de dados georeferenciados 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
INTRODUÇÃO AO OPENLAYERS
Parte 1
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
VISUALIZAÇÃO DE DOCUMENTOSGML E KML COM O OPENLAYERS
Parte 2
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 KMLhttp://blog.thematicmapping.org/
Map tiles com o GDAL2Tiles http://blog.thematicmapping.org/2008/03/generating-map-tiles-with-gdal2tiles.html http://thematicmapping.org/playground/openlayers_maptiles.php
Mapas de símbolos proporcionais 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
SIMILE EXHIBITParte 3
Publishing Framework for Data-Rich 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: "MIT", type: "School",
address: "77 Massachusetts Avenue, Cambridge, MA 02139",
subject: "Computer Science"
},
{ label: "Harvard Medical School", type: "School",
address: "25 Shattuck St., Boston, MA 02115",
subject: "Medical"
},
{ label: "Stanford", type: "School",
address: "Stanford, CA 94305",
subject: "Computer Science"
},
{ label: "CMU", type: "School",
address: "5000 Forbes Avenue, Pittsburgh, PA 15213",
subject: "Computer Science"
}
] }
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: "MIT", type: "School", address: "77 Massachusetts Avenue, Cambridge, MA 02139", subject: "Computer Science" }, { label: "Harvard Medical School", type: "School", address: "25 Shattuck St., Boston, MA 02115", subject: "Medical" }, { label: "Stanford", type: "School", address: "Stanford, CA 94305", subject: "Computer Science" }, { label: "CMU", type: "School", address: "5000 Forbes Avenue, Pittsburgh, PA 15213", subject: "Computer Science" }, { id: 'MIT', addressLatLng: '42.359,-71.093553' }, { id: 'Harvard Medical School', addressLatLng: '42.335743,-71.105138' }, { id: 'Stanford', addressLatLng: '37.423573,-122.161867' }, { id: '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?
top related