如何使用Mapbox更改多个等值区域图中的图例

Question

我使用Mapbox tutorial创建了一个多个等值区域图，并希望根据当前数据层的内容切换出图例。

这是我尝试用来更改图例的功能：

function changeLegend() {
    var previousLegend = $('.map-legends').html()
    map.legendControl.removeLegend(previousLegend)
    map.legendControl.addLegend(getLegendHTML());
}

但它没有正确删除传说，它只是将它们相互叠加。当我使用jQuery而不是map.legendControl.removeLegend删除图例时，前一个图例会被删除，但是当我调用map.legendControl.addLegend时，它会添加2个图例，即使生成图例html的函数只触及一次。

有人可以帮我把传说删除并正确添加吗？

Answer 1

在我检查了L.mapbox.legendControl的工作方式后，我想我可能有一个问题的原因，让我先解释一下它是如何工作的

• map.legendControl._legends是一个将图例保存为键的对象，值是通过map.legendControl.addLegend添加的相等字符串的数量，类似map.legendControl.removeLegend递减给定键的值（如果存在）

e.g。

// at this point:
//   map.legendControl._legends = {}

map.legendControl.addLegend('<span>hello world</span>')
// at this point:
//   map.legendControl._legends = {
//     '<span>hello world</span>': 1
//   }

map.legendControl.addLegend('random string')
// at this point:
//   map.legendControl._legends = {
//     '<span>hello world</span>': 1,
//     'random string': 1
//   }

map.legendControl.addLegend('random string')
// at this point:
//   map.legendControl._legends = {
//     '<span>hello world</span>': 1,
//     'random string': 2
//   }

map.legendControl.removeLegend('random string')
// at this point:
//   map.legendControl._legends = {
//     '<span>hello world</span>': 1,
//     'random string': 1
//   }

现在我们知道了如何保存它们，让我们看看它是如何呈现它们的（这是每次addLegend或removeLegend通过_update方法

时自动完成的

• 它迭代_legend对象，对于找到的每个键，它将使用<div class="map-legend wax-legend"></div>包裹元素，并为每个键呈现（它实际上使用_legend[some key]作为一个简单的计数器，它不会用它来渲染东西）

重要提示：如果密钥中有html，它将首先进行清理

以上示例将呈现为

<div class="map-legend wax-legend"><span>hello world</span></div>
<div class="map-legend wax-legend">random string</div>

这是.map-legends容器

的内容

<div class="map-legends wax-legends leaflet-control">
  <div class="map-legend wax-legend"><span>hello world</span></div>
  <div class="map-legend wax-legend">random string</div>
</div>

返回您正在执行的代码var previousLegend = $('.map-legends').html()，如上所示，您的图例将包含在 <div class="map-legend">中，并且不会删除它们

一个简单的解决方案是避免使用$('.map-legends').html()来获取之前插入的html，而是将其保存在这样的变量中

var previousLegend;
function changeLegend() {
  if (previousLegend) map.legendControl.removeLegend(previousLegend)
  var newLegend = getLegendHTML();
  map.legendControl.addLegend(newLegend);
  previousLegend = newLegend;
}