Broschüre - Hinzufügen von Popups zu GeoJSON Punkt verwendet in mehreren Toggle Schichten

Question

Mit Leaflet, ich bin die Schaffung einer Karte, die mehrere Toggle-Schichten aufweist. Jede Ebene ist eine Kombination aus einem GeoJSON-Linienstring und mehreren Punkten, wobei jeder Punkt in mehreren Ebenen verwendet wird (Busrouten und alle Stopps auf der Route). Das ist, was ich bis jetzt habe (alle unordentlichen GeoJSON Daten weglassend):

var busStops = L.geoJson([busStop1, busStop2, busStop3, busStop4]); 
var busRoute10 = L.geoJson([route10, busStop1, busStop3]); 
var busRoute12 = L.geoJson([route12, busStop2, busStop4]); 

var baseLayers = { 
    "Route 12": busRoute10, 
    "Route 12": busRoute12, 
    "All Bus Stops": busStops, 
}; 

L.control.layers(null, baseLayers, {collapsed: false}).setPosition ('topright').addTo(map); 

Arbeitet groß. Mein Problem besteht darin, ein Popup an jeden der Punkte zu binden. Wenn Sie also auf eine Bushaltestelle klicken, erscheint der Name. Ich verwende:

function onEachFeature(feature, layer) { 
// does this feature have a property named popupContent? 
if (feature.properties && feature.properties.popupContent) { 
    layer.bindPopup(feature.properties.popupContent); 
}} 

aber ich kämpfen, um herauszufinden, wo es zu nennen. Das einzige, was funktioniert hat, ist:

var busStops = L.geoJson([busStop1, busStop2, busStop3, busStop4],{ 
onEachFeature: onEachFeature}); 
var busRoute10 = L.geoJson([route10, busStop1, busStop3],{ 
onEachFeature: onEachFeature}); 
var busRoute12 = L.geoJson([route12, busStop2, busStop4],{ 
onEachFeature: onEachFeature}); 

Das scheint wirklich, wirklich redundant. Gibt es einen besseren Weg, dies zu tun?

Answer 1

In der Tat können Sie mehrmals den gleichen Popup-Inhalt an Bushaltestellen binden, die in mehreren GeoJSON-Gruppen angezeigt werden ... aber tatsächlich sind Sie Gebäude mehrere Male Ihr Bus hält.

Wenn diejenigen sind Standardmarker mit Schatten, sollten Sie den Schatten sehen Aufstapeln (das heißt der Hintergrund sollte dunkler werden), wenn Sie Linien Busse angezeigt werden, die den gleichen Anschlag teilen.

Nun, wenn Sie diese mehrere Bus vermeiden wollen stoppt Kopien, die einen komplexeren Ansatz erfordern würde, als eine busLine1 zu entfernen, die busStop1 hat die letztere von der Karte zu entfernen, selbst wenn es auch Teil busLine2 ist, die immer noch auf Karte ...

Demo: https://jsfiddle.net/3v7hd2vx/52/