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插件才能实现此目的。

如你所知，你需要设置一个事件监听器来手动＆＃34;指定适当的标签叠加层。 "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个额外的图层组，但它避免了自己设置事件监听器，如果你有足够的基础层，这可能有点麻烦。

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

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

1 个答案: