python - 将仪表板传单控件映射到 map 外的其他按钮

Question

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

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

Answer 1

要使用 Dash 按钮，您需要创建回调来执行所需的 map 属性修改。这是一个小示例，其中 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 层中的组件来满足您的需求。