Introdução ao OpenLayers: Vetores
Módulo 4: Vetores
1. Formatos Vetoriais
Com o OpenLayers é possível ler e escrever em diversos formatos de dados vetoriais serializáveis como o GeoJSON, KML, GeoRSS, GML e WKT.
Você pode também utilizar as ferramentas de desenho para desenhar pontos, linhas e polígonos no seu mapa, não apenas para criação, como também para edição das feições e dos seus atributos.
Se você possuir o Google Earth, poderá visualizar suas camadas nele, bastanto para isso que você gere um KML (através de uma requisição WMS, ou indo diretamente no cliente OpenLayers do seu GeoServer), e abra-o no Google Earth.
2. Estilos
Uma das razões para utilizar dados vetoriais, é que com o OpenLayers você tem o poder de controlar o seu estilo, ou seja, a forma como ele irá aparecer no mapa para o cliente.
Por padrão, as feições desenhadas pelo OpenLayers são laranja. Porém os estilos são totalmente customizáveis, bastando para isso que você tenha um arquivo JavaScript definindo o estilo, ou um arquivo de estilos externo (um SLD do GeoServer, por exemplo).
O exemplo abaixo foi gerado a partir de uma requisição WFS ao GeoServer. A camada foi desenhada utilizando cores baseadas na população.
Veja no código fonte do exemplo que adicionamos um nova propriedade:
A propriedade styleMap do layer foi setada para myStyleMap, veja:
Neste caso nós inicializamos o StyleMap com um hash de estilos. Este hash pode possuir as seguintes propriedades:
- default – estilo que será desenhado na inicialização do mapa;
- select – estilo que será desenhado quando alguma feição for selecionada;
- temporary – estilo que será desenhado com estilos que devem ficar temporariamente no mapa.
Nosso exemplo utiliza o padrão. Observe que quando você colocar o mouse em cima do mapa, o estilo irá mudar, isso porque um estilo diferente é utilizando quando o mouse passa em cima das feições.
Veja como ficou a definição dos estilos:
Fonte: Fernando Quadro
Introdução ao OpenLayers: Controles
Módulo 3: Controles
No OpenLayers, é através do controle que é possuir realizar a interação do usuário com o mapa. Alguns controles tem um representação visual e outros são invisíveis para o usuário. Quando você cria um mapa com as opções padrões, você cria com controles padrões visíveis. Este controles padrões permitem que o usuário navegue pelo mapa tanto com o mouse como os os botões. Adicionalmente existem outros controles que você pode adicionar ao seu mapa, e é isto que vamos ver agora.
Figura 1. Mapa de Funcionalidades
1. Controle Padrão
O controle padrão já é criado automaticamente quando você inicializa o seu mapa, e não necessita de comandos para a criação.
2. Escala
Este comando insere a escala no canto inferior esquerdo do seu mapa, conforme indica a Figura 1.
3. Referência
A referência pode ser adicionada como foi demonstrada acima, ou caso você prefiro é possível defirnir qual imagem irá aparecer dentro da referência, para isso você deve escrever o seguite código:
4. Lista de Camadas
A Lista de camadas (LayerSwitcher), é onde você pode ver quais camadas estão disponíveis para visualização, quais estão ativas, as camadas base, e também pode ativar/desativar as camadas conforme a sua necessidade de visualização.
5. Ferramentas de Edição
As ferramentas de edição são utilizadas quando há necessidade de editar ou criar novas geometrias diretamente no mapa.
6. Coordenadas
Esta funcionalidade indica o par de coordenadas conforme o posicionamento do mouse.
Veja como ficaria o código de um mapa com as funcionalidades descritas acima:
Fonte: Fernando Quadro
Introdução ao OpenLayers: 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.html para 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:
Fonte: Fernando Quadro
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 Workshop ministrado 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.
Fonte: Fernando Quadro