如何使用Dash实现地图的前后对比滑块？

不需要自己造组件，用Dash自带的dcc.Slider配合回调函数，再结合Plotly图表的图层控制，就能轻松实现地图的前后对比效果。下面两种常见实现方式供你参考：

方式1：滑块控制对比图层透明度（渐变过渡） #

这种方式是将两张地图叠加，通过滑块调整上层地图的透明度，实现从基准状态到目标状态的平滑过渡：

import dash
from dash import dcc, html, Input, Output
import plotly.express as px

# 示例数据（可替换为你的地理数据）
df = px.data.gapminder()
base_year = df['year'].min()  # 基准年份
max_year = df['year'].max()   # 对比年份上限

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H3("地图前后对比（透明度控制）"),
    dcc.Slider(
        id='opacity-slider',
        min=0,
        max=100,
        value=50,
        marks={0: '仅基准', 50: '半透明叠加', 100: '仅对比'},
        tooltip={"placement": "bottom", "always_visible": True}
    ),
    dcc.Graph(id='comparison-map')
])

@app.callback(
    Output('comparison-map', 'figure'),
    Input('opacity-slider', 'value')
)
def update_map(opacity_value):
    # 生成基准地图
    fig = px.choropleth(
        df[df['year'] == base_year],
        locations='iso_alpha',
        color='lifeExp',
        hover_name='country',
        color_continuous_scale=px.colors.sequential.Plasma,
        title=f'预期寿命对比：{base_year} → 目标年份'
    )
    # 生成对比地图并添加为图层
    comparison_trace = px.choropleth(
        df[df['year'] == max_year],
        locations='iso_alpha',
        color='lifeExp',
        hover_name='country',
        color_continuous_scale=px.colors.sequential.Plasma
    ).data[0]
    # 根据滑块值设置对比图层透明度
    comparison_trace.opacity = opacity_value / 100
    fig.add_trace(comparison_trace)
    
    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

方式2：滑块切换对比年份（直接切换显示） #

如果需要明确对比两个不同时间点的地图，也可以用滑块选择目标年份，同时展示基准年份和目标年份的地图状态：

import dash
from dash import dcc, html, Input, Output
import plotly.express as px

df = px.data.gapminder()
base_year = df['year'].min()

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H3("地图年份对比（直接切换）"),
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        value=df['year'].max(),
        marks={str(year): str(year) for year in df['year'].unique()},
        step=None
    ),
    dcc.Graph(id='year-comparison-map')
])

@app.callback(
    Output('year-comparison-map', 'figure'),
    Input('year-slider', 'value')
)
def update_year_map(selected_year):
    fig = px.choropleth(
        df,
        locations='iso_alpha',
        color='lifeExp',
        hover_name='country',
        animation_frame='year',
        range_color=[df['lifeExp'].min(), df['lifeExp'].max()],
        color_continuous_scale=px.colors.sequential.Plasma,
        title=f'预期寿命：{base_year} vs {selected_year}'
    )
    # 关闭动画过渡，直接跳转到选中年份
    fig.layout.updatemenus[0].buttons[0].args[1]["frame"]["duration"] = 0
    fig.layout.updatemenus[0].buttons[0].args[1]["transition"]["duration"] = 0
    return fig

if __name__ == '__main__':
    app.run_server(debug=True)

两种方式都只用到Dash官方组件，完全不需要自行开发新组件。你可以根据需求调整，替换成自己的地理数据和对比维度即可。

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