Leaflet - 向多個切換圖層中使用的GeoJSON點添加彈出框

Question

使用Leaflet，我創建了具有多個切換圖層的地圖。每個圖層都是GeoJSON線串和多個點的組合，每個點在多個圖層中使用（公交路線和路線上的所有停靠點）。這是我迄今爲止（留下所有混亂的GeoJSON數據）：

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); 

偉大的作品。我的問題是將一個彈出窗口綁定到每個點上，所以當你點擊一個公共汽車站時，這個名字就會彈出來。我正在使用：

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

但我正在努力弄清楚在哪裏叫它。唯一有效的工作是：

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}); 

這似乎真的，真的多餘。有一個更好的方法嗎？

Answer 1

事實上，您可能會多次將相同的彈出內容綁定到出現在幾個GeoJSON組中的巴士站......但事實上，您正在多次搭建您的巴士站。

如果這些是帶陰影的默認標記，當您顯示共享相同光圈的線路母線時，應該看到陰影疊加（即背景應變暗）。

現在，如果你想避免這些多個公交車站副本，這將需要更復雜的方法，因爲清除busLine1具有busStop1將從地圖中刪除後，即使是同樣的busLine2一部分仍然在地圖...

演示：https://jsfiddle.net/3v7hd2vx/52/