リーフレット:removeLayerの使用方法


13

これは私を怒らせています。レイヤーコントロールをマップに追加するためのLeafletチュートリアルを参照してください。

L.Icon.Default.imagePath = "Scripts/images";

var mapUrl = 'http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png';
var secondMap = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';

var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

var cities = L.layerGroup([littleton, denver, aurora, golden]);

var grayscale = L.tileLayer(mapUrl, { id: mapUrl }),
streets = L.tileLayer(secondMap, { id: secondMap });

var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 10,
    layers: [grayscale, cities]
});

var baseMaps = {
    "Grayscale": grayscale,
    "Streets": streets
};

var overlayMaps = {
    "Cities": cities
};

L.control.layers(baseMaps, overlayMaps).addTo(map);

さて、removeLayer関数を使用して、map.on( 'click')イベントを使用してコントロールから「GrayScale」マップを削除するにはどうすればよいですか?コードは次のとおりです。

map.on('click', function(){
    //remove GrayScale
});

ユーザーがボタンでグレースケールを削除できるようにしますか?または、他のイベントの効果として動的に削除されるのですか?または、グレースケールレイヤーをまったく使用せずにマップを開始するだけですか?
ヘキサモン14

最も簡単な解決策は次のとおりです。イベントへの効果として動的に。たとえば、map.on( 'click'、function(){})。それに応じて投稿を編集します。
yesman

回答:


20

グレースケールマップを最初から削除する場合は、削除するだけです。

    "Grayscale": grayscale,

から

var baseMaps = {
    "Grayscale": grayscale,
    "Streets": streets
};

クリックでレイヤーを削除する場合は、マップオブジェクトのメソッドとして呼び出します。そのようです:

map.removeLayer(grayscale)

コントロールから削除するには、まずコントロールを変数に割り当てる必要があります。これを変える:

L.control.layers(baseMaps, overlayMaps).addTo(map);

これに:

lcontrol = L.control.layers(baseMaps, overlayMaps).addTo(map);

その後、電話することができます:

lcontrol.removeLayer(grayscale) 

..コントロールから削除します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.