Open layers pt_br

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
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
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
OpenLayers - Exemplos
✔Uma das melhores fontes de documentação é a página 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 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
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
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
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
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
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
Adicionando uma camada base WMS
✔O código completo da página ficará assim:

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
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
Adicionando uma sobreposição de camada WMS
✔O código completo ficará assim:

15. 15
Adicionando uma sobreposição de camada WMS
✔A página HTML terá a seguinte aparência:

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
Centralizando o mapa em um local específico
✔A página HTML terá a seguinte visualização:

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
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
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
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
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
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
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
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
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
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
Adicionando a camada Google
✔Um exemplo de visualização é o seguinte:

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
Adicionando a camada Microsoft (Bing)
✔Um exemplo de visualização é o seguinte:

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
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