如何在django-leaflet中加载显示OpenStreetMap的relation步道数据？

1. 准备步道矢量数据 #

导出目标OSM relation对应的GeoJSON格式数据，保存为trail_6754945.geojson，放入Django项目的静态资源目录中。

2. 修改模板代码 #

首先确保模板顶部加载静态文件标签：

{% load static %}

然后修改地图初始化脚本，补充加载步道的逻辑：

<script>
    function map_init_basic (map, options) {
        map.setZoom(16);
        map.setView([51.6020, 4.8514]);
        
        // 加载并渲染步道线路
        fetch("{% static 'trail_6754945.geojson' %}")
            .then(res => res.json())
            .then(trailData => {
                L.geoJSON(trailData, {
                    // 自定义步道样式，可按需调整颜色、粗细等参数
                    style: {
                        color: "#e63946",
                        weight: 4,
                        opacity: 0.8
                    }
                }).addTo(map);
            })
    }
</script>
{% leaflet_map "trailmap" callback="window.map_init_basic" %}

可选优化 #

• 若需要给步道添加点击弹窗显示名称等信息，可在L.geoJSON的配置参数中增加onEachFeature回调：

  onEachFeature: function (feature, layer) {
      if (feature.properties?.name) {
          layer.bindPopup(`步道名称：${feature.properties.name}`)
      }
  }
  

• 若步道数据需要动态获取，可将fetch请求的路径替换为你的Django后端接口地址，直接从接口拉取GeoJSON数据即可。

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