如何使用 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递减给定键的值如果它存在

例如

// 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() 如上所示 return 你的传奇 包裹在里面 <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;
}

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

How to change legends in multiple choropleth map using Mapbox

javascript

mapbox