Question

我在浏览器中使用Mapbox.js。我想创建一个模块，如果它尚不存在，则创建一个地图，但如果有，则更新它。

我几乎一直都在那里，但我在更新自定义图例方面遇到了问题。我似乎只能附加它，并且无法清除它。

这是我的代码：

var analyseMap = {
  setUpMap: function(options) {
    var _this = this;
    L.mapbox.accessToken = 'mytoken';
    if (typeof this.map === 'undefined') {
        this.map = L.mapbox.map('map', 'mapbox.streets').setView([53.1, -2.2], 6);
        this.layerGroup = L.layerGroup().addTo(this.map);
    } else {
        this.layerGroup.clearLayers();
    }
    var geojson_url = "/api/1.0/myurlbasedonoptions";
    $.getJSON(geojson_url, function(boundaries) {
      var orgLayer = L.geoJson(boundariesWithData, { style: getStyle });
      _this.layerGroup.addLayer(orgLayer);
      _this.map.fitBounds(orgLayer.getBounds());
      var popup = new L.Popup({ autoPan: false });

      var legendHtml = _this.getLegendHTML(options);
      _this.map.legendControl.removeLegend();
      _this.map.legendControl.addLegend(legendHtml);

然后我从另一个模块中调用它：

// on initialise and update
map.setUpMap(someOptions);

我第一次打电话时效果很好。但是，在更新时，地图更新和图层更新很好，但我最终得到了两个传说。

如何在添加新图例之前清除现有图例？

documentation表示我需要知道图例HTML的值才能将其删除，这看起来很奇怪。

Answer 1

好的，我通过这样做修理了它：

if (typeof _this.legendHtml !== 'undefined') {
    _this.map.legendControl.removeLegend(_this.legendHtml);
}
_this.legendHtml = _this.getLegendHTML(_this.quintiles, options);
_this.map.legendControl.addLegend(_this.legendHtml);

仍然有兴趣看看是否有人有更优雅的解决方案！

Mapbox.js：清除自定义图例？

1 个答案: