introdução ao openlayers
DESCRIPTION
TRANSCRIPT
Agenda
• O que é o OpenLayers?
• História
• Arquitetura
• Componentes– Layers
– Controles
– Demonstração Rápida
• Botando a mão na massa
• Documentação
• Conclusão
O que é o OpenLayers?
O que é o OpenLayers?
• API para construir aplicações webmapping
• JavaScript
• AJAX
• Web 2.0
• Suporte a padrões abertos
• Licença BSD
• Projeto da Open Source Geospatial Foundation (OSGeo)
História
• Iniciado em 2005 (Where 2.0)
• Motivado pela necessidade de negócios da MetaCarta
• Passou por várias revisões internas
• No final, foi reescrito em um mês
• Foi lançado oficialmente em 2006 no Where 2.0
• Mais de 10.000 pessoas já estão utilizando
Arquitetura
http
Webserver (Proxy)http(REST)
OpenLayersClient
Arquivos
SQL SGBD-Geo
http
http
Internet
Componentes
Componentes: Layers
• OGC WMS
• OGC WFS• GeoRSS• ka-Map• Google Maps
• MSN Virtual Earth• Yahoo! Maps• Multimap
Componentes: Controles
• Zoom
• Mouse Controls• Legenda• Referência• Escala
• Permalink• Marcadores• Popup
Demonstração Rápida
OpenLayers ExampleOpenLayers Example
OMNIOMNI VERDIVERDI
PEGEL ONLINE
http://olarchitect.com/
http://www.ominiverdi.org/openlayers/
http://www.pegelonline.wsv.de/
http://www.openlayers.org/dev/examples/
Mão na massa: Layers - WMS
11
22
33
44
55
Mão na massa: Layers - WMS
// Registra o evento de clickmap.events.register('click', map, function (e) {// Inicializa o display de texto$('nodeList').innerHTML = "Loading... ";//Define os parametros para o getfeatureInfo var url = wmslayer.getFullRequestString({ REQUEST: "GetFeatureInfo", EXCEPTIONS: "application/vnd.ogc.se_xml", BBOX: wms.map.getExtent().toBBOX(), X: e.xy.x, Y: e.xy.y, INFO_FORMAT: 'text/html', QUERY_LAYERS: wms.params.LAYERS, REDIUS:2, WIDTH: wmslayer.map.size.w, HEIGHT: wmslayer.map.size.h});//Realiza o GetFeatureInfo OpenLayers.loadURL(url, '', this, setHTML); Event.stop(e);});//Plota o resultadofunction setHTML(response) { $('nodeList').innerHTML = response.responseText;}
Mão na massa: Layers - WFS
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
var layer = new OpenLayers.Layer.WFS( "Owl Survey", "http://www.bsc-eoc.org/cgi-bin/bsc_ows.asp?", {typename: "OWLS", maxfeatures: 30});
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
var layer = new OpenLayers.Layer.WFS( "Owl Survey", "http://www.bsc-eoc.org/cgi-bin/bsc_ows.asp?", {typename: "OWLS", maxfeatures: 30});
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
Mão na massa: Layers GeoRSS
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
var georss = new OpenLayers.Layer.GeoRSS( "GeoRSS", "http://earthquake.usgs.gov/recenteqsww/eqs7day-M2.5.xml" );
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
var georss = new OpenLayers.Layer.GeoRSS( "GeoRSS", "http://earthquake.usgs.gov/recenteqsww/eqs7day-M2.5.xml" );
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
Mão na massa: Layers - GMaps
Mão na massa: Layers - GMaps
var googleLayer = new OpenLayers.Layer.Google( "Google Satellite" , {type: G_SATELLITE_MAP, 'maxZoomLevel':18} );
Mão na massa: Layers - GMaps
var satellite = new OpenLayers.Layer.Google( "Google Maps" , {type: G_NORMAL_MAP, 'maxZoomLevel':18} );
Mão na massa: Layers – V. Earth
Mão na massa: Layers – E mais…
• Yahoo! Maps
• MultiMap• OpenStreetMap
Mão na massa: Controle
Mão na massa: Controle
22
334466
55
Mão na massa: Propriedades
Mão na massa: Marcadores
var map = new OpenLayers.Map('map');
var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers);
var point = new OpenLayers.LonLat(5, 40) var marker = new OpenLayers.Marker(point); markers.addMarker(marker);
map.zoomToMaxExtent();
var map = new OpenLayers.Map('map');
var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers);
var point = new OpenLayers.LonLat(5, 40) var marker = new OpenLayers.Marker(point); markers.addMarker(marker);
map.zoomToMaxExtent();
Mão na massa: Integração
Documentação
Fonte: http://dev.openlayers.org/apidocs/files/OpenLayers-js.html [2009-01-22]
Conclusão
• Promissora API para desenvolvimento webmapping;
• Integração de várias tecnologias;
• Implementa padrões;
• Robusta, de fácil aprendizado e utilização
FREE Map Browsers
•Google Maps, http://www.google.com/apis/maps/•Yahoo! Maps API, http://developer.yahoo.com/maps/•MapGuide Open Source, https://mapguide.osgeo.org/•OpenLayer, http://www.openlayers.org/•FlashEarth, http://www.flashearth.com/•WorldKit, http://worldkit.org/•ka-Map, http://ka-map.maptools.org/ •deegree iGeoPortal, http://www.lat-lon.de•MappingWidgets, http://mappingwidgets.sourceforge.net/•Chameleon, http://chameleon.maptools.org/•P.mapper, http://www.pmapper.net/•WMS Mapper, http://wms-map.sourceforge.net/
Créditos
• Prof. Dr. Franz-Josef Behr - Hochschule für Technik, Stuttgart
– http://www.gis-news.de/papers/fjb_openlayers_4e.ppt
• Schuyler Erle - MetaCarta
• Christopher Schmidt – MetaCarta– http://mappinghacks.com/talks/foss4g2006/openlayers.ppt
