No último post você teve uma visão inicial sobre o OpenLayers 3, neste post iremos iniciar o assunto camadas (Layers).
Quando você adiciona uma camada ao seu mapa, os dados solicitados podem ser matriciais (raster) ou vetoriais. Você pode pensar em dados raster como informações prestadas através de imagens de satélite, e vetorial como informações estruturadas que podem ser processadas para exibição no navegador.
Há muitos tipos de serviços que fornecem dados raster. Esta seção vai lidar apenas com os que estão em conformidade com a especificação OGC Web Map Service (WMS).
Vamos começar com um exemplo de mapa completamento e vamos modificar as camadas para que você possa obter uma compreensão de como elas funcionam.
Dê uma olhada no seguinte código que já utilizamos no último post:
<!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({
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 vamos detalhar os métodos utilizados na criação da camada do código acima:
1. A classe ol.layer.Tile
Através do construtor da classe ol.layer.Tile obtemos um objeto do tipo olx.layer.TileOptions. Neste caso estamos fornecendo as informações através da classe ol.source.TileWMS. Um título legível para a camada pode ser fornecida com através do parâmetro “title”, mas basicamente qualquer descrição pode ser utilizada como título. No OpenLayers 3 há uma separação entre as camadas e fontes (sources), enquanto que no OpenLayers 2 tudo fazia parte da camada.
A classe ol.layer.Tile representa uma grade de imagens, e a ol.layer.Image representa uma única imagem. Dependendo do tipo de camada, você deve usar uma fonte (source) diferente (ol.source.TileWMS ou ol.source.ImageWMS).
2. A classe ol.source.TileWMS
No construtor da classe ol.source.TileWMS estamos passando dois argumentos, um é o url do serviço WMS, e o outro é o params um objeto que possui os nomes de parâmetros e seus valores.
A versão 1.3.0 do WMS é a utilizada como padrão no OpenLayers, caso seja necessário fornecer uma versão anterior, é possível indicá-la no argumento params.
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'}
})
})
]
Este mesmo serviço WMS oferece uma camada denominada “OpenStreetMap”. Altere o valor do parâmetro LAYERS de “bluemarble” para “OpenStreetMap”. Seu código da classe ol.layer.Tile deve ficar parecido com o código abaixo:
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'openstreetmap', VERSION: '1.1.1'}
})
})
No próximo post trataremos sobre camadas utilizando a prerrogativa do cache, para uma melhor performance do seu mapa.
