Switch baseLayer do OpenLayers no onchange de um select box

Boa tarde a todos,

Para quem deseja customizar um pouco a apresentação do OpenLayers, você pode trocar o controle ‘LayerSwitcher’ por apenas um combobox ‘select’. Você precisa apenas registrar um evento para o onchange do combobox e chamar um método do OpenLayers. Abaixo deixo um exemplo de como fazer isto utilizando a biblioteca jQuery:

$('#id-meu-combobox').bind('change', function(){
   var index = parseInt($(this).attr('value'));
   var layer = map.layers[index];

   map.setBaseLayer(layer);
});

$('#id-meu-combobox').bind('change', function(){

var index = parseInt($(this).attr('value'));

var layer = map.layers[index];

map.setBaseLayer(layer);

});

Os itens do seu combobox você deve fazer de acordo com a ordem em que você adicionou as layers no Openlayers, mais ou menos assim:

var gmap = new OpenLayers.Layer.Google("Google Streets", {
   numZoomLevels : 20, 
   'sphericalMercator' : true
});

var ghyb = new OpenLayers.Layer.Google("Google Hybrid", {
   type : G_HYBRID_MAP, 
   numZoomLevels : 20, 
   'sphericalMercator' : true
});

var gsat = new OpenLayers.Layer.Google("Google Satellite", {
   type : G_SATELLITE_MAP, 
   numZoomLevels : 22, 
   'sphericalMercator' : true
});

var gphy = new OpenLayers.Layer.Google("Google Physical", {
   type : G_PHYSICAL_MAP, 
   numZoomLevels : 22, 
   'sphericalMercator' : true
});

var mapnik = new OpenLayers.Layer.OSM();
map.addLayers([ghyb, gmap, gphy, gsat, mapnik]);

var gmap = new OpenLayers.Layer.Google("Google Streets", {

numZoomLevels : 20,

'sphericalMercator' : true

});

var ghyb = new OpenLayers.Layer.Google("Google Hybrid", {

type : G_HYBRID_MAP,

numZoomLevels : 20,

'sphericalMercator' : true

});

var gsat = new OpenLayers.Layer.Google("Google Satellite", {

type : G_SATELLITE_MAP,

numZoomLevels : 22,

'sphericalMercator' : true

});

var gphy = new OpenLayers.Layer.Google("Google Physical", {

type : G_PHYSICAL_MAP,

numZoomLevels : 22,

'sphericalMercator' : true

});

var mapnik = new OpenLayers.Layer.OSM();

map.addLayers([ghyb, gmap, gphy, gsat, mapnik]);

Logo os options do seu combo serão por ordem de índice:

[html]

<option value=”0″>Google Hybrid</option>

<option value=’1′>Google Streets</option>

<option value=’2′>Google Physical</option>

<option value=’3′>Google Satellite</option>

<option value=’4′>OpenStreetMap</option>

[/html]

Qualquer dúvida é só comentar.
Até a próxima.

Share: