Introdução ao OpenLayers

Fernando Quadro <fernando.quadro@softplan.com.br> Introdução ao OpenLayers

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? 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) OpenLayers Client Arquivos SQL SGBD-Geo http http Internet

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 Example OMNI VERDI 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 1 2 3 4 5

Mão na massa: Layers - WMS // Registra o evento de click map.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 resultado function 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();

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();

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 2 3 4 6 5

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();

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

Obrigado! Fernando Quadro [email_address]

Introdução ao OpenLayers

Mais conteúdo relacionado

Mais procurados (20)

Destaque (8)

Semelhante a Introdução ao OpenLayers (20)

Último (7)

Introdução ao OpenLayers