Uma ferramenta típica para exibir em seu mapa é a barra de escala, e o OpenLayers 3 fornece a classe ol.control.ScaleLine para esta finalidade.

Vamos adicionar a escala no nosso mapa, para isso abra o arquivo map.html em seu editor de texto, e adicione o seguinte código para criar este novo controle em seu mapa:

controls: ol.control.defaults().extend([
  new ol.control.ScaleLine()
]),

Veja como ficou:

scaleline1

Você pode encontrar dificuldades para ler as informações sobre a barra de escala. Existem algumas atitudes que podem ser tomadas a fim de melhorar a visibilidade da escala. Se você quiser manter o controle dentro do mapa de exibição, você pode adicionar algumas declarações de estilo dentro do CSS do seu documento.

Para testar isso, você pode incluir uma cor de fundo e preenchimento para a barra de escala com algo parecido com o seguinte:

.ol-scale-line, .ol-scale-line:not([ie8andbelow]) {
   background: black;
   padding: 5px;
 }

No entanto, digamos que você acha que o mapa está ficando poluído visualmente. Para evitar isso, você pode exibir a escala em um local diferente. Para isso, precisamos primeiro criar um elemento adicional na nossa página e, em seguida, dizer ao controle de escala para criar-se dentro deste novo elemento.

Vamos então criar um novo elemento no <body> da sua página HTML. Para que seja fácil de referenciar este elemento, vamos dar-lhe um ID. Insira o seguinte código em algum lugar do <body> do seu map.html. (Colocar o elemento escala logo após o elemento do mapa <div id = “map”> </ div> faz sentido.):

<div id="scale-line" class="scale-line"></div>

Agora altere o código do controle de escala para fazer referência ao novo elemento:

controls: ol.control.defaults().extend([
  new ol.control.ScaleLine({className: 'ol-scale-line', target: document.getElementById('scale-line')})
]),

Adicione o código abaixo no seu estilo CSS:

.scale-line {
  position: absolute;
  top: 350px;
}
.ol-scale-line {
  position: relative;
  bottom: 0px;
  left: 0px;
}

Salve as alterações e abra o arquivo map.html no seu browser: @servidor@/map.html

scaleline2

Como vimos no post Vetores, podemos utilizá-los sobre um mapa base. Uma das vantagens de utilizarmos vetores é que podemos interagir com os dados. Neste exemplo, criamos uma camada de vetor, onde os usuários podem selecionar e visualizar as informações.

O exemplo anterior demonstrou a utilização de controles no mapa. A classe ol.interaction.Interaction é um controle responsável por manipular a interação do usuário, mas normalmente não tem uma representação visual. O exemplo abaixo demonstra o uso da classe ol.interaction.Select para interagir com uma camada vetorial. Veja:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="ol3/ol.css" type="text/css">
    <style>
    #map {
      height: 256px;
      width: 512px;
    }
    </style>
    <script src="ol3/ol.js" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h1>My Map</h1>
    <div id="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        interactions: ol.interaction.defaults().extend([
          new ol.interaction.Select({
            style: new ol.style.Style({
              image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                  color: '#FF0000'
                }),
                stroke: new ol.style.Stroke({
                  color: '#000000'
                })
              })
            })
          })
        ]),
        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'}
            })
          }),
          new ol.layer.Vector({
            title: 'Earthquakes',
            source: new ol.source.GeoJSON({
              url: 'data/layers/7day-M2.5.json'
            }),
            style: new ol.style.Style({
              image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                  color: '#0000FF'
                }),
                stroke: new ol.style.Stroke({
                  color: '#000000'
                })
              })
            })
          })
        ],
        view: new ol.View({
          projection: 'EPSG:4326',
          center: [0, 0],
          zoom: 1
        })
      });
    </script>
  </body>
</html>

Salve as alterações, e para ver o recurso de seleção em ação, use o clique do mouse para selecionar um elemento:

select1

No próximo post falaremos sobre como realizar desenhos (edição) através da interface do OpenLayers.