フィルタリーフレットCheckboxステータスに基づくGeojsonオブジェクト

Question

私はこのexampleをチェックボックスIDに基づいてリーフレットレイヤーをフィルタリングするように調整しようとしていました。これは、有効なオブジェクトが塗りつぶされ、対応するフィーチャがフィルタリングされ、マップに追加される種類の作品です。

ただし、チェックボックスをオフにすると、オブジェクトは空になりますが、削除するかどうかはわからないため、機能はマップ上に残ります。

機能を削除するには、ここで何をする必要がありますか？

function update() { 
     var enabled = {}; 
     // Run through each checkbox and record whether it is checked. If it is, 
     // add it to the object of types to display, otherwise do not. 
     for (var i = 0; i < checkboxes.length; i++) { 
      if (checkboxes[i].checked) enabled[checkboxes[i].id] = true; 
     } 
     L.geoJson(parishesData, { 
     filter: function(feature, layer) { 
      return (feature.properties.name in enabled); 
      } 
     }).addTo(map); 
     console.log(enabled) 
     }; 

Answer 1

スクリプトがあなたupdate()機能を実行するたびに、新しいL.geoJsonグループを作成し、マップに追加します。

新しいグループをマップに追加する前に、そのグループへの参照を保持し、マップから削除する必要があります。

おそらくのようなもの：素晴らしいおかげだ

var group; 

function update() { 
    var enabled = {}; 
    // Run through each checkbox and record whether it is checked. If it is, 
    // add it to the object of types to display, otherwise do not. 
    for (var i = 0; i < checkboxes.length; i++) { 
    if (checkboxes[i].checked) enabled[checkboxes[i].id] = true; 
    } 
    if (group) { 
    map.removeLayer(group); 
    } 
    group = L.geoJson(parishesData, { 
    filter: function(feature, layer) { 
     return (feature.properties.name in enabled); 
    } 
    }).addTo(map); 
    console.log(enabled) 
};