Leaflet多JSON图层半径内标记点选择功能异常排查求助

咱们一步步拆解你的代码问题，帮你解决页面空白、图层选不中的核心问题：

1. 最致命的语法错误 #

你的SelectPoints函数和内部的job.eachLayer回调都没有闭合的大括号，这会直接导致JavaScript解析失败，脚本中断执行——这就是地图消失、页面空白的核心原因！

2. 逻辑错误：嵌套遍历图层 #

你把job2.eachLayer放在job.eachLayer的内部，意味着每遍历一个job的标记点，就会完整遍历一遍job2的所有点，不仅会把job2的点重复添加到selPts数组（重复次数等于job的点数量），还会严重拖慢性能。正确的做法是分开遍历两个图层，而非嵌套。

3. 变量作用域问题 #

layer_lat_long、distance_from_centerPoint这些变量没有用let/const声明，会变成全局变量，遍历不同图层时可能被意外覆盖，导致距离计算出错。

4. 图层加载时机问题 #

如果在job或job2还没加载完成时调用SelectPoints，eachLayer会遍历不到任何图层，这也是单独加载第二个图层时能显示但选不中的原因之一。

修复后的完整代码示例 #

// 初始化地图（彼得伯勒大致坐标）
var map = L.map('map').setView([52.587, -0.235], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

// 声明图层变量和选中点数组
var job, job2;
var selPts = [];

// 加载第一个JSON图层
$.getJSON("Peterborough.json", function(data) {
  job = L.geoJSON(data, {
    pointToLayer: function(feature, latlng) {
      return L.circleMarker(latlng, {radius: 6, color: '#3388ff'});
    }
  }).addTo(map);
});

// 加载第二个JSON图层
$.getJSON("Test.json", function(data) {
  job2 = L.geoJSON(data, {
    pointToLayer: function(feature, latlng) {
      return L.circleMarker(latlng, {radius: 6, color: '#ff6666'});
    }
  }).addTo(map);
});

// 修复后的SelectPoints函数
function SelectPoints(lat, lon) {
  var dist = document.getElementById("miles").value;
  var centerPoint = L.latLng(lat, lon); // 使用Leaflet的LatLng对象更可靠
  var theRadius = parseInt(dist) * 1609.34; // 转换为米（1英里=1609.34米）

  selPts.length = 0; // 重置选中点数组

  // 遍历第一个图层的所有点
  if (job) { // 先检查图层是否已加载完成
    job.eachLayer(function(layer) {
      var layerLatLng = layer.getLatLng();
      var distance = layerLatLng.distanceTo(centerPoint);
      if (distance <= theRadius) {
        selPts.push(layer.feature);
      }
    });
  }

  // 遍历第二个图层的所有点（注意是分开遍历，不是嵌套！）
  if (job2) { // 检查图层是否加载完成
    job2.eachLayer(function(layer) {
      var layerLatLng = layer.getLatLng();
      var distance = layerLatLng.distanceTo(centerPoint);
      if (distance <= theRadius) {
        selPts.push(layer.feature);
      }
    });
  }

  // 可选：添加选中点的可视化反馈（比如高亮）
  // 先清除所有点的高亮样式
  if (job) job.eachLayer(layer => layer.setStyle({color: '#3388ff'}));
  if (job2) job2.eachLayer(layer => layer.setStyle({color: '#ff6666'}));
  
  // 给选中的点设置高亮样式
  selPts.forEach(feature => {
    if (job?.getLayer(feature.id)) {
      job.getLayer(feature.id).setStyle({color: '#22cc22', weight: 2});
    }
    if (job2?.getLayer(feature.id)) {
      job2.getLayer(feature.id).setStyle({color: '#22cc22', weight: 2});
    }
  });

  console.log("选中的点总数：", selPts.length);
}

// 可选：绑定地图点击事件触发查询
map.on('click', function(e) {
  SelectPoints(e.latlng.lat, e.latlng.lng);
  // 在点击位置添加半径圆标记
  L.circle(e.latlng, {radius: parseInt(document.getElementById("miles").value)*1609.34}).addTo(map).bindPopup("查询半径").openPopup();
});

额外注意事项 #

• 确保你的两个JSON文件都是标准的GeoJSON格式，否则L.geoJSON无法正确解析图层。
• 如果需要持久化显示查询半径，可以把圆标记存储为变量，每次查询前清除旧的圆标记。

内容的提问来源于stack exchange，提问作者Geographos