javascript - 根据每个要素的属性 ID 获取不同的 geoJSON 文件

Question

我是 javascript 新手 - 但我编写了以下代码来绘制火车位置，并使用传单的“onEachFeature”为每个功能添加火车路线(请参阅 screenshot ):

//Add marker description before being added to layer
function eachFeature(feature, layer) {
    layer.bindPopup(feature.properties.id);
    layer.on({
        mousedown: onClick,
        mouseover: whenHovered,
        mouseout: offHovered
    });
}

// Show/hide train lines on hover
function onClick() {
  $.getJSON("AEHL_2b.geojson", 
    function(data) { 
      staticRoute = L.geoJson(data);
      staticRoute.addTo(map); 
  });
}

function whenHovered() {
  $.getJSON("OPS_1b.geojson", 
    function(data) { 
      hoverRoute = L.geoJson(data);
      hoverRoute.addTo(map); 
  });
}

function offHovered() {
  map.removeLayer(hoverRoute);
}

基本上，我使用 leaflet (特别是 leaflet-realtime)的 onEachFeature 函数来尝试做两件事:

1. 添加包含该功能的传单 ID 的弹出窗口
2. 下载 geoJson 文件，以根据 map 项的传单 ID 绘制火车路线。

目前，我已经对 geoJson 进行了硬编码，但我似乎无法找到一种方法来获取每个功能的传单 ID 以在 getJson 函数中使用。

是否可以获取不同的 geoJson 文件，如果可以，有人可以帮我指点一下吗？由于我是 javascript 新手，因此感谢任何帮助

谢谢!

Answer 1

为 future 的自己/ future 的其他人进行 self 更新 - 如果您将 onClick/whenHovered/offHovered 函数放在 onEachFeature 使用的函数中，它就会起作用。例如

        function eachFeature(feature, layer) {
            layer.bindPopup(feature.properties.id);
            layer.on({
                mousedown: onClick,
            });

            //Add train route when clicked, or when hovering
            function onClick(){
                $.getJSON(feature.properties.id+".geojson", 
                    function(data) { 
                      staticRoute = L.geoJson(data);
                      staticRoute.addTo(map); 
                });
            }
        }