Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Open layers pt_br

2 528 vues

Publié le

  • Identifiez-vous pour voir les commentaires

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

×