如何使用dl.Overlay加载多输入元素实现单一叠加图层效果

解决方案 #

dash-leaflet 中dl.Overlay仅支持接收单个图层对象作为子元素，直接传入多个矢量图形时，每个图形会被识别为独立叠加图层，导致拆分显示。你只需要用dl.LayerGroup将所有标记点、圆形统一包裹后，再传给dl.Overlay即可将所有元素归为同一个叠加图层。

修正后完整代码 #

import dash
import dash_leaflet as dl

app = dash.Dash()

app.layout = dl.Map(
    [
        dl.LayersControl([
            dl.Overlay(
                # 用LayerGroup包裹所有矢量元素
                dl.LayerGroup([
                    dl.CircleMarker(center=(48.0073849, 0.1967849), radius=3, color='red'),
                    dl.Circle(center=(48.0073849, 0.1967849), radius=20000),
                    dl.CircleMarker(center=(46.0073849, 0.1867849), radius=3, color='red'),
                    dl.Circle(center=(46.0073849, 0.1867849), radius=20000),
                ]),
                name='Exemples', 
                checked=True
            )
        ]),
        dl.TileLayer(),
    ],
    style={'width': '1000px', 'height': '500px'},
    center=[46.232192999999995, 2.209666999999996],
    zoom=5
)

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

改动说明 #

• 新增dl.LayerGroup容器包裹所有需要归为同一图层的Circle、CircleMarker元素
• 补充了缺失的import dash导入语句
• 修正了入口判断的语法错误（原代码缺少双下划线，改为if __name__ == '__main__'）

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