重複したレイヤー/ショーをクリックすると永続的に表示されます

Question

リーフレットの使い方を学び始めています。私はマーカーで地図を作成しようとしています。カーソルを置くと、ルートが表示されます。マウスがマーカを離れる場合は、経路を削除する必要があります。 （この部分は機能します） マーカーをクリックすると、マウスがマーカーを離れるときにも地図上に経路が残るはずです。 したがって、マウスがマーカーを離れるときに削除されないように、ルートレイヤーを複製する必要があります。それとも私が知らないより良い方法があります。

function Route() { 
    DirectionsLayerLong = omnivore.gpx('GPX/ Route_long.gpx'); 
    DirectionsLayerLong.on('ready', function() { 
    this.setStyle(style_long); 
    }); 
    DirectionsLayerShort = omnivore.gpx('GPX/Route_short.gpx'); 
    DirectionsLayerShort.on('ready', function() { 
    this.setStyle(style_short); 
    }); 
    return DirectionsLayer = L.featureGroup([DirectionsLayerLong, DirectionsLayerShort]); 
}; 
var Marker = L.marker([50, -100], { 
    icon: iconfu 
}).addTo(map); 
Marker.on('mouseover', function(e) { 
    Route(); 
    DirectionsLayer.addTo(map); 
}); 
Marker.on('mouseout', function(e) { 
    DirectionsLayer.remove() 
}); 
Marker.on('click', function(e) { 
    DirectionsPermaLayer.remove(); 
    Route(); 
    DirectionsPermaLayer = DirectionsLayer; 
    DirectionsPermaLayer.addTo(map); 
}); 

私は単純に別の変数と雑食動物を使用することができますが、私は機能を再利用したいと思います。

Answer 1

最も簡単な解決策は、あなたが、マーカーをクリックしたときだけmouseoutevent listenerを削除することです：あなたのルート層をクローニング

Marker.on('click', function(e) { 
    Marker.off('mouseout'); 
}); 

は、イベントリスナー解きを削除する場合は、不要な言及しないように（もう少し複雑になりますあなたの問題）、それがどうやって行えるかを探る価値があります。まず第一に、あなただけのDirectionsPermaLayer = DirectionsLayerを使用してコピーを作成することができない理由の簡潔な説明がw3schoolsで見つけることができます：

オブジェクトは変更可能です：彼らはない値で、参照することによって対処されています。

yがオブジェクトである場合、次の文は、 、yのコピーを作成しません。

var x = y; // This will not create a copy of y. 

オブジェクトx、yのコピーではありません。 はです。 xとyは同じオブジェクトを に指します。

xとyが同じ オブジェクトであるため、yを変更するとxも変更されます。

ありJavascriptを約cloning an objectに行くmany waysがありますが、私はすべてのリーフレットの内部IDが予期しない動作を引き起こし、オブジェクトと一緒にコピーされるように、これらのほとんどは、リーフレット層をクローニングするために動作しないことを疑います。最善の戦略は、おそらくL.geoJsonを使用して、それらを読み戻し、その後、メソッドを使用してにGeoJSONにDirectionsLayerShortとDirectionsLayerLongを変換するために、次のようになります。

var Short2 = L.geoJson(DirectionsLayerShort.toGeoJSON()).setStyle(style_short); 
var Long2 = L.geoJson(DirectionsLayerLong.toGeoJSON()).setStyle(style_long); 
var Directions2 = L.featureGroup([Long2, Short2]).addTo(map); 

これはあなたのコードを少しリファクタリングを必要とする可能性があるが、それは仕事をする必要があります。