在地图框底图图层面板中选择另一个图层时如何关闭复选框图层答案

【问题标题】：How to turn off checkbox layer when another layer is selected in a mapbox basemap layer panel在地图框底图图层面板中选择另一个图层时如何关闭复选框图层
【发布时间】：2015-12-07 05:00:20
【问题描述】：

我有这个底图选择面板：

  // 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');
    });
  })

面板中的第一部分让用户选择一个 mapbox 底图，第二部分是 2 个 cartodb 图层。目前，当一个框被选中时，另一个也可以被选中。如何使当一个框被选中时，另一个框关闭，当另一个框被选中时，当前选中的框关闭？

非常感谢。

【问题讨论】：

基本上像这样：jsfiddle.net/bozdoz/gSSLG 但在底图图层面板中。
单选按钮是互斥复选框。
如何将复选框变成单选按钮？

标签： javascript jquery mapbox cartodb

【解决方案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();
   }
 });
});

我希望这会有所帮助。这或多或少是我能够完成这项工作的方式，但如果没有你的完整示例来测试，我不能肯定地说。

【讨论】：