Как отключить флажок слой, когда другой слой выбран в панели слоев MapBox BaseMap

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 слоя. В настоящее время, когда один флажок установлен, другой может также быть проверен. Как сделать так, чтобы, когда один флажок установлен, другой отключается, а когда установлен другой флажок, текущий флажок отключается?

Большое спасибо.

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(); 
    } 
}); 
}); 

Я надеюсь, что это полезно. Это, более или менее, способ, которым я смог выполнить эту работу, но без вашего полного примера тестирования, я не могу сказать точно.