Leaflet地图放入Allotment组件仅显示左侧窄条的问题排查

问题成因 #

Leaflet地图初始化时，会基于容器当前的尺寸计算瓦片加载范围和视图显示区域。而Allotment作为动态分割面板，其面板容器在Leaflet初始化阶段可能还未完成最终布局（比如初始宽度仅为窄条状态），导致Leaflet只按照当时的窄尺寸渲染了地图内容。后续Allotment面板宽度变化时，Leaflet默认不会自动监听容器的尺寸变更，因此地图不会自动适配新的容器宽度，就出现了仅显示中心窄条的情况。

解决方法 #

1. 监听Allotment尺寸变化，手动触发Leaflet重绘 #

利用Allotment提供的onResize回调，在面板尺寸变化时调用Leaflet地图实例的invalidateSize()方法，强制Leaflet重新计算容器尺寸并更新视图：

import { useRef } from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
import { Allotment } from 'allotment';
import 'allotment/dist/style.css';
import 'leaflet/dist/leaflet.css';

function App() {
  // 保存Leaflet地图实例的引用
  const mapRef = useRef(null);

  // 处理面板尺寸变化
  const handlePanelResize = () => {
    if (mapRef.current) {
      // 通知Leaflet重新计算容器尺寸
      mapRef.current.invalidateSize();
    }
  };

  return (
    <Allotment style={{ height: '100vh' }} onResize={handlePanelResize}>
      <Allotment.Pane>
        <MapContainer
          ref={mapRef}
          style={{ height: '100%', width: '100%' }}
          center={[51.505, -0.09]}
          zoom={13}
        >
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        </MapContainer>
      </Allotment.Pane>
      <Allotment.Pane>
        <div>右侧面板内容</div>
      </Allotment.Pane>
    </Allotment>
  );
}

export default App;

2. 确保容器样式设置正确 #

必须给MapContainer设置height: 100%和width: 100%，同时外层的Allotment容器也要设置明确的高度（比如100vh），避免因容器高度为0导致地图渲染异常。如果Allotment的父容器也有嵌套，需要确保所有父容器都有明确的尺寸约束。

3. 延迟初始化地图（可选） #

如果Allotment的布局渲染存在延迟，可通过延迟初始化地图的方式，等待容器尺寸稳定后再渲染地图：

import { useRef, useState, useEffect } from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
import { Allotment } from 'allotment';

function App() {
  const mapRef = useRef(null);
  const [isMapReady, setIsMapReady] = useState(false);

  // 延迟100ms初始化地图，等待Allotment布局稳定
  useEffect(() => {
    const timer = setTimeout(() => setIsMapReady(true), 100);
    return () => clearTimeout(timer);
  }, []);

  return (
    <Allotment style={{ height: '100vh' }}>
      <Allotment.Pane>
        {isMapReady && (
          <MapContainer
            ref={mapRef}
            style={{ height: '100%', width: '100%' }}
            center={[51.505, -0.09]}
            zoom={13}
          >
            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
          </MapContainer>
        )}
      </Allotment.Pane>
      <Allotment.Pane>
        <div>右侧面板内容</div>
      </Allotment.Pane>
    </Allotment>
  );
}

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