Streamlit中更新Plotly density_mapbox底图时如何保留视口状态

实现思路 #

• 用st.session_state持久化存储地图的缩放级别与中心点坐标
• 监听Plotly图表的布局交互事件，用户平移、缩放地图时同步更新存储的视口参数
• 每次重绘图表时优先读取存储的视口参数，替代固定默认值

完整修改后代码 #

import streamlit as st
import plotly.express as px
import pandas as pd

df = pd.DataFrame(
    data=(
        [
            [32.4087249155, -100.9509696428, "2013-01-01", 1],
            [31.5201976084, -102.1030942593, "2013-01-01", 1],
            [31.434573418, -102.0592907601, "2013-01-01", 1],
            [31.2635930582, -101.95341361, "2013-01-01", 1],
            [31.4287233847, -102.0253840388, "2013-01-01", 1],
            [31.4872286706, -101.5455598032, "2021-01-01", 1],
            [31.5439162579, -101.4833865708, "2021-01-01", 1],
            [31.5439362581, -101.4833065695, "2021-01-01", 1],
            [31.7980713977, -102.0937650441, "2021-01-01", 1],
            [32.02050082, -103.31736372, "2021-01-01", 1],
        ]
    ),
    columns=["Latitude", "Longitude", "Date", "Count"],
)

st.set_page_config(layout="wide")

# 初始化会话状态存储视口参数
if "map_zoom" not in st.session_state:
    st.session_state.map_zoom = 3
if "map_center" not in st.session_state:
    st.session_state.map_center = {"lat": df["Latitude"].mean(), "lon": df["Longitude"].mean()}

# 视口参数更新回调
def update_viewport(layout_data):
    if "mapbox.zoom" in layout_data:
        st.session_state.map_zoom = layout_data["mapbox.zoom"]
    if "mapbox.center" in layout_data:
        st.session_state.map_center = layout_data["mapbox.center"]

style = "carto-positron"
sat_view = st.checkbox("Dark view")
if sat_view:
    style = "carto-darkmatter"

fig = px.density_mapbox(
    df,
    lat="Latitude",
    lon="Longitude",
    z="Count",
    radius=10,
    # 复用存储的视口参数
    zoom=st.session_state.map_zoom,
    center=st.session_state.map_center
)
fig.update_layout(mapbox_style=style)

# 渲染图表时绑定回调事件
st.plotly_chart(fig, use_container_width=True, on_relayout=update_viewport)

说明 #

用户对地图做缩放、平移操作时，Plotly会触发relayout事件，回调函数会自动把最新的视口参数存入会话状态，点击复选框切换底图触发页面重渲染时，生成图表会直接读取之前存储的视口参数，不会重置到初始状态。

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