如何用Leaflet获取OpenStreetMap当前视图范围内的节点数据？

1. 启用视图变化自动重新查询 #

L.OverPassLayer默认不会在地图缩放/平移时自动触发新的查询，需显式开启autoLoad配置，让图层监听地图视图变化事件并重新获取数据：

var opl = new L.OverPassLayer({
  minZoom: 14,
  autoLoad: true, // 开启视图变化时自动重新查询
  query: '(way({{bbox}})["highway"~"^(' + query + ')$"];);(._;>;);out geom;',
  // ... 其他配置项
});

2. 重置已加载元素ID缓存 #

你的代码中this._ids会永久保留历史加载的元素ID，导致新视图范围内的元素即使被查询到，也可能因误判为已加载而跳过渲染。需在每次查询成功后重置该缓存：

onSuccess: function (data) {
  this._ids = {}; // 重置ID缓存，确保当前视图元素能正常加载
  console.log(data);
  // ... 后续处理逻辑
}

3. 清理旧图层避免元素堆积 #

当前代码仅添加新元素而不移除旧元素，会导致地图上堆积所有历史查询结果。建议用图层组统一管理道路元素，每次查询前清空旧内容：

// 初始化时创建图层组，用于管理所有道路元素
var roadLayerGroup = L.layerGroup().addTo(map);

var opl = new L.OverPassLayer({
  minZoom: 14,
  autoLoad: true,
  query: '(way({{bbox}})["highway"~"^(' + query + ')$"];);(._;>;);out geom;',
  onSuccess: function (data) {
    this._ids = {};
    roadLayerGroup.clearLayers(); // 清空旧道路元素
    console.log(data);
    
    urlxml = data.urlxml;
    data = data.result;

    // ... 省略xhttp请求逻辑
    
    for (let i = 0; i < data.elements.length; i++) {
      let pos;
      const e = data.elements[i];

      if (e.id in this._ids) {
        continue;
      }

      this._ids[e.id] = true;

      if (e.type === "way") {
        let posWay = [];
        for (let j = 0; j < e.geometry.length; j++) {
          pos = L.latLng(e.geometry[j].lat, e.geometry[j].lon);
          posWay.push(pos);
        }
        var polyline = L.polyline(posWay, { color: "blue" });
        roadLayerGroup.addLayer(polyline); // 将新元素添加到图层组
      }
    }
  },
});

4. 简化查询语法（可选） #

使用ES6模板字符串替换转义引号，让查询语句更易读：

query: `way({{bbox}})["highway"~"^(${query})$"];>;out geom;`

通过以上调整，图层会在地图视图变化时自动查询当前边界框内的道路数据，同时清理旧元素，确保只显示当前视图范围内的结果。

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