Introdução ao OpenLayers:

Básico
Estou começando hoje uma série de posts sobre o OpenLayers, com o intuito de
criar uma documentação básica sobre ele em português tendo em vista que
praticamente ela não existe.

Todo o material que vou publicar nessa série, é com base no Workshopministrado
pela equipe da OpenGeo (norte-americana) no FOSS4G 2008 na África do Sul.
Então vamos começar:
1. O que é o OpenLayers?
É uma API Javascript que fornece funcionalidades para criar mapas na web
oferecendo as funções básicas para disponibilizar seus dados espaciais.
2. Módulo I: Básico
Iremos começar com um exemplo básico. Para isso você deve criar uma pasta no
seu diretório de documentos do Apache com o nome de ol_workshop, feito isso
crie um arquivo chamado 1-basico.html e copie o código abaixo:
Após salvar o arquivo, abra-o no browser e você deverá ver o mapa dos Estados
Unidos:

O script acima é executado obedecendo seis passos que serão detalhados abaixo:

3. Passo 1: Carregando a biblioteca OpenLayers

A URL “http://openlayers.org/api/OpenLayers.js” aponta para o local do arquivo

JavaScript que será carregado. Como o OpenLayers é OpenSource, você tem a
possibiliade de utilizar plugins como o Firebug, e depurar o código Javascript
diretamente no seu navegador.
4. Passo 2: O Mapa do DOM

O DIV é um elemento que estamos utilizando para a marcação do nosso mapa.

Mais tarde, usaremos o id do div para a criação do mapa.

5. Passo 3: O Objeto Map

Mapas no OpenLayers são representados pela classe Map. Cada objeto map
representa um mapa na página. No exemplo acima foi criado um novo mapa
utilizando o construtor da classe Map, o OpenLayers.Map com a palavra
chave new.
Neste código, nós passamos no construtor um argumento para identicadar o
elemento que estamos usando, que definimos no DIV. O construtor pode
opcionalmente receber como segundo parâmetro um objeto contento mais
parâmetros para facilitar na configuração do seu mapa.

Para maiores informações, a documentação da classe Map pode ser encontrada na

página da Documentação do OpenLayers, em inglês.
6. Passo 4: Criando uma camada

O OpenLayers organiza o seu mapa em diversas camadas (layers). Neste código é

construída uma camada e adicionada ao mapa.

7. Passo 5: Posição do Mapa

Este código informa ao mapa ajustar o zoom para a sua extensão máxima , que por
padrão é de todo o mundo. É possível definir uma extensão passando um
parâmetro ao construtor do Mapa.

Para saber mais detalhes sobre os métodos de zoom, leia a documentação.

8. Passo 6: Carregando o Mapa

O código acima, será executado quando a página for criada, e então criará o mapa.

Veja também...
Introdução ao OpenLayers:
Integração
Após ver os outros módulos, com certeza, você já está conseguindo montar seus
dados através de camadas WMS, WFS. Porém, passando essa etapa, você
provavelmente vai querer dar um “tapa” na sua aplicação, e deixar ela com uma
interface mais amigável.

Hoje existem algumas bibliotecas JavaScript que possibilitam alguns recursos

interessantes apartir do AJAX, como as bibliotecas jQuery e ExtJS.

Como não tenho domínio nas duas bibliotecas citadas acima, irei deixar alguns
links, onde vocês poderão pesquisar mais afundo como realizar essa integração, a
idéia deste post é infomar o que é possível.

1. jQuery

 jQuery http://jquery.com/

 jQuery UI http://ui.jquery.com/

 jQuery UI Docs http://docs.jquery.com/UI

2. ExtJS
 Ext JS overview http://extjs.com/products/extjs/

 Ext JS Exemploshttp://extjs.com/deploy/dev/examples/

 Ext JS Documentação http://extjs.com/deploy/dev/docs/

Termina aqui então a série de posts sobre o OpenLayers, espero que elas sejam
úteis, e consigam dar uma noção inicial de como explorar este grande framework.

Introdução ao OpenLayers:
Layers
Começamos ontem uma série de posts sobre o OpenLayers, onde iremos abordar as
funcionalidades disponíveis nesse framework. Ontem começamos pelo básico,
apresentando a estrutura de um mapa e suas camadas, hoje trataremos mais a fundo
as propriedades das camadas (layers).

1. Módulo 2: Camadas
Cada mapa no OpenLayers poder ter uma ou mais camadas. A camada contém
toda a informação espacial que o usuário visualiza no mapa.

Existem diferentes tipos de camadas. Algumas camadas podem ser solicitadas

como “tiles”, ou seja, pedaços que irão compor o mapa. Temos dois exemplo para
isto os layers utilizados através do protocolo WMS (Web Map Service), e também
os layers proprietários como os do Google e Yahoo. Outro forma é carregar os
dados da camada, para isso é possível utilizar o padrão WFS (Web Feature
Service), que retorna todas as informações disponíveis.
2. Camadas WMS
O arquivo 1-basico.html criado no módulo anterior usa uma camada WMS. WMS
é um acrônimo para Web Map Service. Ele é um protocolo definido pela OGC
(Open Geospatial Consortium) para comunicação de dados espaciais renderizados
como imagem.
Uma camada WMS é criado no OpenLayers através de quatro parâmetros, sendo
que o último é opcional.

 name {String} Nome da camada

 url {String} URL do serviço WMS (e.g. http://wms.jpl.nasa.gov/wms.cgi)

 params {Object} Um objeto com informações para o método GetMap

 options {Ojbect} Opções extra de configuração

Mais informações sobre a classe WMS Layers podem ser obtidas na documentação
online. Você pode também realizar algumas modificações no seu exemplo
trocando as camadas para isso você pode acessar o site WMS Site, e escolher as
layers que deseja visualizar no seu mapa. Use o arquivo 1-basico.htmlpara isso, ou
crie um novo.
3. Camadas Comerciais
Além das camadas que são de acesso público, você pode também adicionar ao seu
mapa camadas comerciais. O OpenLayers dá suporte as camadas do Google Maps,
Yahoo Maps, Virtual Earth e MultiMap.

Veja o exemplo abaixo, como ficaria a adição de uma camada do Google Maps no
seu mapa (Clique na imagem para vê-la no tamanho real).
4. Camadas WFS
Nesta seção criaremos camadas WFS. WFS é um acrônimo para Web Feature
Server, um padrão da OGC. Ao invés do WFS retornar imagens ele retorna dados
serializáveis, no padrão GML, dos vetores. Camadas solicitadas por WFS no
OpenLayers são transformadas em pontos, linhas, polígonos no seu navegador.
Veja na imagem abaixo como ficaria um mapa com uma camada WFS: