Open layers pt_br

Embed Size (px)

Citation preview

  • 1. Elaborado por: Marco Minghini (Politcnico de Milo, Itlia) Traduzido e adaptado por: Marcos R. Rosa (CIH) Foz do Iguau, 2013 Tutorial de OpenLayers

2. 2 OpenLayers Criado em 2005 pela MetaCarta, OpenLayers uma biblioteca de mapeamento geogrfico Javascript-based que permite aos usurios exibir mapas dinmicos em navegadores mais modernos, sem qualquer dependncia do lado do servidor. altamente extensvel e serve como base de todas as interfaces comuns de mapeamento web. Sua atual verso a 2.13. OpenLayers completamente livre e de cdigo aberto (free and open source), provido sobre a licena 2-clause BSD License (tambm conhecido como FreeBSD). um projeto da fundao Open Source Geospatial; desenvolvido e suportado por muitas organizaes ao redor do mundo. OpenLayers implementa uma API Javascript para construir ricas aplicaes geogrficas web-based, similar ao Google Maps e a MSN Virtual Earth APIs, mas com uma importante diferena: ele um software livre! http://openlayers.org 3. 3 OpenLayers Algumas funes incluem: Sobreposio de camadas de mapas em uma nica aplicao; Exibe feies/imagens a partir: WMS, WMTS, TMS, WMS-C, WMTS, Google Maps, Bing Maps, Yahoo Maps, OpenStreetMap, ArcGIS Server, ArcIMS; Renderizao de feies vetoriais e estilos com suporte para KML, GeoJSON, WKT GML, WFS, GeoRSS; Edio web-based, incluindo operaes via WFS-T (WFS-Transactional); Permite integrao com outras bibliotecas JavaScript (Jquery, Ext, Dojo, MooTools); Reprojeo de mapa Completa documentao (http://docs.openlayers.org) 4. 4 OpenLayers - Exemplos Uma das melhores fontes de documentao a pgina de exemplos (http://openlayers.org/dev/examples): 5. 5 gedit um editor de textos poderoso presente no gerenciador de janelas desktop GNOME (http://projects.gnome.org/gedit): Oferece uma ambiente de texto configurvel para mltiplas linguagens (C, C++, Java, HTML, XML, Python, Perl e muitas outras) Para instalar o gedit: Abra o Synaptic Package Manager no menu Application (senha: user) Procure o pacote gedit, marque para instalao e clique em Apply Para acessar selecione o menu Applications Accessories gedit 6. 6 Firebug Firebug um dos mais populares ferramentas para depurao web development tool: Permite inspeo do cdigo HTML, estilo e do leiaute e modificao em tempo real; Utiliza um dos mais avanados debugador de cdigo JavaScript debugger para qualquer navegador; Para instalar o Firebug: Abra o website https://getfirebug.com e selecione Install Firebug: ative o Firebug clicando no cone de inseto localizado no canto superior direito do navegador 7. 7 Iniciando com OpenLayers Para construir visualizaes em OpenLayers deve-se criar primeiro uma pgina HTML onde o mapa ser inserido, para isto deve-se: Abrir o editor gedit e salvar um arquivo no desktop com o nome OpenLayers_exercise.html Abra o terminal no menu Applications Accessories Terminal Emulator e copie o arquivo para a pasta var/www/openlayers/examples com os seguintes comandos (senha: user): cd Desktop sudo chown user /var/www/openlayers/examples cp OpenLayers_exercise.html /var/www/openlayers/examples Abra o arquivo pelo navegador web digitando a URL localhost/openlayers/examples/OpenLayers_exercise.html 8. 8 Iniciando com OpenLayers Vamos agora digitar alguns cdigos HTML para construo de nossa primeira pgina. Inicie sua pgina HTML digitando os seguintes cdigos: line 3: a tag title define o ttulo da pgina web que ser apresentado no navegador line 4: a tag script permite adicionar a biblioteca OpenLayers na pgina ( necessrio inserir antes de escrever o cdigo customizado em JavaScript) line 5: na tag meta define o tipo de codificao caracter do HTML line 8: ns vamos usar a tag div como espao para nosso mapa 9. 9 Criando a visualizao do mapa Na ordem de criao da visualizao, vamos primeiro criar um mapa: line 8: a tag h1 adiciona o ttulo (OpenLayers exercise) centralizado na pgina line 10: a tag script, especifica a linguagem JavaScript, neste bloco conter todo o cdigo utilizando OpenLayers line 11: para adiconar o mapa, utilize o construtor OpenLayers.Map. O construtor requer um argumento, que pode ser tambm um elemento HTML ou um ID em um elemento HTML (aplicvel ao map): este o elemento onde ser inserido o mapa. 10. 10 Adicionando uma camada WMS Na ordem de visualizao do mapa, ns devemos incluir ao menos uma camada. Vamos agora adicionar um simples camada WMS (Blue Marble image) disponibilizada pelo OpenGeo: lines 12-13: o construtor OpenLayers.Layer.WMS adiciona uma camada WMS no mapa. Ele requer trs argumentos: a primeira string define o nome da camada; o segundo o endereo, ou seja, a URL do servidor WMS; o terceiro contm um objeto contendo um conjunto de parmetros anexada a requisio WMS (neste caso, somente o nome da camada WMS, ou seja, a camada bluemarble) line 14: o construtor map.addLayer ir desenhar a camada do mapa e como argumento dever ser passado o nome da varivel que contm o objeto da camada. line 15: a funo zoomToMaxExtent prov um zoom de nvel inicial para encaixar o mapa na caixa de visualizao. 11. 11 Adicionando uma camada base WMS O cdigo completo da pgina ficar assim: 12. 12 Adicionando uma sobreposio de camada WMS Vamos agora adicionar a segunda camada WMS (a camada contendo as provncias do Equador, que ns publicamos no GeoServer) por cima da camada base do mapa: Inserir somente estas linhas de cdigo depois da definio da camada base: line 18: escolha o nome da camada (neste caso utilize Ec_prov) e como construtor utilize OpenLayers.Layer.WMS para adicionar a camada WMS no mapa. O primeiro argumento a descrio da camada. line 19: o segundo argumento o endereo URL do servidor WMS, vamos utilizar nosso servidor local WMS GeoServer http://localhost:8082/geoserver/wms line 20: o terceiro argumento um objeto contendo os parmetros para a requisio WMS. O primeiro o nome da camada WMS que foi definido no Geoserver (OSGIS_course:ECU_adm1) 13. 13 Adicionando uma sobreposio de camada WMS Vamos agora adicinar a segunda camada WMS (a camada contendo as provncias do Equador, que ns publicamos no GeoServer) por cima da camada base do mapa: Inserir somente estas linhas de cdigo depois da definio da camada base: lines 21-22-23: o parmetro de transparncia atribuir com o valor true, e tambm definir mais dois campos. O primeiro o parmetro format, deve ser atribudo como image/png se o seu navegador suporta imagens com transparncia em PNG (para o navegador Internet Explorer 6, deve ser atribudo como image/gif). O segundo a opo isBaseLayer, que controla se a camada pode ser mostrada ao mesmo tempo que as outras camadas (se definir como true, a camada vai se tornar a camada base e no poder visualizar mais a camada anterior) line 24: o mtodo map.addLayer desenha a camada Ec_prov no mapa 14. 14 Adicionando uma sobreposio de camada WMS O cdigo completo ficar assim: 15. 15 Adicionando uma sobreposio de camada WMS A pgina HTML ter a seguinte aparncia: 16. 16 Centralizando o mapa em um local especfico Suponhamos que queremos centralizar o mapa no Equador: Comente (ou apague) a linha de cdigo: E substitua pela seguinte linha de cdigo: lines 26-27: a funo setCenter ir atribuir o centro do mapa a partir das coordenadas definidas como parmetro (Longiture e Latitude) e o nvel de zoom inicial do mapa. Tambm possvel incluir vrias camadas ao mesmo tempo: Comente (ou apague) as linhas de cdigo : E substitua elas por uma linha de cdigo: line 26: a funo map.addLayers toma como parmetro uma lista de todas as camadas a serem adicionadas 17. 17 Centralizando o mapa em um local especfico A pgina HTML ter a seguinte visualizao: 18. 18 Adicionando sobreposio de camada WMS Agora vamos adicionar vrias sobreposies de camadas WMS do Equador como rodovias, rios e reas com gua (as camadas que publicamos no GeoServer previamente): Inserir estas linhas de cdigo aps a definio das camadas posteriores: line 50: lembre-se de atualizar a lista de camadas na funo map.addLayers! 19. 19 Exibindo camadas alm de uma certa escala line 31: nos parmetros de escala necessrio definir os valores: mnimo (3000000) e valor mximo (1) . Em outras palavras, a camada ser visvel entre as escalas 1:3000000 e 1:1. Para propsitos de visualizao, recomenda-se configurar estas camadas visveis para alm de uma escala fixa, por exemplo 1:3000000: Inserir uma linha de cdigo junto com os parmetros da camada WMS, como no exemplo abaixo em rodovias do Equador: 20. 20 Adicionando elementos no mapa line 59: o parmetro prefix define o texto que ser o prefixo das coordenadas do cursor line 60: o parmetro separator define o texto separador usado para separar as duas coordenadas line 61: o parmetro suffix define o sufixo a ser inserido no cursor das coordenadas Vamos agora adicionar alguns elementos no mapa: Para inserir a posio do mouse no mapa, vamos inserir os seguintes cdigos: Para adicionar a indicao da escala do mapa atual, insira a linha de cdigo: Para adicionar a barra de escala, insira a linha de cdigo: 21. 21 Adicionando elementos no mapa Vamos agora adicionar alguns elementos no mapa: Para adicionar um menu de camadas: Para criar cantos arredondados no menu de camadas, deve-se inserir as seguintes linhas de cdigo fora do cdigo javascript: line 11: o parmetro border-radius determina a configurao de pixels do canto arredondado line 12: o parmetro opacidade determina o valor da opacidade (de 0 at 1) 22. 22 Adicionando uma camada WFS Vamos agora adicionar uma sobreposio de camada WFS: Para criar a camada, devem ser escritas as seguintes linhas de cdigo: Um exemplo WFS padro est disponvel em http://openlayers.org/dev/examples/wfs-states.html line 61: o construtor OpenLayers.Layer.Vector adiciona uma camada vetorial na visualizao do mapa line 63: o parmetro protocol especifica o que protocolo WFS protocol ser utilizado para adicionar a camada vetorial line 64: o parmetro url define o link do servidor WFS, o endereo de nosso WFS Geoserver local http://localhost:8082/geoserver/wfs line 65: o parmetro featureType especifica o nome da camada, definido no GeoServer line 66: o parmetro featureNS especifica o workspace namespace URI, definido no GeoServer 23. 23 Adicionando um segunda camada base WMS possvel adicionar outras camadas base em seu mapa. Lembre-se que toda camada WMS considerada camada base por padro: Para adicionar uma cartografia global no mapa, deve-se inserir as seguintes linhas de cdigo antes da definio da camada base anterior: lines 21-22-23: o construtor OpenLayers.Layer.WMS adiciona a camapa WMS no mapa. Ele requer trs argumentos: o nome da camada a ser visualizada; o endereo do servidor WMS; e o terceiro um objeto contendo os parmetros a serem adicionados na requisio WMS (neste caso somente o nome da camada WMS basic) line 24: a funo map.addLayer desenha a camada no mapa. 24. 24 Adicionando uma sobreposio de mapa A sobreposio dinmica inserida na visualizao corrente do mapa respeitando a extenso do mapa inicial: Para inserir uma sobreposio de mapa, inserir o seguinte cdigo: A pgina HTML dever ser apresentada assim: 25. 25 Criando uma camada vetorial desenhada Vamos agora criar uma camada vetorial que ser utilizada para desenhar polgonos, linhas e pontos: Para adicionar uma camada vetorial no mapa, inserir o seguinte cdigo: Para adicionar um editing toolbar no mapa, inserir o seguinte cdigo: Ateno: esta no uma aplicao completa, pois no habilita editar e salvar os dados gerados (ser necessrio utilizar o protocolo WFS-T)! 26. 26 Adicionando as camadas Google, Bing e OpenStreetMap Com a finalidade de melhorar a aparncia do mapa, possvel adicionar algumas camadas base fornecida por terceiros como Google, Microsoft e OpenStreetMap. Todas estas camadas so referenciadas utilizando a projeo Spherical Mercator (EPSG code: 900913): Para declara o uso da projeo, criar a visualizao de mapa desta forma: Para centralizar o mapa na posio correta, escreva o seguinte cdigo: line 19: o parmetro da projection define que a projeo Spherical Mercator projection usada line 20: o parmetro displayProjection diz que as coordenadas sero exibidos em WGS84 (como latitude e longitude) lines 130-131: as coordenadas geograficasdo mapa centralizado (previamente definido) so transformadas em coordenadas da projeo Spherical Mercator. Desta forma, o mapa est corretamente centralizado no Equador. 27. 27 Adicionando a camada Google Para adicionar as camadas Google (physical map, streets map, hybrid map and satellite map) na visualizao do mapa Escreva este cdigo antes (e fora) do cdigo customizado javascript: Insira as seguintes linhas de cdigo: lines 23-27-31-35: a funo OpenLayers.Layer.Google adiciona uma camada base Google na visualizao do mapa 28. 28 Adicionando a camada Google Um exemplo de visualizao o seguinte: 29. 29 Adicionando a camada Microsoft (Bing) Para adicionar as camadas Microsoft (Bing) (roads map, aerial map and hybrid map) na visualizao do mapa Escreva os seguintes cdigos: line 52: esta chava da API key para http://openlayers.org. Deve-se gerar a chave no link http://bingmapsportal.com lines 54-59-64: a funo OpenLayers.Layer.Bing adiciona a camada base Microsoft (Bing) na visualizao do mapa 30. 30 Adicionando a camada Microsoft (Bing) Um exemplo de visualizao o seguinte: 31. 31 Adicionar a camada do OpenStreetMap Para adicionar a camada OpenStreetMap Escreva os seguintes cdigos: line 73: a funo OpenLayers.Layer.OSM adiciona a camada base OpenStreetMap na visualizao do mapa Um exemplo de visualizao o seguinte: 32. 32 Referncias OpenLayers official website: http://openlayers.org OpenLayers user documentation: http://docs.openlayers.org OpenLayers developer documentation: http://dev.openlayers.org/docs OpenLayers example gallery: http://openlayers.org/dev/examples OpenGeo OpenLayers Workshop at FOSS4G 2011, Denver (CO, USA), September 12-16 2011 : http://workshops.opengeo.org/openlayers-intro http://creativecommons.org/licenses/by-nc-sa/3.0