与dash应用程序集成后如何刷新python folium（map.html文件）？

Posted 2023-02-22

【中文标题】与dash应用程序集成后如何刷新python folium（map.html文件）？

【英文标题】：How to refresh python folium (map.html file) after integrating it with dash app?

【发布时间】：2020-03-27 21:49:24

【问题描述】：

我是 python 编程和 Dash 的新手，所以如果我说错了，请原谅我。 我正在使用 folium 库和 Dash。我找到了这个example on ***，我已经将folium map 转换为一个html 文档，并将那个html 文档传递给Dash（使用iframe 组件），并将它显示在我的应用程序中。

这是我使用 Dash 显示我的应用的代码：

app = dash.Dash()

app.layout = html.Div([
    html.H1('My first app with folium map'),
    html.Iframe(id='map', srcDoc=open('example_map.html', 'r').read(), width='100%', height='600'),
    html.Button(id='map-submit-button', n_clicks=0, children='Submit')
])


@app.callback(
    dash.dependencies.Output('map', 'srcDoc'),
    [dash.dependencies.Input('map-submit-button', 'n_clicks')])
def update_map(n_clicks):
    if n_clicks is None:
        return dash.no_update
    else:
        return html.Div([
            html.H1('My first app with folium map'),
            html.Iframe(id='map', srcDoc=open('example_map.html', 'r').read(), width='100%', height='600'),
            html.Button(id='map-submit-button', n_clicks=0, children='Submit')
        ])


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

现在我正在尝试使用 app.callback 刷新 folium 地图（我已传递给 Dash 的 html 文档），以防 html 文档中的坐标取自 json API（每 30 秒刷新一次） )，但它似乎不起作用。 这接近正确的方法吗？如果没有，我该怎么办？提前谢谢你！

【参考方案1】：

我有同样的问题，所以我只是尝试了解决方案。我认为 IF 语句需要更改为 'if n_clicks == 0' 而不是 'n_clicks is None'。如果是后者，地图会在您按下按钮之前自动更新。

@app.callback(
    dash.dependencies.Output('map', 'srcDoc'),
    [dash.dependencies.Input('map-submit-button', 'n_clicks')])
def update_map(n_clicks):
    if n_clicks == 0:
        return dash.no_update
    else:
        return open('example_map.html', 'r').read()

如果我遗漏了什么，请告诉我 :) 我对 Dash 还是很陌生。

【参考方案2】：

问题是您将整个 html.Div 组件返回到 iFrame 的 src 属性，这超出了您的预期。你的回调应该是：

@app.callback(
    dash.dependencies.Output('map', 'srcDoc'),
    [dash.dependencies.Input('map-submit-button', 'n_clicks')])
def update_map(n_clicks):
    if n_clicks is None:
        return dash.no_update
    else:
        return open('example_map.html', 'r').read()

这将在每次单击按钮时返回地图的 HTML 字符串。 HTML 字符串将替换应用程序的“地图”组件的“srcDoc”属性。我没有对此进行测试，所以如果它仍然无法正常工作，请告诉我。

希望这会有所帮助！