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.

Open layers pt_br

2,513 views

Published on

  • Login to see the comments

Open layers pt_br

  1. 1. Elaborado por: Marco Minghini (Politécnico de Milão, Itália) Traduzido e adaptado por: Marcos R. Rosa (CIH) Foz do Iguaçu, 2013 Tutorial de OpenLayers
  2. 2. 2 OpenLayers ✔ Criado em 2005 pela MetaCarta, OpenLayers é uma biblioteca de mapeamento geográfico Javascript-based que permite aos usuários exibir mapas dinâmicos em navegadores mais modernos, sem qualquer dependência do lado do servidor. ✔ É altamente extensível e serve como base de todas as interfaces comuns de mapeamento web. Sua atual versão é a 2.13. ✔ OpenLayers é completamente livre e de código aberto (free and open source), provido sobre a licença 2-clause BSD License (também conhecido como FreeBSD). ✔ É um projeto da fundação Open Source Geospatial; desenvolvido e suportado por muitas organizações ao redor do mundo. ✔ OpenLayers implementa uma API Javascript para construir ricas aplicações geográficas web-based, similar ao Google Maps e a MSN Virtual Earth APIs, mas com uma importante diferença: ele é um software livre! http://openlayers.org
  3. 3. 3 OpenLayers ✔ Algumas funções incluem: ➔ Sobreposição de camadas de mapas em uma única aplicação; ➔ Exibe feições/imagens a partir: WMS, WMTS, TMS, WMS-C, WMTS, Google Maps, Bing Maps, Yahoo Maps, OpenStreetMap, ArcGIS Server, ArcIMS; ➔ Renderização de feições vetoriais e estilos com suporte para KML, GeoJSON, WKT GML, WFS, GeoRSS; ➔ Edição web-based, incluindo operações via WFS-T (WFS-Transactional); ➔ Permite integração com outras bibliotecas JavaScript (Jquery, Ext, Dojo, MooTools); ➔ Reprojeção de mapa ➔ Completa documentação (http://docs.openlayers.org)
  4. 4. 4 OpenLayers - Exemplos ✔ Uma das melhores fontes de documentação é a página de exemplos (http://openlayers.org/dev/examples):
  5. 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 configurável para múltiplas 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 instalação e clique em Apply ➔ Para acessar selecione o menu Applications → Accessories → gedit
  6. 6. 6 Firebug ✔ Firebug é um dos mais populares ferramentas para depuração web development tool: ➔ Permite inspeção do código HTML, estilo e do leiaute e modificação em tempo real; ➔ Utiliza um dos mais avançados debugador de código 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. 7 Iniciando com OpenLayers ✔ Para construir visualizações em OpenLayers deve-se criar primeiro uma página 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. 8 Iniciando com OpenLayers ✔ Vamos agora digitar alguns códigos HTML para construção de nossa primeira página. ➔ Inicie sua página HTML digitando os seguintes códigos: ✗ line 3: a tag title define o título da página web que será apresentado no navegador ✗ line 4: a tag script permite adicionar a biblioteca OpenLayers na página (é necessário inserir antes de escrever o código customizado em JavaScript) ✗ line 5: na tag meta define o tipo de codificação caracter do HTML ✗ line 8: nós vamos usar a tag div como espaço para nosso mapa
  9. 9. 9 Criando a visualização do mapa ✗ Na ordem de criação da visualização, vamos primeiro criar um mapa: ✗ line 8: a tag h1 adiciona o título (“OpenLayers exercise”) centralizado na página ✗ line 10: a tag script, especifica a linguagem JavaScript, neste bloco conterá todo o código utilizando OpenLayers ✗ line 11: para adiconar o mapa, utilize o construtor OpenLayers.Map. O construtor requer um argumento, que pode ser também um elemento HTML ou um ID em um elemento HTML (aplicável ao map): este é o elemento onde será inserido o mapa.
  10. 10. 10 Adicionando uma camada WMS ✔ Na ordem de visualização do mapa, nós 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 três argumentos: a primeira string define o nome da camada; o segundo é o endereço, ou seja, a URL do servidor WMS; o terceiro contém um objeto contendo um conjunto de parâmetros anexada a requisição 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 variável que contém o objeto da camada. ✗ line 15: a função zoomToMaxExtent provê um zoom de nível inicial para encaixar o mapa na caixa de visualização.
  11. 11. 11 Adicionando uma camada base WMS ✔ O código completo da página ficará assim:
  12. 12. 12 Adicionando uma sobreposição de camada WMS ✔ Vamos agora adicionar a segunda camada WMS (a camada contendo as províncias do Equador, que nós publicamos no GeoServer) por cima da camada base do mapa: ➔ Inserir somente estas linhas de código depois da definição 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 descrição da camada. ✗ line 19: o segundo argumento é o endereço 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 parâmetros para a requisição WMS. O primeiro é o nome da camada WMS que foi definido no Geoserver (OSGIS_course:ECU_adm1)
  13. 13. 13 Adicionando uma sobreposição de camada WMS ✔ Vamos agora adicinar a segunda camada WMS (a camada contendo as províncias do Equador, que nós publicamos no GeoServer) por cima da camada base do mapa: ➔ Inserir somente estas linhas de código depois da definição da camada base: ✗ lines 21-22-23: o parâmetro de transparência atribuir com o valor true, e também definir mais dois campos. O primeiro é o parâmetro format, deve ser atribuído como image/png se o seu navegador suporta imagens com transparência em PNG (para o navegador Internet Explorer 6, deve ser atribuído como image/gif). O segundo é a opção 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 não poderá visualizar mais a camada anterior) ✗ line 24: o método map.addLayer desenha a camada Ec_prov no mapa
  14. 14. 14 Adicionando uma sobreposição de camada WMS ✔ O código completo ficará assim:
  15. 15. 15 Adicionando uma sobreposição de camada WMS ✔ A página HTML terá a seguinte aparência:
  16. 16. 16 Centralizando o mapa em um local específico ✔ Suponhamos que queremos centralizar o mapa no Equador: ➔ Comente (ou apague) a linha de código: ➔ E substitua pela seguinte linha de código: ✗ lines 26-27: a função setCenter irá atribuir o centro do mapa a partir das coordenadas definidas como parâmetro (Longiture e Latitude) e o nível de zoom inicial do mapa. ✔ Também é possível incluir várias camadas ao mesmo tempo: ➔ Comente (ou apague) as linhas de código : ➔ E substitua elas por uma linha de código: ✗ line 26: a função map.addLayers toma como parâmetro uma lista de todas as camadas a serem adicionadas
  17. 17. 17 Centralizando o mapa em um local específico ✔ A página HTML terá a seguinte visualização:
  18. 18. 18 Adicionando sobreposição de camada WMS ✔ Agora vamos adicionar várias sobreposições de camadas WMS do Equador como rodovias, rios e áreas com água (as camadas que publicamos no GeoServer previamente): ➔ Inserir estas linhas de código após a definição das camadas posteriores: ✗ line 50: lembre-se de atualizar a lista de camadas na função map.addLayers!
  19. 19. 19 Exibindo camadas além de uma certa escala ✗ line 31: nos parâmetros de escala é necessário definir os valores: mínimo (3000000) e valor máximo (1) . Em outras palavras, a camada será visível entre as escalas 1:3000000 e 1:1. ✔ Para propósitos de visualização, recomenda-se configurar estas camadas visíveis para além de uma escala fixa, por exemplo 1:3000000: ➔ Inserir uma linha de código junto com os parâmetros da camada WMS, como no exemplo abaixo em rodovias do Equador:
  20. 20. 20 Adicionando elementos no mapa ✗ line 59: o parâmetro prefix define o texto que será o prefixo das coordenadas do cursor ✗ line 60: o parâmetro separator define o texto separador usado para separar as duas coordenadas ✗ line 61: o parâmetro suffix define o sufixo a ser inserido no cursor das coordenadas ✔ Vamos agora adicionar alguns elementos no mapa: ➔ Para inserir a posição do mouse no mapa, vamos inserir os seguintes códigos: ➔ Para adicionar a indicação da escala do mapa atual, insira a linha de código: ➔ Para adicionar a barra de escala, insira a linha de código:
  21. 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 código fora do código javascript: ✗ line 11: o parâmetro border-radius determina a configuração de pixels do canto arredondado ✗ line 12: o parâmetro opacidade determina o valor da opacidade (de 0 até 1)
  22. 22. 22 Adicionando uma camada WFS ✔ Vamos agora adicionar uma sobreposição de camada WFS: ➔ Para criar a camada, devem ser escritas as seguintes linhas de código: ➔ Um exemplo WFS padrão está disponível em http://openlayers.org/dev/examples/wfs-states.html ✗ line 61: o construtor OpenLayers.Layer.Vector adiciona uma camada vetorial na visualização do mapa ✗ line 63: o parâmetro protocol especifica o que protocolo WFS protocol será utilizado para adicionar a camada vetorial ✗ line 64: o parâmetro url define o link do servidor WFS, o endereço de nosso WFS Geoserver local é http://localhost:8082/geoserver/wfs ✗ line 65: o parâmetro featureType especifica o nome da camada, definido no GeoServer ✗ line 66: o parâmetro featureNS especifica o workspace namespace URI, definido no GeoServer
  23. 23. 23 Adicionando um segunda camada base WMS ✔ É possível adicionar outras camadas base em seu mapa. Lembre-se que toda camada WMS é considerada camada base por padrão: ➔ Para adicionar uma cartografia global no mapa, deve-se inserir as seguintes linhas de código antes da definição da camada base anterior: ✗ lines 21-22-23: o construtor OpenLayers.Layer.WMS adiciona a camapa WMS no mapa. Ele requer três argumentos: o nome da camada a ser visualizada; o endereço do servidor WMS; e o terceiro um objeto contendo os parâmetros a serem adicionados na requisição WMS (neste caso somente o nome da camada WMS basic) ✗ line 24: a função map.addLayer desenha a camada no mapa.
  24. 24. 24 Adicionando uma sobreposição de mapa ✔ A sobreposição dinâmica é inserida na visualização corrente do mapa respeitando a extensão do mapa inicial: ➔ Para inserir uma sobreposição de mapa, inserir o seguinte código: ✔ A página HTML deverá ser apresentada assim:
  25. 25. 25 Criando uma camada vetorial desenhada ✔ Vamos agora criar uma camada vetorial que será utilizada para desenhar polígonos, linhas e pontos: ➔ Para adicionar uma camada vetorial no mapa, inserir o seguinte código: ➔ Para adicionar um editing toolbar no mapa, inserir o seguinte código: ➔ Atenção: esta não é uma aplicação completa, pois não habilita editar e salvar os dados gerados (será necessário utilizar o protocolo WFS-T)!
  26. 26. 26 Adicionando as camadas Google, Bing e OpenStreetMap ✔ Com a finalidade de melhorar a aparência do mapa, é possível adicionar algumas camadas base fornecida por terceiros como Google, Microsoft e OpenStreetMap. Todas estas camadas são referenciadas utilizando a projeção Spherical Mercator (EPSG code: 900913): ➔ Para declara o uso da projeção, criar a visualização de mapa desta forma: ➔ Para centralizar o mapa na posição correta, escreva o seguinte código: ✗ line 19: o parâmetro da projection define que a projeção Spherical Mercator projection é usada ✗ line 20: o parâmetro displayProjection diz que as coordenadas serão exibidos em WGS84 (como latitude e longitude) ✗ lines 130-131: as coordenadas geograficasdo mapa centralizado (previamente definido) são transformadas em coordenadas da projeção Spherical Mercator. Desta forma, o mapa está corretamente centralizado no Equador.
  27. 27. 27 Adicionando a camada Google ✔ Para adicionar as camadas Google (physical map, streets map, hybrid map and satellite map) na visualização do mapa ➔ Escreva este código antes (e fora) do código customizado javascript: ➔ Insira as seguintes linhas de código: ✗ lines 23-27-31-35: a função OpenLayers.Layer.Google adiciona uma camada base Google na visualização do mapa
  28. 28. 28 Adicionando a camada Google ✔ Um exemplo de visualização é o seguinte:
  29. 29. 29 Adicionando a camada Microsoft (Bing) ✔ Para adicionar as camadas Microsoft (Bing) (roads map, aerial map and hybrid map) na visualização do mapa ➔ Escreva os seguintes códigos: ✗ 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 função OpenLayers.Layer.Bing adiciona a camada base Microsoft (Bing) na visualização do mapa
  30. 30. 30 Adicionando a camada Microsoft (Bing) ✔ Um exemplo de visualização é o seguinte:
  31. 31. 31 Adicionar a camada do OpenStreetMap ✔ Para adicionar a camada OpenStreetMap ➔ Escreva os seguintes códigos: ✗ line 73: a função OpenLayers.Layer.OSM adiciona a camada base OpenStreetMap na visualização do mapa ✔ Um exemplo de visualização é o seguinte:
  32. 32. 32 Referências ✔ 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

×