从破折号中的地图框获取当前缩放和居中

Question

我想用 dash 制作一个交互式地图。所以我添加了一个 Scattermapbox 来可视化一些数据。对于 select 显示的数据，我添加了一个滑块。并使用回调重绘地图。

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import pandas as pd
import plotly.graph_objects as go

df = pd.DataFrame({'place_no': [1, 1, 1, 2, 2, 2],
                   'lat': [50.941357, 50.941357, 50.941357, 50.932171, 50.932171, 50.932171],
                   'lon': [6.957768, 6.957768, 6.957768, 6.964412, 6.964412, 6.964412],
                   'year': [2017, 2018, 2019, 2017, 2018, 2019],
                   'value': [20, 40, 60, 80, 60, 40]})


def get_map(df_map):
    fig = go.Figure(go.Scattermapbox(
        lat=df_map['lat'],
        lon=df_map['lon'],
        mode='markers',
        marker=go.scattermapbox.Marker(
            size=df_map['value']
        ),
    ))
    fig.update_layout(
        mapbox_style="open-street-map",
        mapbox={'center': go.layout.mapbox.Center(lat=50.936600, lon=6.961497), 'zoom': 11}
    )
    return fig


app = dash.Dash()

app.layout = html.Div([
    dcc.Graph(id='map',
              figure=get_map(df[df['year'] == 2017])),
    dcc.Slider(id='year-picker',
               min=2017,
               max=2019,
               marks={2017: {'label': 2017}, 2018: {'label': 2018}, 2019: {'label': 2019}}
               ),
    html.Div(id='shown-week', style={'textAlign': 'center'})
], )


@app.callback(
    Output(component_id='map', component_property='figure'),
    [Input(component_id='year-picker', component_property='value')]
)
def update_map(selected_year):
    filtered_df = df[df['year'] == selected_year]
    fig = get_map(filtered_df)
    return fig


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

目前效果还不错。我得到了我期望的结果。

但如果移动或缩放地图，然后select新数据与滑块，中心和缩放回到初始值，这很不方便。

有什么方法可以获取当前视图的中心和缩放，所以我可以在update-layout方法中添加它？或者还有其他方法可以保存当前视图吗？

Answer 1

你试过uirevision属性了吗？如果你在更新图的时候把这个属性设置为一个常量值，即

fig['layout']['uirevision'] = 'some-constant'

缩放等应该保持不变。有关详细信息，请参阅 documentation.

从破折号中的地图框获取当前缩放和居中

Get current zoom and center from mapbox in dash

python

mapbox

plotly-dash