Question

我已经阅读了有关如何从传单地图中删除图例但仍然没有运气的帖子。我有一个传奇，我希望链接到按年份编制索引的时间滑块。我想在时间滑块开启的任何年份显示图例。这是我创建图例的功能：

function createLegend3(map, index){


var legendControl = L.Control.extend({
    options: {
        position: 'bottomright'
    },
    onAdd: function(map){
       //create the container with a class name
        var container = L.DomUtil.create('div', 'legend-control-container');

        container.innerHTML += index
        //create temporal legend
        return container;
    }
});
// //add the legendControl to map
map.addControl(new legendControl); 
return legendControl;

};

如上所述，我有一个单独的时间滑块功能，用户可以使用时间滑块（范围滑块）滚动不同年份。我的想法（不是，效率，我知道），是每年调用createLegend3，使用索引作为参数：

if (index == 1971) {
                createLegend3(map, index)

if (index == 1972) {
                createLegend3(map, index)

问题是地图每次只添加一个新图例而不是更新。有没有办法简单地删除现有的图例并添加另一个，以便一次只显示一个？或者更有效的方法是根据时间滑块中的索引值更新图例？非常感谢提前。

Answer 1

您只是添加传说。如果要替换它，则应首先使用L.Map的{{1}}方法删除添加的图例。更好的方法是不执行整个删除，创建，添加循环，而是向L.Control添加一个方法，它只是更新容器的innerHTML。然后，您只需致电removeControl即可完成。

map.legend.setContent

L.Legend = L.Control.extend({
    'onAdd': function (map) {

        // add reference to mapinstance
        map.legend = this;

        // create container
        var container = L.DomUtil.create('div', 'legend-control-container');

        // if content provided
        if (this.options.content) {

            // set content
            container.innerHTML = this.options.content;

        }
        return container;
    },
    'onRemove': function (map) {

      // remove reference from mapinstance
      delete map.legend;

    },

    // new method for setting innerHTML
    'setContent': function(str) {
        this.getContainer().innerHTML = str;
    }
});

new L.Map('leaflet', {
    'center': [0, 0],
    'zoom': 0
}).addControl(new L.Legend({
    'position': 'topright',
    'content': new Date  
})).on('click', function (e) {

    // use reference on mapinstance
    this.legend.setContent(new Date);

});

body {
    margin: 0;
}

html, body, #leaflet {
    height: 100%;
}

宣传单删除/更新图例

1 个答案: