SlideShare una empresa de Scribd logo
1 de 29
Fernando Quadro <fernando.quadro@softplan.com.br> Introdução ao OpenLayers
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
O que é o OpenLayers?
O que é o OpenLayers? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
História ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Arquitetura http Webserver (Proxy) http (REST) OpenLayers Client Arquivos SQL SGBD-Geo http http Internet
Componentes
Componentes: Layers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Componentes: Controles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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 = &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; }
Mão na massa: Layers - WFS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Mão na massa: Layers GeoRSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Mão na massa: Layers - GMaps
Mão na massa: Layers - GMaps var googleLayer = new OpenLayers.Layer.Google( &quot;Google Satellite&quot; ,  {type: G_SATELLITE_MAP, 'maxZoomLevel':18} );  
Mão na massa: Layers - GMaps var satellite = new OpenLayers.Layer.Google( &quot;Google Maps&quot; ,  {type: G_NORMAL_MAP, 'maxZoomLevel':18} );  
Mão na massa: Layers –  V. Earth
Mão na massa: Layers –  E mais… ,[object Object],[object Object],[object Object]
Mão na massa: Controle
Mão na massa: Controle 2 3 4 6 5
Mão na massa: Propriedades
Mão na massa: Marcadores ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Mão na massa: Integração
Documentação Fonte:  http://dev.openlayers.org/apidocs/files/OpenLayers-js.html  [2009-01-22]
Conclusão ,[object Object],[object Object],[object Object],[object Object]
FREE Map Browsers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Créditos ,[object Object],[object Object],[object Object],[object Object],[object Object]
Obrigado! Fernando Quadro [email_address]

Más contenido relacionado

La actualidad más candente

공간정보연구원 PostGIS 강의교재
공간정보연구원 PostGIS 강의교재공간정보연구원 PostGIS 강의교재
공간정보연구원 PostGIS 강의교재JungHwan Yun
 
Gps Navigation Survey
Gps Navigation SurveyGps Navigation Survey
Gps Navigation SurveyDaniel Kim
 
System Monitoring With Nagios PowerPoint Presentation Slides
System Monitoring With Nagios PowerPoint Presentation SlidesSystem Monitoring With Nagios PowerPoint Presentation Slides
System Monitoring With Nagios PowerPoint Presentation SlidesSlideTeam
 
Cwin16 - Paris - mule soft
Cwin16 - Paris - mule softCwin16 - Paris - mule soft
Cwin16 - Paris - mule softCapgemini
 
Citrix StoreFront - Implementation Guide
Citrix StoreFront - Implementation GuideCitrix StoreFront - Implementation Guide
Citrix StoreFront - Implementation GuideNuno Alves
 
Making Sense of APEX Security by Christoph Ruepprich
Making Sense of APEX Security by Christoph RuepprichMaking Sense of APEX Security by Christoph Ruepprich
Making Sense of APEX Security by Christoph RuepprichEnkitec
 
Security applications with Java Card
Security applications with Java CardSecurity applications with Java Card
Security applications with Java CardJulien SIMON
 
Python qgis advanced
Python qgis advancedPython qgis advanced
Python qgis advancedJiyoon Kim
 
QGIS 소개 및 ArcMap과의 비교
QGIS 소개 및 ArcMap과의 비교QGIS 소개 및 ArcMap과의 비교
QGIS 소개 및 ArcMap과의 비교BJ Jang
 
The right Wireless Architecture for you
The right Wireless Architecture for youThe right Wireless Architecture for you
The right Wireless Architecture for youCisco Canada
 
Using Ansible at Scale to Manage a Public Cloud
Using Ansible at Scale to Manage a Public CloudUsing Ansible at Scale to Manage a Public Cloud
Using Ansible at Scale to Manage a Public CloudJesse Keating
 
Getting Started with WooCommerce
Getting Started with WooCommerceGetting Started with WooCommerce
Getting Started with WooCommerceAnthony Hortin
 
Introduction to Storage technologies
Introduction to Storage technologiesIntroduction to Storage technologies
Introduction to Storage technologiesKaivalya Shah
 
Jeni Intro2 Bab07 Abstract Windowing Toolkit Dan Swing
Jeni Intro2 Bab07 Abstract Windowing Toolkit Dan SwingJeni Intro2 Bab07 Abstract Windowing Toolkit Dan Swing
Jeni Intro2 Bab07 Abstract Windowing Toolkit Dan SwingIndividual Consultants
 

La actualidad más candente (20)

공간정보연구원 PostGIS 강의교재
공간정보연구원 PostGIS 강의교재공간정보연구원 PostGIS 강의교재
공간정보연구원 PostGIS 강의교재
 
Gps Navigation Survey
Gps Navigation SurveyGps Navigation Survey
Gps Navigation Survey
 
System Monitoring With Nagios PowerPoint Presentation Slides
System Monitoring With Nagios PowerPoint Presentation SlidesSystem Monitoring With Nagios PowerPoint Presentation Slides
System Monitoring With Nagios PowerPoint Presentation Slides
 
Cwin16 - Paris - mule soft
Cwin16 - Paris - mule softCwin16 - Paris - mule soft
Cwin16 - Paris - mule soft
 
Google maps api 3
Google maps api 3Google maps api 3
Google maps api 3
 
Citrix StoreFront - Implementation Guide
Citrix StoreFront - Implementation GuideCitrix StoreFront - Implementation Guide
Citrix StoreFront - Implementation Guide
 
Making Sense of APEX Security by Christoph Ruepprich
Making Sense of APEX Security by Christoph RuepprichMaking Sense of APEX Security by Christoph Ruepprich
Making Sense of APEX Security by Christoph Ruepprich
 
Security applications with Java Card
Security applications with Java CardSecurity applications with Java Card
Security applications with Java Card
 
Python qgis advanced
Python qgis advancedPython qgis advanced
Python qgis advanced
 
Java Servlets
Java ServletsJava Servlets
Java Servlets
 
MuleSoft JWT Demystified
MuleSoft JWT DemystifiedMuleSoft JWT Demystified
MuleSoft JWT Demystified
 
QGIS 소개 및 ArcMap과의 비교
QGIS 소개 및 ArcMap과의 비교QGIS 소개 및 ArcMap과의 비교
QGIS 소개 및 ArcMap과의 비교
 
The right Wireless Architecture for you
The right Wireless Architecture for youThe right Wireless Architecture for you
The right Wireless Architecture for you
 
State management servlet
State management servletState management servlet
State management servlet
 
Using Ansible at Scale to Manage a Public Cloud
Using Ansible at Scale to Manage a Public CloudUsing Ansible at Scale to Manage a Public Cloud
Using Ansible at Scale to Manage a Public Cloud
 
Getting Started with WooCommerce
Getting Started with WooCommerceGetting Started with WooCommerce
Getting Started with WooCommerce
 
Introduction to Storage technologies
Introduction to Storage technologiesIntroduction to Storage technologies
Introduction to Storage technologies
 
Java Applet
Java AppletJava Applet
Java Applet
 
GeoServer 기초
GeoServer 기초GeoServer 기초
GeoServer 기초
 
Jeni Intro2 Bab07 Abstract Windowing Toolkit Dan Swing
Jeni Intro2 Bab07 Abstract Windowing Toolkit Dan SwingJeni Intro2 Bab07 Abstract Windowing Toolkit Dan Swing
Jeni Intro2 Bab07 Abstract Windowing Toolkit Dan Swing
 

Destacado

Geospatial for Java
Geospatial for JavaGeospatial for Java
Geospatial for JavaJody Garnett
 
Desenvolvendo aplicações geográficas com Software Livre
Desenvolvendo aplicações geográficas com Software LivreDesenvolvendo aplicações geográficas com Software Livre
Desenvolvendo aplicações geográficas com Software LivreFernando Quadro
 
Geo server pt_br
Geo server pt_brGeo server pt_br
Geo server pt_brMarcos Rosa
 
VRaptor 3, JPA, Hibernate, Geotools e OpenLayers, ajudando Pedro Alvares Cabr...
VRaptor 3, JPA, Hibernate, Geotools e OpenLayers, ajudando Pedro Alvares Cabr...VRaptor 3, JPA, Hibernate, Geotools e OpenLayers, ajudando Pedro Alvares Cabr...
VRaptor 3, JPA, Hibernate, Geotools e OpenLayers, ajudando Pedro Alvares Cabr...Carlos A. Junior Spohr Poletto
 
Sistema de Informação Geográfica: Um mundo a ser desvendado.
Sistema de Informação Geográfica: Um mundo a ser desvendado.Sistema de Informação Geográfica: Um mundo a ser desvendado.
Sistema de Informação Geográfica: Um mundo a ser desvendado.Fernando Quadro
 

Destacado (8)

Geospatial for Java
Geospatial for JavaGeospatial for Java
Geospatial for Java
 
Desenvolvendo aplicações geográficas com Software Livre
Desenvolvendo aplicações geográficas com Software LivreDesenvolvendo aplicações geográficas com Software Livre
Desenvolvendo aplicações geográficas com Software Livre
 
GISVM
GISVMGISVM
GISVM
 
Por dentro do GeoServer
Por dentro do GeoServerPor dentro do GeoServer
Por dentro do GeoServer
 
Geo server pt_br
Geo server pt_brGeo server pt_br
Geo server pt_br
 
VRaptor 3, JPA, Hibernate, Geotools e OpenLayers, ajudando Pedro Alvares Cabr...
VRaptor 3, JPA, Hibernate, Geotools e OpenLayers, ajudando Pedro Alvares Cabr...VRaptor 3, JPA, Hibernate, Geotools e OpenLayers, ajudando Pedro Alvares Cabr...
VRaptor 3, JPA, Hibernate, Geotools e OpenLayers, ajudando Pedro Alvares Cabr...
 
Introdução ao PostGIS
Introdução ao PostGISIntrodução ao PostGIS
Introdução ao PostGIS
 
Sistema de Informação Geográfica: Um mundo a ser desvendado.
Sistema de Informação Geográfica: Um mundo a ser desvendado.Sistema de Informação Geográfica: Um mundo a ser desvendado.
Sistema de Informação Geográfica: Um mundo a ser desvendado.
 

Similar a Introdução ao OpenLayers

Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosaChrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosaJoselito Nascimento
 
JSF2 c/ PrimeFaces, RichFaces e ICEfaces
JSF2 c/ PrimeFaces, RichFaces e ICEfacesJSF2 c/ PrimeFaces, RichFaces e ICEfaces
JSF2 c/ PrimeFaces, RichFaces e ICEfacesEder Magalhães
 
DevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsDevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsSuissa
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersHarlley Oliveira
 
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)Evandro Klimpel Balmant
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryHarlley Oliveira
 
IoTizando com JavaScript
IoTizando com JavaScriptIoTizando com JavaScript
IoTizando com JavaScriptHeider Lopes
 
Criando plugins jQuery
Criando plugins jQueryCriando plugins jQuery
Criando plugins jQueryRicardo Coelho
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoCezinha Anjos
 
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasIntrodução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasGuilherme
 
TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...
TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...
TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...tdc-globalcode
 
Tornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JSTornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JSMatheus Donizete
 
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSHTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSRodrigo Branas
 
2016/08/19 - Uma visão geral da AWS para desenvolvedores
2016/08/19 - Uma visão geral da AWS para desenvolvedores2016/08/19 - Uma visão geral da AWS para desenvolvedores
2016/08/19 - Uma visão geral da AWS para desenvolvedoresJardel Weyrich
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysDr. Spock
 

Similar a Introdução ao OpenLayers (20)

Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosaChrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
 
Html5
Html5Html5
Html5
 
JSF2 c/ PrimeFaces, RichFaces e ICEfaces
JSF2 c/ PrimeFaces, RichFaces e ICEfacesJSF2 c/ PrimeFaces, RichFaces e ICEfaces
JSF2 c/ PrimeFaces, RichFaces e ICEfaces
 
DevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsDevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webapps
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQuery
 
Mashups: Criando Valor na Web 2.0 (BandTec)
Mashups: Criando Valor na Web 2.0 (BandTec)Mashups: Criando Valor na Web 2.0 (BandTec)
Mashups: Criando Valor na Web 2.0 (BandTec)
 
IoTizando com JavaScript
IoTizando com JavaScriptIoTizando com JavaScript
IoTizando com JavaScript
 
Apresentação Phonegap
Apresentação PhonegapApresentação Phonegap
Apresentação Phonegap
 
Criando plugins jQuery
Criando plugins jQueryCriando plugins jQuery
Criando plugins jQuery
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direito
 
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasIntrodução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvas
 
TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...
TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...
TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...
 
Tornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JSTornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JS
 
Artigoajax
ArtigoajaxArtigoajax
Artigoajax
 
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSHTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJS
 
Led Lua Workshop
Led Lua WorkshopLed Lua Workshop
Led Lua Workshop
 
2016/08/19 - Uma visão geral da AWS para desenvolvedores
2016/08/19 - Uma visão geral da AWS para desenvolvedores2016/08/19 - Uma visão geral da AWS para desenvolvedores
2016/08/19 - Uma visão geral da AWS para desenvolvedores
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
 

Introdução ao OpenLayers

  • 2.
  • 3. O que é o OpenLayers?
  • 4.
  • 5.
  • 6. Arquitetura http Webserver (Proxy) http (REST) OpenLayers Client Arquivos SQL SGBD-Geo http http Internet
  • 8.
  • 9.
  • 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. Mão na massa: Layers - WMS 1 2 3 4 5
  • 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.
  • 14.
  • 15. Mão na massa: Layers - GMaps
  • 16. Mão na massa: Layers - GMaps var googleLayer = new OpenLayers.Layer.Google( &quot;Google Satellite&quot; ,  {type: G_SATELLITE_MAP, 'maxZoomLevel':18} );  
  • 17. Mão na massa: Layers - GMaps var satellite = new OpenLayers.Layer.Google( &quot;Google Maps&quot; ,  {type: G_NORMAL_MAP, 'maxZoomLevel':18} );  
  • 18. Mão na massa: Layers – V. Earth
  • 19.
  • 20. Mão na massa: Controle
  • 21. Mão na massa: Controle 2 3 4 6 5
  • 22. Mão na massa: Propriedades
  • 23.
  • 24. Mão na massa: Integração
  • 25. Documentação Fonte: http://dev.openlayers.org/apidocs/files/OpenLayers-js.html [2009-01-22]
  • 26.
  • 27.
  • 28.
  • 29. Obrigado! Fernando Quadro [email_address]