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
Fernando eu teste esse código aqui no eclipse, fui no navegador mais não aparece nada mais também não da erro, eu tenho que adicionar alguma lib ou arquivo no meu projeto ?
Rubens,
Ele funciona sim, veja se não digitou algo que deveria ser maiúscula com letra minúscula. Ele é case sensitive, então isso faz diferença.
Não funcionou comigo, eu tenho o pacote ms4w instalado junto com openLayers.
Copiei o código salvei em html na pasta htdocs do apache, mas não funcionou.
Se puder me ajudar obrigado.
Olá Alessandro,
O que está acontecendo, qual erro que dá ao você executar o html?
Outra coisa, se poder colocar o código do html.
Abraço,
Fernando Quadro
[...] Introdução ao OpenLayers: Básico [...]
[...] Introdução ao OpenLayers: Básico [...]