在地圖框底圖圖層面板中選擇另一個圖層時如何關閉復選框圖層

Question

我有這個底圖選擇面板：

  // Basemap selection var baseMaps = L.control.layers({ 'Grey Canvas': L.mapbox.tileLayer('mapbox.light').addTo(map), 'Dark Canvas': L.mapbox.tileLayer('mapbox.dark'), 'Street Canvas': L.mapbox.tileLayer('mapbox.streets'), 'Simple Canvas': L.mapbox.tileLayer('mapbox.streets-basic'), 'Emerald Canvas': L.mapbox.tileLayer('mapbox.outdoors') }).addTo(map); // Add cartoDB layer, default is checked on var cdb_layer = cartodb.createLayer(map, 'LINK') .addTo(map).on('done', function(layer) { baseMaps.addOverlay(layer, 'Population'); }); // Add population density or other layers, default check is off var cdb_layer2 = cartodb.createLayer(map, 'LINK', { legends: false }) .on('done', function(layer) { baseMaps.addOverlay(layer, 'Population Density'); }); }) 

面板的第一部分允許用戶選擇一個地圖框底圖，第二部分是2個cartodb圖層。 當前，當選中一個框時，也可以選中另一個框。 我該如何做，以便在選中一個框時關閉另一個框，而在選中另一個框時關閉當前選中的框？

非常感謝。

Answer 1

盡管我選擇了各層的復選框，但前一段時間我還是做了類似的事情，因為有時我希望同時打開多個層。 首先，您需要在html中制作單選按鈕。

<input type="radio" name="map_layer" id="layer_1" checked>Layer 1<br>
<input type="radio" name="map_layer" id="layer_2">Layer 2

如果您不熟悉單選按鈕，請務必注意組中的所有按鈕都必須具有相同的名稱-這樣，一次只能有一個值。

現在，對於您的腳本，我想您將想要做這樣的事情（在這里進入我的記憶）...

var layerSource = {
  user_name: 'YOUR USERNAME HERE',
  type: 'cartodb',
  sublayers: [{sql: "SELECT * FROM population"},
             {sql: "SELECT * FROM population_density"}]
};

// STORE SUBLAYERS
var sublayers = [];                

// ADD LAYER TO MAP
cartodb.createLayer(map,layerSource)
.addTo(map)
.done(function(layer) {

for (i = 0; i < layer.getSubLayerCount(); i++) {
  sublayers[i] = layer.getSubLayer(i);
};

var cdb_layer = sublayers[0];
var cdb_layer2 = sublayers[1];

cdb_layer2.hide();

$("input[name=map_layer]:radio").change(function () {
  if($('#layer_1').is(':checked')){
    cdb_layer.show();
    cdb_layer2.hide();
   }
  if($('#layer_2').is(':checked')){
    cdb_layer2.show();
    cdb_layer.hide();
   }
 });
});

我希望這會有所幫助。 這或多或少是我完成這項工作的方式，但是如果沒有完整的示例可以測試，我不能肯定地說。