重新加载后，Plotly dash mapbox map不会缩放

Question

我想制作一个能够缩放的地图（例如使用滚轮）。这首先工作，但一旦重新加载地图，缩放功能就会停止工作。

另一种解决方案是在地图上显示+/-缩放工具。

这是一个重现问题的最小脚本。

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

from dash.dependencies import Input, Output, State
import plotly.graph_objs as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_february_us_airport_traffic.csv')

app.layout = html.Div([
    html.Button('Update Graph',id='get'),
    html.P("On first load, zoom works fine. After reloading, zoom doesn't work anymore."),
    dcc.Graph(id='map')
])

@app.callback(
    Output('map', 'figure'),
    [Input('get', 'n_clicks')])
def update_map_callback(n_clicks):
    return {
        'data': [
            go.Scattermapbox(
                lat=df['lat'],
                lon=df['long'],
                mode='markers',
                marker=dict(
                    size=4
                )
            )
        ],
        'layout': go.Layout(
            autosize=True,
            hovermode='closest',
            mapbox=dict(
                accesstoken='enter-your-mapbox-key-here',
                center=dict(
                    lat=40,
                    lon=-100
                ),
                zoom=2
            )
        )}

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

当页面首次弹出时，可以在地图上放大和缩小。我希望在按下“更新图表”按钮后，缩放仍然有效。但是，当按下“更新图形”按钮时，地图上的缩放级别将变为固定。

Answer 1

这个问题最近才出现 - 我基本上遇到了同样的问题，导致我的应用暂时无用。请参阅社区中提供解决方法的this entry - 如果您可以使用笨重的鼠标滚轮替代品。

Answer 2

谢谢，已经看到了，虽然它总比没有好，但它并不是一个真正可以接受的解决方法。有没有办法提醒mapbox这个问题？这是一次重大破坏。

Answer 3

我想通了，感谢线程here。诀窍是修改配置。这是一个有效的例子：

import dash
import dash_core_components as dcc
import dash_html_components as html

from dash.dependencies import Input, Output, State
import plotly.graph_objs as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Button('Update Graph',id='get'),
    html.P("On first load, zoom works fine. After reloading, zoom doesn't work anymore."),
    dcc.Graph(id='map')
])

@app.callback(
    [Output('map', 'figure'),
     Output('map', 'config'),
     ],
    [Input('get', 'n_clicks')])
def update_map_callback(n_clicks):
    map_figure = {
        'data': [
            go.Scattermapbox(
                lat=[32],
                lon=[-110],
                mode='markers',
                marker=dict(
                    size=4
                )
            )
        ],
        'layout': go.Layout(
            autosize=True,
            hovermode='closest',
            mapbox=dict(
                accesstoken='pk.eyJ1IjoidG9kZGthcmluIiwiYSI6Ik1aSndibmcifQ.hwkbjcZevafx2ApulodXaw',
                center=dict(
                    lat=40,
                    lon=-100
                ),
                zoom=2
            )
        )}

    map_config = dict(scrollZoom = True)

    return map_figure, map_config

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

Answer 4

与@ user47389类似，回答最适合我的代码修改是在我首先定义图形对象时明确设置scrollZoom = True

dcc.Graph(id='graph', config={'scrollZoom': True})

解决方案发现here。