openstreetmap - 如何使用Leaflet在OpenStreetMap上显示节点和路线？

Question

我能够正确地从 OSM API 查询数据。

然后，我可以使用以下代码在 map 上显示节点:

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

这给了我以下视觉输出: MyOutput-Image

我怎样才能在 OverpassTurbo 上显示它是如何完成的？ : OverpassTurbo-Image

Answer 1

您的 OSM API 查询是什么样的？我假设这是一个立交桥查询，在这种情况下，您可能在末尾放置了一个 out center ，它返回每条路的中心。

Over pass out statement :

center: This adds only the centre of the above mentioned bounding box to ways and relations. Note: The center point is not guaranteed to lie inside the polygon (example).

因此，每条路线的中间都有一个长/纬度，这是您使用 e.center.lat 绘制为标记的内容

out center 的方式示例:

{
  "type": "way",
  "id": 2263973,
  "center": {
    "lat": 51.5070645,
    "lon": -0.1359499
  },
  "nodes": [
    9789823,
    9789817,
    3933850766,
    ...
  ],
  "tags": {...}
}

您可以遍历每个关联的节点，查找它们并获取经度和纬度。或者使用 out geom 选项直接返回坐标或节点:

{
  "type": "way",
  "id": 2263973,
  "bounds": {
    "minlat": 51.5064574,
    "minlon": -0.1363268,
    "maxlat": 51.5076716,
    "maxlon": -0.1355731
  },
  "nodes": [
    9789823,
    9789817,
    ...
  ],
  "geometry": [
    { "lat": 51.5064574, "lon": -0.1355731 },
    { "lat": 51.5069432, "lon": -0.1360143 },
    { "lat": 51.5072896, "lon": -0.1363027 },
    { "lat": 51.5073314, "lon": -0.1363255 },
    { "lat": 51.5073531, "lon": -0.1363268 },
    { "lat": 51.5073965, "lon": -0.1363228 },
    { "lat": 51.5074324, "lon": -0.1363027 },
    { "lat": 51.5074691, "lon": -0.1362638 },
    { "lat": 51.5076716, "lon": -0.1356893 }
  ],
  "tags": {...}
}

请注意如何在 bounds 属性中获取纬度和经度的最小值和最大值。然后，您可以遍历geometry数组，提取latlngs数组中的所有纬度和经度，并使用:

var polyline = L.polyline(latlngs, {color: 'blue'}).addTo(map); 绘制一条线。请参阅Leaflet doc on polyline

你可以得到这个，对于[highway~motorway]