传单：根据哪个图层处于活动状态切换标签

Question

我有一个传单地图，其中包含从单独的 geoJSON 文件加载的三层。 我有三个额外的文件，每个文件都有 latlong 坐标和标签。

我正在使用底图 control.layers 在我的三个图层之间切换，并且我希望有一个覆盖图层复选框来启用标签图层，具体取决于哪个底图图层处于活动状态。

var basemaps= {
"layer1": layer1,
"layer2": layer 2,
"layer3": layer 3
};

我正在使用 layerGroups 将我的标签放在一起。 我尝试使用 ActiveLayer 插件来帮助我选择当前处于活动状态的基础层，但似乎总是有问题。

我是 javascript 新手，边走边学。

我的其余控制代码：

var picker = L.control.activeLayers(basemaps, showlabels {collapsed:false}).addTo(map);

if (picker.getActiveBaseLayer() == "layer1")
    {activelabel = label1};
if (picker.getActiveBaseLayer() == "layer2")
    {activelabel = label2};
if (picker.getActiveBaseLayer() == "layer2")
    {activelabel = label3};

var showlabels = {
"labels": activelabel
};  

有没有更好的方法来做到这一点？我想为我的图层设置单选按钮，并为我的标签设置一个复选框，根据选中的单选按钮更改标签。

编辑

我找到了这段代码，baselayerchange

map.on('baselayerchange', function(a) {
if (picker.getActiveBaseLayer().name == "layer1")
{activelabel = label1};
if (picker.getActiveBaseLayer().name == "layer2")
{activelabel = label2};
if (picker.getActiveBaseLayer().name == "layer3")
{activelabel = labels3};
});

它似乎在做某事，当我执行 console.log 时，它会告诉我活动层，但由于某种原因，它没有更新正在显示的标签。

Answer 1

您有几个基础层，每个基础层都有单独的叠加层（在您的情况下包含标签）。您希望叠加层是可切换的，但只应显示与当前基础层关联的层。

您不一定需要ActiveLayers 插件来实现这一点。

如您所见，您需要设置一个事件侦听器来“手动”分配适当的标签覆盖。 "baselayerchange" 事件确实是合适的，但是仅将新标签分配给您的 activelabel 变量是不够的，因为 Layers Control 使用了它在实例化时的值。

相反，您应该将activelabel 设为Layer Group，然后在"baselayerchange" 上，首先是clearLayers，然后在其中重新添加适当的标签层。

var activelabel = L.layerGroup();
var showlabels = {
  "labels": activelabel
};

map.on('baselayerchange', function (event) {
  activelabel.clearLayers();

  switch (event.layer) {
    case layer1:
      label1.addTo(activelabel);
      break;
    case layer2:
      layer2.addTo(activelabel);
      break;
    case layer3:
      layer3.addTo(activelabel);
      break;
  }
});

现场演示：http://playground-leaflet.rhcloud.com/zosa/1/edit?html,output

另一种可能的解决方案是使用Leaflet.FeatureGroup.SubGroup 插件，它可以让您将每个标签叠加层与其对应的基础层相关联，但让插件将叠加层添加到可切换层组中。

// Layer Group container for labels overlays.
var labelsGroup = L.layerGroup().addTo(map);


// Base layer 1: use a container Layer Group for the Tile Layer
// and a SubGroup that will receive the labels,
// to be sent into labelsGroup when the base layer is selected.
var group1 = L.layerGroup().addTo(map);
var subgroup1 = L.featureGroup.subGroup(labelsGroup).addTo(group1);

base1.addTo(group1);
labels1.addTo(subgroup1);


// Base layer 2.
var group2 = L.layerGroup();
var subgroup2 = L.featureGroup.subGroup(labelsGroup).addTo(group2);

base2.addTo(group2);
labels2.addTo(subgroup2);


L.control.layers({
  // Base layers.
  'Base 1': group1,
  'Base 2': group2
}, {
  // Overlays. This will switch on/off the labels.
  'Labels': labelsGroup
}).addTo(map);

现场演示：http://playground-leaflet.rhcloud.com/pasu/1/edit?html,output

虽然此解决方案需要每个基础层 2 个额外的图层组，但它避免了必须自己设置事件侦听器，如果您有很多基础层，这可能会有点麻烦。

免责声明：我是 Leaflet.FeatureGroup.SubGroup 插件的作者。