如何通过JavaScript下拉菜单筛选修改Folium地图边缘线条颜色

现有代码核心问题 #

• 下拉框的change事件没有绑定，changeMapData 函数无法触发
• switch判断的case值与HTML下拉选项的value不匹配：HTML里Lanes (input)对应的value是lanes，原代码写的"Lanes(input)"永远匹配不到
• 没有正确获取Folium生成的边缘图层实例，也没有对API返回的所有边缘数据遍历匹配设置样式
• 错误使用jQuery选择器$(edges.lanes)，该写法不符合语法逻辑

第一步：暴露Folium边缘图层到全局 #

你需要在Python生成Folium地图的代码中，将边缘的GeoJSON图层暴露到前端全局作用域，方便JS调用，示例代码：

import folium

# 你的地图生成逻辑
m = folium.Map()
# 生成边缘图层
edges_layer = folium.GeoJSON(
    your_edge_geojson_data,
    # 其他初始配置
).add_to(m)
# 追加JS将图层暴露到window全局
m.get_root().html.add_child(folium.Element("""
<script>
window.edgesLayer = {{ edges_layer.get_name() }};
</script>
"""))

第二步：修改JS代码 #

修改changeMapData函数，同时绑定下拉框的change事件：

// 页面加载完成后绑定下拉框change事件
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('linkSelector').addEventListener('change', changeMapData);
  // 首次加载可以触发一次初始化样式
  changeMapData();
});

function changeMapData(){
  fetch("http://127.0.0.1:8000/api/edges/")
    .then(response => response.json())
    .then((edgeApiData) => {
      const linkSelector = document.getElementById('linkSelector');
      switch (linkSelector.value) {
        case "lanes":
          // 调用图层setStyle方法，根据车道数匹配颜色
          window.edgesLayer.setStyle(function(feature) {
            // 匹配API返回的对应边缘数据，如果你geojson的id字段名不是edge_id请自行修改
            const matchedEdge = edgeApiData.find(item => item.edge_id === feature.id);
            if (!matchedEdge) return {};
            if (matchedEdge.lanes === 1) {
              return {
                fillColor: "#FF0000",
                color: "#FF0000"
              };
            } else if (matchedEdge.lanes === 2) {
              return {
                fillColor: "#FFF933",
                color: "#FFF933"
              };
            }
            // 其他车道数可自行补充默认样式
            return {};
          });
          break;
        // 其他case比如length可以在这里补充逻辑
        default:
          // 选中none时重置为默认样式
          window.edgesLayer.resetStyle();
      }
    })
    .catch(err => console.error('数据拉取失败:', err));
}

注意事项 #

• 如果你的GeoJSON要素中存储边缘ID的字段不是id，请将feature.id修改为对应字段，比如feature.properties.edge_id
• 如果存在跨域问题，请在Django后端配置CORS跨域规则

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