0

我有这个底图选择面板：

  // 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 图层。目前，当一个框被选中时，另一个也可以被选中。如何使当一个框被选中时，另一个框关闭，当另一个框被选中时，当前选中的框关闭？

非常感谢。

4

1 回答 1

0

不久前我做过类似的事情，虽然我为我的图层选择了复选框，因为有时我希望同时打开多个图层。首先，您需要在 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();
   }
 });
});

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

于 2015-12-06T21:00:20.480 回答