如何将Dash组件作为dash-leaflet自定义控件添加到地图？

之前使用ipyleaflet组件库，现在转用dash-leaflet接口，希望将Dash组件（本文中为dcc.Dropdown下拉选择器）作为控件添加到地图上，使其在地图缩放时与Leaflet布局保持一致适配，实现类似ipyleaflet中WidgetControl的功能，将组件放置在topleft位置，且无需编写专用CSS样式。

现有地图代码：

import dash_leaflet as dl
from dash import Dash

colorscale = ['red', 'yellow', 'green', 'blue', 'purple']  # rainbow
app = Dash()
app.layout = dl.Map(
    [dl.TileLayer()], 
    center=[56, 10], 
    zoom=6,  
    style={'height': '100vh'},
)

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

待添加的下拉选择器代码：

from dash import dcc

dropdown = dcc.Dropdown(
    component_label="toto-label",
    id="toto-id",
    options=[
        {"label": "NDVI (8)", "value": "ndvi8"},
        {"label": "NDVI (16)", "value": "ndvi16"},
    ],
    value="ndvi16",
)

dash-leaflet提供了dl.Control组件，可直接包裹Dash组件并转换为Leaflet原生地图控件，自动适配地图布局，无需额外编写CSS。只需将下拉选择器作为dl.Control的子元素，通过position属性指定放置位置即可。

完整实现代码：

import dash_leaflet as dl
from dash import Dash, dcc

colorscale = ['red', 'yellow', 'green', 'blue', 'purple']  # rainbow
app = Dash()

# 定义下拉选择器
dropdown = dcc.Dropdown(
    component_label="toto-label",
    id="toto-id",
    options=[
        {"label": "NDVI (8)", "value": "ndvi8"},
        {"label": "NDVI (16)", "value": "ndvi16"},
    ],
    value="ndvi16",
    # 可选：微调下拉框样式，适配控件区域显示
    style={"width": "180px", "margin": "10px"}
)

app.layout = dl.Map(
    [
        dl.TileLayer(),
        # 用dl.Control包裹下拉组件，设置位置为topleft
        dl.Control(children=dropdown, position="topleft")
    ], 
    center=[56, 10], 
    zoom=6,  
    style={'height': '100vh'},
)

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

关键说明 #

• dl.Control会自动将内部Dash组件嵌入Leaflet的控件容器，继承Leaflet控件的布局特性，地图缩放时位置保持稳定。
• position参数支持Leaflet所有标准控件位置：topleft、topright、bottomleft、bottomright。
• 给dcc.Dropdown设置style属性是可选操作，仅用于优化控件区域内的显示效果，不影响核心功能。

内容的提问来源于stack exchange，提问作者Pierrick Rambaud