Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introdução ao OpenLayers

5,261 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Introdução ao OpenLayers

  1. 1. Fernando Quadro <fernando.quadro@softplan.com.br> Introdução ao OpenLayers
  2. 2. Agenda <ul><li>O que é o OpenLayers? </li></ul><ul><li>História </li></ul><ul><li>Arquitetura </li></ul><ul><li>Componentes </li></ul><ul><ul><li>Layers </li></ul></ul><ul><ul><li>Controles </li></ul></ul><ul><ul><li>Demonstração Rápida </li></ul></ul><ul><li>Botando a mão na massa </li></ul><ul><li>Documentação </li></ul><ul><li>Conclusão </li></ul>
  3. 3. O que é o OpenLayers?
  4. 4. O que é o OpenLayers? <ul><li>API para construir aplicações webmapping </li></ul><ul><li>JavaScript </li></ul><ul><li>AJAX </li></ul><ul><li>Web 2.0 </li></ul><ul><li>Suporte a padrões abertos </li></ul><ul><li>Licença BSD </li></ul><ul><li>Projeto da Open Source Geospatial Foundation (OSGeo) </li></ul>
  5. 5. História <ul><li>Iniciado em 2005 (Where 2.0) </li></ul><ul><li>Motivado pela necessidade de negócios da MetaCarta </li></ul><ul><li>Passou por várias revisões internas </li></ul><ul><li>No final, foi reescrito em um mês </li></ul><ul><li>Foi lançado oficialmente em 2006 no Where 2.0 </li></ul><ul><li>Mais de 10.000 pessoas já estão utilizando </li></ul>
  6. 6. Arquitetura http Webserver (Proxy) http (REST) OpenLayers Client Arquivos SQL SGBD-Geo http http Internet
  7. 7. Componentes
  8. 8. Componentes: Layers <ul><li>OGC WMS </li></ul><ul><li>OGC WFS </li></ul><ul><li>GeoRSS </li></ul><ul><li>ka-Map </li></ul><ul><li>Google Maps </li></ul><ul><li>MSN Virtual Earth </li></ul><ul><li>Yahoo! Maps </li></ul><ul><li>Multimap </li></ul>
  9. 9. Componentes: Controles <ul><li>Zoom </li></ul><ul><li>Mouse Controls </li></ul><ul><li>Legenda </li></ul><ul><li>Referência </li></ul><ul><li>Escala </li></ul><ul><li>Permalink </li></ul><ul><li>Marcadores </li></ul><ul><li>Popup </li></ul>
  10. 10. 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/
  11. 11. Mão na massa: Layers - WMS 1 2 3 4 5
  12. 12. 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 = &quot;Loading... &quot;; //Define os parametros para o getfeatureInfo var url = wmslayer.getFullRequestString({ REQUEST: &quot;GetFeatureInfo&quot;, EXCEPTIONS: &quot;application/vnd.ogc.se_xml&quot;, 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; }
  13. 13. Mão na massa: Layers - WFS <ul><li>OpenLayers.ProxyHost=&quot;/cgi-bin/proxy.cgi?url=&quot;; </li></ul><ul><li>var map = new OpenLayers.Map('map'); </li></ul><ul><ul><li>var wms = new OpenLayers.Layer.WMS( &quot;OpenLayers WMS&quot;, </li></ul></ul><ul><ul><li>&quot;http://labs.metacarta.com/wms/vmap0&quot;, {layers: 'basic'} ); </li></ul></ul><ul><ul><li>var layer = new OpenLayers.Layer.WFS( &quot;Owl Survey&quot;, </li></ul></ul><ul><ul><li>&quot;http://www.bsc-eoc.org/cgi-bin/bsc_ows.asp?&quot;, </li></ul></ul><ul><ul><li>{typename: &quot;OWLS&quot;, maxfeatures: 30}); </li></ul></ul><ul><ul><li>map.addLayers([wms,georss]); </li></ul></ul><ul><ul><li>map.zoomToMaxExtent(); </li></ul></ul>
  14. 14. Mão na massa: Layers GeoRSS <ul><li>OpenLayers.ProxyHost=&quot;/cgi-bin/proxy.cgi?url=&quot;; </li></ul><ul><li>var map = new OpenLayers.Map('map'); </li></ul><ul><ul><li>var wms = new OpenLayers.Layer.WMS( &quot;OpenLayers WMS&quot;, </li></ul></ul><ul><ul><li> &quot;http://labs.metacarta.com/wms/vmap0&quot;, {layers: 'basic'} ); </li></ul></ul><ul><ul><li>var georss = new OpenLayers.Layer.GeoRSS( &quot;GeoRSS&quot;, </li></ul></ul><ul><ul><li> &quot;http://earthquake.usgs.gov/recenteqsww/eqs7day-M2.5.xml&quot; ); </li></ul></ul><ul><ul><li>map.addLayers([wms,georss]); </li></ul></ul><ul><ul><li>map.zoomToMaxExtent(); </li></ul></ul>
  15. 15. Mão na massa: Layers - GMaps
  16. 16. Mão na massa: Layers - GMaps var googleLayer = new OpenLayers.Layer.Google( &quot;Google Satellite&quot; ,  {type: G_SATELLITE_MAP, 'maxZoomLevel':18} );  
  17. 17. Mão na massa: Layers - GMaps var satellite = new OpenLayers.Layer.Google( &quot;Google Maps&quot; ,  {type: G_NORMAL_MAP, 'maxZoomLevel':18} );  
  18. 18. Mão na massa: Layers – V. Earth
  19. 19. Mão na massa: Layers – E mais… <ul><li>Yahoo! Maps </li></ul><ul><li>MultiMap </li></ul><ul><li>OpenStreetMap </li></ul>
  20. 20. Mão na massa: Controle
  21. 21. Mão na massa: Controle 2 3 4 6 5
  22. 22. Mão na massa: Propriedades
  23. 23. Mão na massa: Marcadores <ul><li>var map = new OpenLayers.Map('map'); </li></ul><ul><li>var markers = new OpenLayers.Layer.Markers(&quot;Markers&quot;); </li></ul><ul><li>map.addLayer(markers); </li></ul><ul><li>var point = new OpenLayers.LonLat(5, 40) </li></ul><ul><li>var marker = new OpenLayers.Marker(point); </li></ul><ul><li>markers.addMarker(marker); </li></ul><ul><ul><li>map.zoomToMaxExtent(); </li></ul></ul>
  24. 24. Mão na massa: Integração
  25. 25. Documentação Fonte: http://dev.openlayers.org/apidocs/files/OpenLayers-js.html [2009-01-22]
  26. 26. Conclusão <ul><li>Promissora API para desenvolvimento webmapping; </li></ul><ul><li>Integração de várias tecnologias; </li></ul><ul><li>Implementa padrões; </li></ul><ul><li>Robusta, de fácil aprendizado e utilização </li></ul>
  27. 27. FREE Map Browsers <ul><li>Google Maps, http:// www.google.com / apis / maps / </li></ul><ul><li>Yahoo! Maps API, http:// developer.yahoo.com/maps/ </li></ul><ul><li>MapGuide Open Source, https://mapguide.osgeo.org/ </li></ul><ul><li>OpenLayer , http:// www.openlayers.org / </li></ul><ul><li>FlashEarth, http://www.flashearth.com/ </li></ul><ul><li>WorldKit, http://worldkit.org/ </li></ul><ul><li>ka-Map, http://ka-map.maptools.org/ </li></ul><ul><li>deegree iGeoPortal, http ://www.lat-lon.de </li></ul><ul><li>MappingWidgets, http://mappingwidgets.sourceforge.net/ </li></ul><ul><li>Chameleon, http:// chameleon.maptools.org / </li></ul><ul><li>P.mapper, http://www.pmapper.net/ </li></ul><ul><li>WMS Mapper, http:// wms-map.sourceforge.net/ </li></ul>
  28. 28. Créditos <ul><li>Prof. Dr. Franz-Josef Behr - Hochschule für Technik, Stuttgart </li></ul><ul><ul><li>http:// www.gis-news.de/papers/fjb_ openlayers _4e . ppt </li></ul></ul><ul><li>Schuyler Erle - MetaCarta </li></ul><ul><li>Christopher Schmidt – MetaCarta </li></ul><ul><ul><li>http:// mappinghacks.com / talks /foss4g2006/ openlayers . ppt </li></ul></ul>
  29. 29. Obrigado! Fernando Quadro [email_address]

×