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

面板的第一部分让用户选择一个mapbox底图，第二部分是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

如果您不熟悉单选按钮，请务必注意组中的所有按钮都需要具有相同的名称 - 这样，一次只能有一个值。 / p>

现在，对于你的剧本，我认为你会想要做这样的事情（在这里进入我的记忆中）......

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

我希望这有用。这或多或少是我能够做到这一点的方式，但是如果没有完整的测试示例，我无法肯定地说。

如何在地图框底图图层面板中选择其他图层时关闭复选框图层

1 个答案: