javascript - leaflet:根据哪个层处于事件状态切换标签

Question

我有一个包含三层的传单 map ，可以从单独的 geoJSON 文件加载。 我还有三个附加文件，每个文件都有经纬度坐标和标签。

我正在使用 basemap control.layers 在三个图层之间切换，并且我想要一个覆盖层复选框，该复选框将启用标签层，具体取决于哪个 basemap 图层处于事件状态。

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

我正在使用图层组将标签放在一起。 我尝试使用 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 变量是不够的，因为图层控件使用了实例化它时的值。

相反，您应该将您的 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 个额外的层组，但它避免了必须自己设置事件监听器，如果您有大量基础层，这可能会有点麻烦。

Disclaimer: I am the author of Leaflet.FeatureGroup.SubGroup plugin.