宣傳單移除/更新圖例

我已閱讀關於如何從傳單地圖中刪除圖例但仍沒有任何運氣的帖子。我有一個傳說，我想鏈接到按年索引的時間滑塊。我希望圖例能夠在滑動時間的任何一年顯示。這裏是我創建圖例的功能：宣傳單移除/更新圖例

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)

的問題是，地圖上只是每一次增加了一個新的傳奇，而不是更新的。有沒有一種方法可以簡單地刪除現有的圖例並添加另一個，以便一次只顯示一個圖例？或者更有效的方法來根據時間滑塊中的索引值更新圖例？非常感謝提前。

來源

2017-03-20 DiamondJoe12

您只是添加了傳說。如果您要替換它，則應首先使用L.Map的removeControl方法刪除添加的圖例。更好的方法是不去做完整的刪除，創建，添加循環，而是在您的L.Control中添加一個方法，它只更新容器的innerHTML。然後，您可以簡單地致電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%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Leaflet 1.0.3</title> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" /> 
 
    </head> 
 
    <body> 
 
    <div id="leaflet"></div> 
 
    <script type="application/javascript" src="//unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
    </body> 
 
</html>

來源

2017-03-20 18:46:12 iH8

IH8您好，感謝您的回覆！我運行了你的代碼，但仍然無法顯示任何圖例。有什麼想法嗎？ – DiamondJoe12

我是否需要像下面這樣的初始調用：this.legend.addTo（map） – DiamondJoe12

如果你沒有在JSFiddle或Plunker上分享一個例子，它清楚地表明出了什麼問題，我在這裏黑暗中，只是猜測。爲什麼不把我的摔跤手換成你所做的並將其張貼在這裏？ – iH8

宣傳單移除/更新圖例

回答

相關問題