Leaflet - 将弹出窗口添加到多个切换层中使用的 GeoJSON 点答案

【问题标题】：Leaflet - Adding Popups to GeoJSON point used in Multiple Toggle LayersLeaflet - 将弹出窗口添加到多个切换层中使用的 GeoJSON 点
【发布时间】：2016-07-28 16:52:42
【问题描述】：

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

这似乎真的，真的多余。有没有更好的方法来做到这一点？

【问题讨论】：

标签： leaflet

【解决方案1】：

实际上，您可以多次将相同的弹出内容绑定到出现在多个 GeoJSON 组中的公交车站……但实际上您是在多次构建您的公交车站。

如果这些是带有阴影的默认标记，当您显示共享同一站的线路时，您应该会看到阴影堆积（即背景应该变暗）。

现在，如果您想避免这些多个巴士站副本，则需要更复杂的方法，因为删除具有 busStop1 的 busLine1 将从地图中删除后者，即使它也是 @987654324 的一部分@ 还在地图上……

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

【讨论】：

谢谢。我认为现在绑定它多次将是我要走的路。