将dash-leaflet控件映射到地图外的其他按钮答案

【问题标题】：Mapping dash-leaflet controls to other buttons outside the map将dash-leaflet控件映射到地图外的其他按钮
【发布时间】：2021-07-24 14:18:14
【问题描述】：

Dash-leaflet 允许添加控件，例如 ZoomControl、MeasureControl 或 EditControl 以映射图层。我想知道是否可以使用 Dash 按钮来执行与这些控件相同的操作。

例如，是否可以使用放置在地图外的几个 Dash 按钮来放大/缩小？

【问题讨论】：

标签： python leaflet plotly-dash dash-leaflet

【解决方案1】：

要使用 Dash 按钮，您需要创建回调来执行所需的地图属性修改。这是一个小示例，其中 Dash 按钮模仿 ZoomControl 的行为，

import dash_html_components as html
import dash_leaflet as dl
from dash_extensions.enrich import Input, Output, State, Dash

zoom_min, zoom_max, zoom0 = 1, 18, 6  # min/max zoom levels might depend on the tiles used 
app = Dash(prevent_initial_callbacks=True)
app.layout = html.Div([
    dl.Map(dl.TileLayer(), style={'width': '1000px', 'height': '500px'}, id="map", zoom=zoom0),
    html.Button("Zoom in", id="zoom_in"), html.Button("Zoom out", id="zoom_out")
])


@app.callback(Output("map", "zoom"), Input("zoom_in", "n_clicks"), State("map", "zoom"))
def zoom_in(_, zoom):
    return min(zoom_max, zoom + 1)


@app.callback(Output("map", "zoom"), Input("zoom_out", "n_clicks"), State("map", "zoom"))
def zoom_out(_, zoom):
    return max(zoom_min, zoom - 1)


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

对于像EditControl 这样的更复杂的控件，通过 Dash 按钮模仿行为并非易事。在这种情况下，您可以尝试使用 CSS 更改按钮的外观，或者修改 React 层中的组件以满足您的需求。

【讨论】：