Folium TimestampedGeoJson点位同时闪烁而非按时间序列显示问题

使用folium的TimestampedGeoJson绘制路径时，代码无报错，但生成的HTML地图仅第一个时间点的点位正常显示，其余约1600个点位会在同一时间点全部闪烁出现，而非按各自的时间戳依次展示。

原实现代码 #

import json
import folium
import webbrowser

data = json.load(open("test2.json"))
starting_coords = [37.79185, -122.4159]  # 补充缺失的起始坐标定义
my_map = folium.Map(starting_coords, zoom_start=13)
folium.TimestampedGeoJson({
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [d["lon"], d["lat"]],
            },
            "properties": {
                "style": {"color": ''},
                "icon": "circle",
                "iconstyle": {
                    "fillOpacity": 0.8,
                    "stroke": "true",
                    "radius": 2
                },
                "times": [d["aoe"]]
            }
        } for d in data
    ]
}).add_to(my_map)

my_map.save("test.html")
webbrowser.open("test.html")

test2.json数据示例 #

[
    {
        "lat": 37.79185,
        "lon": -122.4159,
        "aoe": 1695149258521.0
    },
    {
        "lat": 37.79185,
        "lon": -122.4159,
        "aoe": 1695149293569.0
    },
    {
        "lat": 37.7911,
        "lon": -122.41661,
        "aoe": 1695149375911.0
    },
    {
        "lat": 37.79064,
        "lon": -122.42045,
        "aoe": 1695149446910.0
    }
]

问题原因及解决方法 #

核心原因 #

1. 时间格式不兼容：TimestampedGeoJson要求times字段必须是ISO 8601格式的字符串（如"2023-09-19T12:07:38.521Z"），而代码中传入的是毫秒级时间戳数值，导致时间解析异常。
2. 默认时长过短：TimestampedGeoJson默认的duration（每个时间点的展示时长）为200毫秒，大量点位会快速闪过，看起来像是同时出现。

修复代码 #

import json
import folium
import webbrowser
from datetime import datetime

data = json.load(open("test2.json"))
starting_coords = [37.79185, -122.4159]
my_map = folium.Map(starting_coords, zoom_start=13)

# 转换时间戳为ISO 8601格式字符串
features = []
for d in data:
    # 毫秒转秒，生成ISO格式时间
    iso_time = datetime.fromtimestamp(d["aoe"] / 1000).isoformat() + "Z"
    features.append({
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [d["lon"], d["lat"]],
        },
        "properties": {
            "style": {"color": "#ff0000"},  # 补充颜色，避免样式异常
            "icon": "circle",
            "iconstyle": {
                "fillOpacity": 0.8,
                "stroke": "true",
                "radius": 2
            },
            "times": [iso_time]
        }
    })

# 初始化TimestampedGeoJson时设置合理的时长参数
folium.TimestampedGeoJson(
    {"type": "FeatureCollection", "features": features},
    duration=1000,  # 每个点展示1秒
    transition_time=500,  # 过渡动画时长500毫秒
    auto_play=True,
    loop=False
).add_to(my_map)

my_map.save("test.html")
webbrowser.open("test.html")

额外说明 #

• 如果需要保留历史轨迹（即之前的点不消失），可以添加参数add_last_point=True，或者调整style中的opacity实现渐变效果。
• 确保所有时间戳是递增的，否则播放顺序会混乱。

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