リーフレットの削除/凡例の更新

リーフレットのマップから凡例を削除する方法についての記事を読んだが、まだ運がない。私は年にインデックスされたタイムスライダーにリンクしたい伝説を持っています。私は時間スライダが何年になっても伝説をしなければならない。凡例を作成する機能は次のとおりです。リーフレットの削除/凡例の更新

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)

問題は、マップは単純に更新するのではなく、毎回新しい伝説を追加するということです。単に既存の凡例を削除し、一度に1つしか表示されないように別の凡例を追加する方法もありますか？または、タイムスライダのインデックスの値に基づいて凡例を更新するより効率的な方法はありますか？事前にありがとうございます。

出典

2017-03-20 DiamondJoe12

凡例のみを追加しています。それを置き換える場合は、最初にL.MapのremoveControlメソッドを使用して、追加された凡例を削除する必要があります。より良い方法は、削除、作成、追加サイクル全体を行うのではなく、コンテナのinnerHTMLを単に更新するメソッドをL.Controlに追加することです。それでは、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

リーフレットの削除/凡例の更新

答えて

関連する問題