如何为Folium地图添加下拉菜单实现分月热力图动态切换

核心逻辑：geodataframe.explore() 生成的热力图层本质是Folium的FeatureGroup图层对象，只要为每个月份预生成独立热力图层，再绑定下拉单选控件控制图层显隐即可，无需修改原有基础地图的搭建逻辑。

实现步骤 #

1. 批量生成所有月份的热力图层 #

先整理数据集中所有月份对应的温度字段名，循环调用explore()生成对应图层，所有图层绑定到同一个地图实例上，默认仅展示第一个月份的图层，其余图层初始设为隐藏。

import folium
import geopandas as gpd

# 替换为你自己的GeoDataFrame加载逻辑
# gdf = gpd.read_file('your_temp_data.geojson')

# 提取所有月份温度列，按你自己的字段命名规则调整筛选逻辑
month_columns = [col for col in gdf.columns if col.startswith('temp_')]
# 统一所有图层的色阶范围，避免切换时颜色标尺不统一
global_vmin = gdf[month_columns].min().min()
global_vmax = gdf[month_columns].max().max()

# 初始化基础地图，和你原有explore的参数保持一致即可
m = gdf.explore(
    column=month_columns[0],
    name=month_columns[0],
    cmap='RdYlBu_r',
    vmin=global_vmin,
    vmax=global_vmax,
    legend=True,
    tiles='CartoDB positron'
)

# 循环生成剩余月份的图层
for col in month_columns[1:]:
    gdf.explore(
        m=m,
        column=col,
        name=col,
        cmap='RdYlBu_r',
        vmin=global_vmin,
        vmax=global_vmax,
        legend=False,  # 关闭重复图例避免堆叠
        show=False     # 初始状态隐藏
    )

2. 注入下拉选择控件 #

直接向Folium地图的HTML根节点注入自定义下拉选择框，绑定JS监听事件，选中对应月份时自动切换显示对应图层、隐藏其余图层。

# 构造下拉控件HTML
select_control = """
<select id="monthSelector" style="position: fixed; top: 12px; left: 60px; z-index: 9999; padding: 6px 10px; border-radius: 4px; border: 1px solid #ccc; font-size: 14px;">
"""
# 填充下拉选项
for idx, col in enumerate(month_columns):
    selected_attr = "selected" if idx == 0 else ""
    # 选项文本做下格式化，去掉字段前缀，比如把temp_1月显示为1月
    option_text = col.replace("temp_", "")
    select_control += f'<option value="{col}" {selected_attr}>{option_text}</option>'

select_control += """
</select>
<script>
// 监听下拉选择动作
document.querySelector('#monthSelector').addEventListener('change', function(e){
    const targetLayerName = e.target.value;
    // 遍历地图所有图层，匹配对应月份图层做显隐切换
    Object.values(window.map._layers).forEach(layer => {
        if (!layer.options || !layer.options.name) return;
        if (layer.options.name === targetLayerName) {
            layer.addTo(window.map);
        } else {
            window.map.removeLayer(layer);
        }
    })
})
</script>
"""

# 把控件注入到地图
m.get_root().html.add_child(folium.Element(select_control))

# 导出地图或者直接在notebook里展示m
# m.save('month_temp_map.html')

注意事项 #

• 所有月份图层必须统一设置vmin和vmax为全量温度数据的最值，保证不同月份切换时，相同颜色对应的温度值一致，避免热力图视觉误导。
• 仅给默认显示的第一个图层开启legend=True，其余图层关闭图例，防止多个图例堆叠遮挡地图。
• 下拉控件的z-index值要设得足够高，避免被地图自带的缩放栏、版权信息控件遮挡。
• 如果需要调整下拉框位置，修改style里的top、left像素值即可。

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