Estamos iniciando hoje uma série de posts que destina-se a dar uma visão geral sobre o OpenLayers 3 (OL3) como uma solução de mapeamento web. Os exemplos que serão apresentados supõe que você tem um servidor HTTP em execução localmente.

Os posts serão divididos em módulos, e cada módulo tem por base as lições aprendidas nos módulos anteriores e é projetado para construir de forma iterativa a base de conhecimento do leitor.

No OpenLayers, um mapa é um conjunto de camadas e controles para lidar com a interação do usuário. Um mapa é gerado com três ingredientes básicos: marcação, declarações de estilo e inicialização.

Vamos dar uma olhada em um exemplo totalmente funcional de um mapa com OpenLayers 3:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="ol3/ol.css" type="text/css">
    <style>
      #map {
        height: 256px;
        width: 512px;
      }
    </style>
    <title>OpenLayers 3 example</title>
    <script src="ol3/ol.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>My Map</h1>
    <div id="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            title: "Global Imagery",
            source: new ol.source.TileWMS({
              url: 'http://maps.opengeo.org/geowebcache/service/wms',
              params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
            })
          })
        ],
        view: new ol.View({
          projection: 'EPSG:4326',
          center: [0, 0],
          zoom: 0,
          maxResolution: 0.703125
        })
      });
    </script>
  </body>
</html>

Agora:

1. Baixe o arquivo resources.zip e salve-o na raiz do seu servidor web.
2. Copie o texto acima em um novo arquivo chamado map.html , e guarde-o na raiz da pasta que você fez o download.
3. Abra o mapa em seu navegador: @servidor_url@/map.html

map1

Após criado com sucesso o nosso primeiro mapa, nós vamos olhar para cada uma dessas partes com um pouco mais de detalhes.

1. Markup

A marcação para o mapa no exemplo anterior gera um único elemento do documento:

<div id="map" ></ div>

Este elemento <div> irá servir como contêiner para o nosso mapa. Neste caso, nós damos ao elemento um ID para que possamos referenciá-lo como o destino de nosso mapa.

2. Estilo

OpenLayers vem com um estilo padrão que especifica como os elementos relacionados com o mapa devem ser representados. Nós incluímos esse estilo na página map.html quando inserimos a seguinte linha de código:

<link rel = "stylesheet" href = "OL3 / ol.css" type = "text / css">

O OpenLayers não faz quaisquer suposições sobre o tamanho de seu mapa. Devido a isso, seguindo o estilo padrão, precisamos incluir pelo menos uma declaração de estilo para dar ao mapa um tamanho.

<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
  #map {
    height: 256px;
    width: 512px;
  }
</style>

Neste caso, estamos especificando a largura (512px) e a altura (256px). As declarações de estilo estão incluídas no elemento <head> do nosso documento. Na maioria dos casos, as declarações de estilo relacionados com o mapa será uma parte de um arquivo de estilos (CSS).

3. Inicialização

O próximo passo na geração de seu mapa é incluir o código de inicialização. No nosso caso, nós incluímos um elemento <script> na parte inferior do nosso documento <body> para fazer o trabalho, veja:

<script>
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.TileWMS({
          url: 'http://maps.opengeo.org/geowebcache/service/wms',
          params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
        })
      })
    ],
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [0, 0],
      zoom: 0,
      maxResolution: 0.703125
    })
  });
</script>

Devemos ressaltar que a ordem dos passos é importante. Antes do nosso script ser executado, a biblioteca OpenLayers deve ser carregada. No nosso exemplo, a biblioteca OpenLayers é carregada no elemento da seguinte forma: <script src = “OL3 / ol.js”> </ script>.

Da mesma forma, o nosso código de inicialização do mapa (acima) não pode ser executado até que o elemento map, seja lido. Ao incluir o código de inicialização no final do documento <body>, garantimos que a biblioteca é carregada antes da chamada do elemento map, fazendo que com que esteja pronta antes de gerar o nosso mapa.

Vamos olhar com detalhes o que o script de inicialização do mapa está fazendo. Nosso script cria um nova instância do objeto ol.Map com algumas opções de configuração: target: ‘map’

Neste caso, passamos o valor “map” como alvo para o construtor do mapa.

Abaixo vemos a configuração das camadas, que cria uma camada a ser exibida no nosso mapa:

layers: [
  new ol.layer.Tile({
    source: new ol.source.TileWMS({
      url: 'http://maps.opengeo.org/geowebcache/service/wms',
      params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
    })
  })
],

Não se preocupe com a sintaxe aqui, pois a criação de camadas será abordada em outro módulo. O importante é entender que o nosso mapa é um conjunto de camadas, e para ver um mapa, precisamos incluir pelo menos uma camada.

O passo final é a definição do modo de exibição. Nós precisamos especificar uma projeção, um ponto central e um nível de zoom. Nós também iremos especificar um valor para o parâmetro maxResolution para nos certificarmos de que não serão enviadas solicitações fora do nosso Bounding Box, que o GeoWebCache não possa manipular.

view: new ol.View({
   projection: 'EPSG:4326',
   center: [0, 0],
   zoom: 0,
   maxResolution: 0.703125
})

Você concluiu com sucesso o seu primeiro mapa! No próximo post falaremos com mais detalhes sobre camadas.