容器调整大小时Dash Leaflet地图无法自适应的解决方法

问题描述 #

使用dash-leaflet和dash-resizable-panels构建布局时，地图初始显示正常，但拖动面板调整容器宽度后，地图右侧会出现灰色未渲染区域，无法自适应容器的新尺寸。

最小复现示例（MRE） #

先安装依赖：

pip install dash dash-leaflet dash-resizable-panels

示例代码：

import dash
import dash_leaflet as dl
from dash import html
from dash_resizable_panels import PanelGroup, Panel, PanelResizeHandle

handle = {"height": "100%", "width": "3px", "backgroundColor": "#51ada6"}
layout = html.Div([
    PanelGroup(id="panel-group", 
               children=[
                    Panel(id="panel-1",children=[html.Div([html.P("Dummy component")])]),
                    PanelResizeHandle(html.Div(style=handle)),
                    Panel(id="panel-2",
                          children=[
                            dl.Map(
                                center=[45.81, 15.98], 
                                zoom=12, 
                                id="map",  # 给地图添加id用于后续监听
                                children=[
                                    dl.TileLayer(),
                                    dl.FeatureGroup([dl.EditControl()]),
                                ], 
                                style={'height': '100%', 'width': '100%'}
                            )]
                    )], 
               direction="horizontal",),
], style={"height": "100vh"})

app = dash.Dash(__name__)
app.layout = layout
if __name__ == "__main__":
    app.run_server()

解决方案 #

通过客户端回调监听地图容器的尺寸变化，触发Leaflet能识别的resize事件，让地图自动重绘以适配新容器尺寸：

app.clientside_callback(
    """
    function set_event(map_id) {
        // 尺寸变化时触发window的resize事件
        var callback = function() {
            window.dispatchEvent(new Event('resize'));
        }
        // 用ResizeObserver监听地图容器的尺寸变化
        new ResizeObserver(callback).observe(document.getElementById(map_id))
        return dash_clientside.no_update;
    }
    """,
    Output("map", "id"),  # 无实际更新需求，用组件id占位
    Input("map", "id")    # 地图加载完成后触发监听
)

原理说明 #

Leaflet默认监听window.resize事件来自动调整地图尺寸，但dash-resizable-panels的面板调整不会触发这个全局事件。我们用ResizeObserver直接监听地图容器的尺寸变化，一旦容器大小改变，就手动触发window.resize事件，让Leaflet重新渲染地图，填满整个容器。

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