在 Plotly 的 density_mapbox 可视化中更新底图，同时保留视口

Posted 2023-03-29

【中文标题】在 Plotly 的 density_mapbox 可视化中更新底图，同时保留视口

【英文标题】：Updating the basemap in in Plotly's density_mapbox visualization while preserving viewport

【发布时间】：2021-12-29 18:55:22

【问题描述】：

下面是一个简单的 Streamlit 应用程序，它创建了 Plotly density_mapbox 可视化，并提供了一个用于更改使用的底图的复选框。我遇到的问题是我想在不修改当前视口（中心点和缩放级别）的情况下执行底图更新。在此代码中，当您单击复选框时，将重新渲染绘图并重置视口。我猜我需要使用 Streamlit 的缓存功能来保存 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")
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=3,
)
fig.update_layout(mapbox_style=style)

# Display the figure
st.plotly_chart(fig, use_container_width=True)

【问题讨论】：

底图是什么意思？地图框风格？ mapbox 图层中的附加图层？

@RobRaymond 是的，mapbox 风格。查看示例代码中被复选框状态修改的样式变量。

【参考方案1】：

在

plotly

的范围内看过这个。即没有

streamlit

层 从逻辑上讲，

plotly

是

updatemenus

。在两种样式之间切换会保持每种样式的上下文。它不会在样式之间移动上下文。

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")
style = "carto-positron"
style2 = "carto-darkmatter"
# 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=3,
)
fig.update_layout(mapbox_style=style)

fig.update_layout(
    updatemenus=[
        
            "buttons": [
                "label": s, "method": "relayout", "args": ["mapbox": "style": s]
                for s in [style, style2]
            ]
        
    ]
)

# Display the figure
# st.plotly_chart(fig, use_container_width=True)

【讨论】：

感谢 Rob 的回答。我正在寻找的是一种在切换样式后保持视口的解决方案。我看到在上述解决方案中如何独立维护样式。我认为，关键是能够查找视口的当前状态，以便在样式更改后可以缓存和施加这些值。