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之后，遵循解决方案。

重装地图后，虚线仪表板地图将无法缩放

4 个答案: