在单张中显示关系(轨迹)

Question

全,

当我转到这个url：OpenStreetMap时，我看到顶部有一个带有“关系”(我假设这是所显示的轨迹的术语)的地图。

我正在尝试让这条轨迹也显示在我的Django网站上，在那里我正在使用django-leaflet。

目前，我的代码如下所示：

<script>
    function map_init_basic (map, options) {
        map.setZoom(16);
        map.setView([51.6020, 4.8514]);
    }
</script>
{% leaflet_map "trailmap" callback="window.map_init_basic" %}

这会将地图设置到正确的区域，但是如何添加实际的轨迹呢？

致以最高的敬意。

Answer 1

使用OSMPythonTools，您可以使用Overpass API从OSM数据库中获取轨迹关系，并将其几何图形提取为坐标数组：

from OSMPythonTools.overpass import Overpass
overpass = Overpass()

def fetch_relation_coords(relation): 
    rel = overpass.query('rel(%s); (._;>;); out;' % relation)
    coords = [el.geometry().coordinates for el in rel.elements() if el.type() == 'node']

    # Convert (lng, lat) to (lat, lng)
    latlngs = [[x[1], x[0]] for x in coords]

    return latlngs

latlngs = fetch_relation_coords("6754945")

# [[51.602685, 4.861282], [51.60629, 4.851437], [51.599504, 4.838481], [51.599561, 4.839231], ...]

我对Django还不够熟悉，无法理解如何将得到的坐标数组放到你的网页上，但是一旦你在Javascript中得到了它，你就可以用以下命令将它作为polyline添加到你的小叶地图上：

 L.polyline(latlngs).addTo(map);

Answer 2

在地图上添加踪迹相当简单。您应该能够在map_init_basic()函数的底部添加一行代码，如L.polyline(latlngs).addTo(map); (其中latlngs是定义轨迹路线的[lat, lng]坐标对数组)或L.geoJSON(trail).addTo(map); (其中trail是描述轨迹的GeoJSON格式对象)。有关更多详细信息，请参阅Polyline和GeoJSON的单张文档。

更复杂的部分是如何获取跟踪的lat/lng数据。其中一种方法是使用Overpass Turbo online API从OpenStreetMap检索数据。在天桥窗口的左侧输入以下查询，点击'Run'，然后切换到'Data‘选项卡查看结果：

rel(6754945);  // Id number of the OSM Relation to fetch.
(._;>;);
out;

data选项卡应显示组成编码为OSM XML文件的轨迹的点。您可以复制它并操作文本来提取坐标，或者使用Overpass中的“导出”菜单以GeoGSON或各种其他格式下载数据。将数据放到地图上的最佳方式取决于应用程序的详细信息，但如果data是一个包含踪迹的GeoJSON的字符串，则会将其添加到地图上：

L.geoJSON(JSON.parse(data)).addTo(map);

How to convert an OSM relation to a list of lat/lng points?的回答中介绍了用于获取轨迹坐标的其他一些选项