如何使用Leaflet在OpenStreetMap上显示节点及路径线条？

我已经通过OSM API成功获取数据，并用以下代码在地图上显示了节点：

for (let i = 0; i < data.elements.length; i++) {
   let pos;
   let marker;
   const e = data.elements[i];
   if (e.id in this._ids) {
       continue;
   }
                
   this._ids[e.id] = true;
                
   if (e.type === 'node') {
       pos = L.latLng(e.lat, e.lon);
   } 
   else{
       pos = L.latLng(e.center.lat, e.center.lon);
   }
   if (this.options.markerIcon) {
       marker = L.marker(pos, { icon: this.options.markerIcon });
   } 
   else {
       marker = L.circle(pos, 80, {
       stroke: false,
       fillColor: '#0000ff',
       fillOpacity: 0.9
       });
   } 
}

当前仅能显示节点，想实现类似OverpassTurbo的路径线条显示效果，该怎么做？

解决方案：处理OSM的way和relation类型元素 #

OSM数据里的路径线条对应way类型元素，部分复杂路径属于relation类型，需要分别处理：

1. 处理way元素
   way元素包含nodes数组，存储构成路径的节点ID列表，需先缓存所有节点的经纬度，再按节点ID顺序生成坐标数组，最后用Leaflet的L.polyline绘制线条：

// 先缓存所有节点的坐标
const nodeCoords = {};
data.elements.forEach(e => {
  if (e.type === 'node') {
    nodeCoords[e.id] = L.latLng(e.lat, e.lon);
  }
});

// 遍历元素处理way和原有节点逻辑
data.elements.forEach(e => {
  if (e.id in this._ids) return;
  this._ids[e.id] = true;

  if (e.type === 'way') {
    // 按顺序获取way的节点坐标，过滤无效值
    const latLngs = e.nodes.map(nodeId => nodeCoords[nodeId]).filter(Boolean);
    if (latLngs.length > 1) {
      // 绘制路径线条
      const polyline = L.polyline(latLngs, {
        color: '#ff0000', // 线条颜色
        weight: 3,        // 线条宽度
        opacity: 0.8      // 透明度
      }).addTo(map); // 替换成你的地图实例
    }
  }
  // 保留原有的节点处理逻辑
  else if (e.type === 'node') {
    let pos = L.latLng(e.lat, e.lon);
    let marker;
    if (this.options.markerIcon) {
        marker = L.marker(pos, { icon: this.options.markerIcon });
    } 
    else {
        marker = L.circle(pos, 80, {
        stroke: false,
        fillColor: '#0000ff',
        fillOpacity: 0.9
        });
    }
    marker.addTo(map); // 记得添加到地图实例
  }
});

2. 处理relation元素（可选）
   如果查询包含公交线路、区域边界这类relation元素，需要解析其members成员，筛选way类型成员并拼接坐标：

// 先缓存所有way的坐标数组
const wayLatLngs = {};
data.elements.forEach(e => {
  if (e.type === 'way' && e.nodes) {
    const coords = e.nodes.map(id => nodeCoords[id]).filter(Boolean);
    if (coords.length > 1) {
      wayLatLngs[e.id] = coords;
    }
  }
});

// 处理relation
data.elements.forEach(e => {
  if (e.type === 'relation' && !this._ids[e.id]) {
    this._ids[e.id] = true;
    let fullLatLngs = [];
    e.members.forEach(member => {
      if (member.type === 'way' && wayLatLngs[member.ref]) {
        // 根据role判断是否反转坐标（适配单向路径）
        const coords = member.role === 'backward' ? [...wayLatLngs[member.ref]].reverse() : wayLatLngs[member.ref];
        fullLatLngs = fullLatLngs.concat(coords);
      }
    });
    if (fullLatLngs.length > 1) {
      L.polyline(fullLatLngs, {
        color: '#008000',
        weight: 2,
        opacity: 0.7
      }).addTo(map);
    }
  }
});

注意事项 #

• 确保OSM API查询请求包含way和relation所需的依赖节点（使用out body或out meta参数，避免只返回way/relation却缺失节点数据）
• 可根据需求自定义线条的颜色、宽度、透明度等样式，匹配OverpassTurbo的视觉效果

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