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 [...]
Muito legal esse tutorial, se eu tivesse eles em mãos quando comecei a mexer nele teria facilitado muito minha vida!!!! Já pensou em criar uma comunidade brasileira? Você já usou o OL com Ruby?
Luciano,
Teria facilitado muito a minha vida também, por isso decidi publicá-lo, para ajudar quem está começando a utilizá-lo.
Quanto a criar uma comunidade brasileira até já cheguei a pensar na questão, porém por enquanto tenho preferido falar sobre o assunto na lista GeoServer-BR ( http://tech.groups.yahoo.com/group/geoserver ), onde temos discutido bastante sobre ele, e tirado algumas dúvidas.
Em relação ao OpenLayers com o Ruby/Rails, ainda não tive tempo de mecher com os dois.
Fernando Quadro
[...] esta praticamente não existe. Foram disponibilizados 4 posts, passando pela criação de um mapa básico, suas camadas, controles, e algumas dicas de como trabalhar com dados [...]
Fernando,
Não sei qual foi sua intenção, mas acho que seria interessante se o código dos exemplos fosse copiável.
Abraço,
Felipe
Felipe,
A idéia é publicar um post com todos os arquivos dos 4 módulos. Eu usei a imagem, para ficar visualmente mais agradavel, pois não gosto muito dos scripts para código fonte (talvez ainda não tenha achado um bom).
Fernando Quadro
[...] com os posts do Fernando Quadro fazendo uma introdução ao Openlayers e como resolução de final de ano que eu devo postar mais, aí vai uma dica que me fez apanhar por [...]
Cara to levando uma surra com ele pq tem algumas coisas q funciona no firefox mas no internet explorer nao rola, o javascript tem q estar impecável, rsrs , mas eh muito louco trabalhar com openlyers tem um exemplo do meu trabalho aki :http://mpgeo.no-ip.info/index/
Tenho uma pergunta, como eu faço para debugar o js do openlayers? pq estou com problemas no internet explorer e nao sei onde é o erro.
Cleber,
Realmente eu abri ele nos 2 browsers (FF e IE7), e no IE7, ele dá um problema com a função info.
Quanto a debugar o código da biblioteca do OpenLayers, eu nunca precisei, e acredito, que possa ser algo no seu Javascript. Vejo o exemplo do GeoServer Developer Maps, ele é bem parecido com o seu mapa, e funcionou nos meus 2 browsers ( http://demo.opengeo.org/developers-map/ ).
Outra coisa, te aconselho também a entrar no grupo GeoServer-BR (http://tech.groups.yahoo.com/group/geoserver), lá discutimos assuntos relacionados tanto ao GeoServer quanto ao OpenLayers!
E uma pergunta, você está usando OpenLayers + ExtJS, ou está usando o MapFish?
Abraço,
Fernando!
Não funcionou !
Oi amigo, será que não tá faltando nada no seu post, como por exemplo algo sobre a parte: “http://localhost:8080/geoserver/wms”.
Será que eu não teria que ter esse geoserver rodando na minha máquina não ?
Obrigado desde já.
Samuel,
Não tem nada de errado. Na realidade para usar o exemplo da forma que ele está, o GeoServer precisa estar instalado na sua máquina sim. Mas para usar o OpenLayers isso não é necessário. Você pode trocar a camada topp:states do GeoServer, pela básica do próprio OpenLayers:
var wms = new OpenLayers.Layer.WMS( “OpenLayers WMS”,
“http://labs.metacarta.com/wms/vmap0″, {layers: ‘basic’} );
map.addLayer(wms);
}
Abraço,
Fernando