如何用Python Folium在地图上创建道路路段速度动画？

核心步骤梳理 #

1. 数据关联与预处理 #

• 确保地理数据集（路段几何）和速度数据集通过唯一路段ID完成关联，这是所有操作的基础。若无统一ID，可通过路段名称、起止点坐标等字段做匹配。
• 给速度数据做三色映射划分，可参考两种规则：
  • 基于限速：绿色（速度≥限速80%，畅通）、黄色（速度在限速50%-80%，缓行）、红色（速度<限速50%，拥堵）
  • 基于全局分位：将所有路段速度排序后，取前33%设为绿色、中间33%设为黄色、后33%设为红色

2. 构建可渲染的Feature图层 #

以Leaflet前端地图库为例，步骤如下：

• 将地理数据转换为GeoJSON格式，在每个Feature的properties字段中加入对应路段的速度、映射后的颜色值
• 示例代码：

// 已完成数据关联的GeoJSON示例
const roadGeoJSON = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: { type: "LineString", coordinates: [/* 路段经纬度数组 */] },
      properties: { roadId: "R001", avgSpeed: 45, speedColor: "green" }
    }
  ]
};

// 创建图层并添加到地图
const roadLayer = L.geoJSON(roadGeoJSON, {
  style: function(feature) {
    return {
      color: feature.properties.speedColor,
      weight: 4, // 加粗路段模拟谷歌地图视觉效果
      opacity: 0.8
    };
  }
}).addTo(map);

3. 添加动态切换动画 #

若要模拟时段速度变化的动画效果，可定期更新Feature样式：

// 刷新路段颜色的函数
function updateRoadColors(newSpeedData) {
  roadLayer.eachLayer(function(layer) {
    const roadId = layer.feature.properties.roadId;
    const targetSpeed = newSpeedData.find(item => item.roadId === roadId).avgSpeed;
    // 重新计算颜色
    let newColor;
    if (targetSpeed >= 40) newColor = "green";
    else if (targetSpeed >= 20) newColor = "yellow";
    else newColor = "red";
    // 更新图层样式
    layer.setStyle({ color: newColor });
  });
}

// 每3秒模拟一次速度数据更新
setInterval(() => {
  // 替换为实际时段速度数据集
  const mockUpdatedData = [{ roadId: "R001", avgSpeed: Math.random() * 50 }];
  updateRoadColors(mockUpdatedData);
}, 3000);

4. 排查Feature创建失败的常见问题 #

• 地理数据格式错误：GeoJSON坐标需遵循[经度, 纬度]顺序，顺序颠倒会导致路段不显示
• 数据关联失败：路段ID不匹配，导致速度字段未正确赋值到对应地理Feature
• 图层样式错误：颜色值无效、权重设为0等会导致路段不可见

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