1 / 25

Organização do Tutorial

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

anevay
Download Presentation

Organização do Tutorial

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tutorial sobre visualização de dados geo-referenciados comOpenLayers e SIMILE WidgetsDEI-IST 2009/2010

  2. 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

  3. Parte 1 INTRODUÇÃO AO OPENLAYERS

  4. 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/

  5. Framework cliente para Web-GIS http://mapserver.org/ http://geoserver.org/

  6. 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>

  7. 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)

  8. Alterações no mapa inicial removermap.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() );

  9. 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

  10. 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

  11. Parte 2 VISUALIZAÇÃO DE DOCUMENTOSGML E KML COM O OPENLAYERS

  12. 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>

  13. Geometrias GML sobre um mapa

  14. 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>

  15. Documento KML sobre um mapa

  16. 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

  17. Mais ideias • Thematic mapping with KML • http://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

  18. Parte 3 SIMILE EXHIBIT

  19. 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/

  20. 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

  21. 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" } ] }

  22. 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>

  23. 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' } ] }

  24. 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

  25. Questões?

More Related