如何仅在Mapbox地图上显示已切换开启图层的图例？

我明白你已经搞定了7个图层的切换功能，现在就差给每个图层配上对应的图例，并且能跟着图层的显示/隐藏同步变化对吧？别担心，用L.mapbox.legendControl其实没那么复杂，我给你一步步拆解怎么实现：

第一步：初始化图例控件并添加到地图 #

首先你需要先创建图例控件，然后把它添加到你的Mapbox地图实例上。这一步要放在你的地图初始化代码之后，图层加载前后都可以，建议在图层定义完成后执行：

// 假设你的地图实例是map
var legendControl = L.mapbox.legendControl().addTo(map);

这行代码会在地图上默认生成一个空的图例控件，接下来我们要给每个图层绑定对应的图例内容。

第二步：为每个图层准备图例内容 #

你可以用一个对象来存储每个图层对应的图例HTML结构，这样后续调用起来很方便：

// 定义每个图层对应的图例HTML，按需修改样式和文字
var layerLegends = {
  layer1: '<div class="legend-item"><span style="background: #ff4444; width:20px; height:20px; display:inline-block;"></span> 红色区域图层说明</div>',
  layer2: '<div class="legend-item"><span style="background: #00C851; width:20px; height:20px; display:inline-block;"></span> 绿色植被图层说明</div>',
  // 继续补充剩下5个图层的图例内容...
  layer7: '<div class="legend-item"><span style="background: #33b5e5; width:20px; height:20px; display:inline-block;"></span> 蓝色水系图层说明</div>'
};

这里的HTML可以完全自定义，比如调整颜色块的大小、添加图标、修改文字样式等，后续还能通过CSS进一步美化。

第三步：监听图层切换事件，同步更新图例 #

因为你是用自定义按钮切换图层，我们可以给按钮绑定点击事件，在切换图层可见性的同时更新图例。为了避免重复写代码，建议封装成通用函数：

// 封装图层切换+图例更新的通用函数
function bindLayerToggle(layerId, btnId) {
  const btn = document.getElementById(btnId);
  if (!btn) return;

  btn.addEventListener('click', function() {
    const layer = map.getLayer(layerId);
    if (!layer) return;

    // 切换图层可见性
    layer.setVisible(!layer.isVisible());
    // 同步更新图例
    updateLegend();
  });
}

// 批量绑定所有按钮和图层（替换成你实际的图层ID和按钮ID）
bindLayerToggle('layer1', 'btn-layer1');
bindLayerToggle('layer2', 'btn-layer2');
bindLayerToggle('layer3', 'btn-layer3');
bindLayerToggle('layer4', 'btn-layer4');
bindLayerToggle('layer5', 'btn-layer5');
bindLayerToggle('layer6', 'btn-layer6');
bindLayerToggle('layer7', 'btn-layer7');

// 定义通用的图例更新函数
function updateLegend() {
  let visibleLegendContent = '';
  // 遍历所有图层，收集可见图层的图例
  map.getLayers().forEach(function(layer) {
    const layerId = layer.getId();
    if (layer.isVisible() && layerLegends[layerId]) {
      // 如果允许多个图层同时显示，就拼接所有图例；否则取第一个可见图层的图例即可
      visibleLegendContent += layerLegends[layerId];
    }
  });

  // 更新图例控件的内容
  legendControl.setContent(visibleLegendContent || '');
}

第四步：设置初始状态图例 #

页面加载完成后，需要自动加载初始可见图层的图例，只需要调用一次更新函数：

// 页面加载完成后初始化图例
window.addEventListener('load', function() {
  updateLegend();
});

额外：美化图例样式 #

默认的图例样式比较基础，你可以加一点CSS让它更好看：

.mapbox-legend {
  background: white;
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  max-width: 200px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 6px 0;
  font-size: 14px;
}

.legend-item span {
  margin-right: 8px;
  border-radius: 2px;
}

这样你的图例就会完全跟着图层的显示/隐藏实时同步了！如果后续需要调整图例内容，直接修改layerLegends对象里的HTML即可。

内容的提问来源于stack exchange，提问作者krvrd