如何为Folium地图添加滑块实现标记点颜色随数值动态变化

问题背景 #

已有基础Folium地图代码：

import folium
from folium import plugins

m = folium.Map(
    location=[51.5, -0.09],
    zoom_start=11
)
m.save('map.html')

需要添加底部滑块控件，根据variable值切换标记点颜色，数据存储在制表符分隔的txt文件中，格式如下：

names   longitude   latitude    variable    value
Bank of friendship  -0.0990573382928028 51.5583162622095    1   1
Bank of friendship  -0.0990573382928028 51.5583162622095    2   1
Bank of friendship  -0.0990573382928028 51.5583162622095    3   1
Bank of friendship  -0.0990573382928028 51.5583162622095    4   1
Bank of friendship  -0.0990573382928028 51.5583162622095    5   0.5
Bank of friendship  -0.0990573382928028 51.5583162622095    6   0.75
Bank of friendship  -0.0990573382928028 51.5583162622095    7   0.25
Bank of friendship  -0.0990573382928028 51.5583162622095    8   0.25
Bank of friendship  -0.0990573382928028 51.5583162622095    9   0

实现步骤 #

1. 安装依赖库 #

确保已安装pandas用于数据读取处理：

pip install pandas folium

2. 完整代码实现 #

import folium
from folium import plugins
import pandas as pd

# 读取数据（假设文件名为data.txt，制表符分隔）
df = pd.read_csv('data.txt', sep='\t')

# 定义value到颜色的映射规则
def get_color(value):
    color_map = {
        0: 'red',
        0.25: 'orange',
        0.5: 'yellow',
        0.75: 'lightgreen',
        1: 'darkgreen'
    }
    return color_map.get(value, 'gray')  # 未匹配值默认灰色

# 创建基础地图
m = folium.Map(
    location=[51.5, -0.09],
    zoom_start=11
)

# 构造TimestampedGeoJson所需的特征数据
features = []
for _, row in df.iterrows():
    feature = {
        'type': 'Feature',
        'geometry': {
            'type': 'Point',
            'coordinates': [row['longitude'], row['latitude']]
        },
        'properties': {
            'time': str(row['variable']),  # 用variable值作为时间标识
            'icon': 'circle',
            'iconstyle': {
                'fillColor': get_color(row['value']),
                'fillOpacity': 0.8,
                'stroke': 'true',
                'radius': 10,
                'color': '#000000'  # 标记点边框颜色
            },
            'popup': f"{row['names']}<br>Variable: {row['variable']}<br>Value: {row['value']}"
        }
    }
    features.append(feature)

# 添加时间滑块控件到地图
plugins.TimestampedGeoJson(
    {'type': 'FeatureCollection', 'features': features},
    period='P1D',  # 时间间隔标识（此处仅为占位，不影响功能）
    auto_play=False,
    loop=False,
    loop_button=True,
    time_slider_drag_update=True,
    date_options='',  # 隐藏日期显示，仅保留滑块
    duration='P1D'
).add_to(m)

# 保存地图
m.save('map_with_slider.html')

代码说明 #

• 数据读取：用pandas读取制表符分隔的txt文件，自动解析列数据。
• 颜色映射：通过字典定义value对应的颜色，确保每个数值对应唯一颜色。
• TimestampedGeoJson：Folium内置的时间滑块插件，此处用variable替代时间维度，拖动底部滑块即可切换不同variable对应的标记点，颜色随value自动变化。
• 弹窗设置：点击标记点可显示地点名称、variable和value信息。

效果说明 #

打开生成的map_with_slider.html文件，地图底部会出现滑块控件：

• 拖动滑块到对应variable值，标记点会显示该值对应的颜色。
• 点击标记点可查看详细信息。
• 可通过控件上的播放按钮自动切换所有variable值。

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