超大非地理Leaflet地图渲染异常问题求助

我使用React、TailwindCSS和react-leaflet开发一款非地理方形地图，地图单边长1000万像素，叠加层为白色方形图片。已参照react-leaflet及Leaflet官方Simple CRS文档设置对应边界以匹配缩放比例，但遇到以下问题：

• 地图初始状态不显示，缩放缩小后才会出现
• 缩放至特定层级时地图消失，但标记仍保留

常规地理地图可正常运行，说明Leaflet基础配置无误。调试发现当地图宽高超过1000万像素时出现异常，尝试将边界设为单边长2000万像素仍无法解决，查阅Leaflet相关文档未找到有效方案，恳请提供解决建议。

<MapContainer
                // whenReady={setMapRef}
                center={[this.state.lat, this.state.lng]}
                zoom={this.state.zoom}
                className="h-dvh z-10"
                bounds={bounds}
                // maxBounds={bounds}
                // maxZoom={10}
                zoomControl={false}
                minZoom={-1000}
                maxZoom={7}
                crs={CRS.Simple}
                // zoomSnap={0}
            // maxNativeZoom={7}



            >
                <ImageOverlay
                    url="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Blank_square.svg/2048px-Blank_square.svg.png"
                    bounds={bounds}
                    className="border box-border border-black"

                />
                <ZoomControl position="bottomleft" />
                <Marker position={[this.state.lat, this.state.lng]}>
                    <Popup>
                        This is the center
                    </Popup>
                </Marker>
                <Marker position={[51.5, +0.1]}>
                    <Popup>
                        This is the content
                    </Popup>
                </Marker>
            </MapContainer>

• 修正边界与坐标对应关系：Simple CRS下，地图坐标范围需和图片实际像素尺寸严格匹配。如果你的地图是1000万x1000万像素，bounds应设为[[0, 0], [10000000, 10000000]]，初始中心坐标设为[5000000, 5000000]，确保初始视图能完整覆盖地图。
• 调整缩放参数至合理范围：不要设置minZoom={-1000}这类极端值，Leaflet的缩放基于2的幂次计算，极端值会导致视图计算溢出。根据容器尺寸和地图尺寸计算合适的初始缩放层级：假设容器宽度为1000px，地图宽度1000万px，初始zoom应为Math.log2(10000000 / 1000) = 13，同时将minZoom设为比初始值小2-3的数值，maxZoom控制在15以内，避免过度放大触发浏览器渲染限制。
• 启用边界限制：开启maxBounds={bounds}并设置maxBoundsViscosity={1.0}，防止视图超出地图范围导致图片消失。
• 确保ImageOverlay与地图边界一致：ImageOverlay的bounds必须和MapContainer的bounds完全相同，任何偏差都会导致显示错位或消失。
• 规避浏览器渲染上限：多数浏览器对DOM/Canvas元素的最大尺寸有上限（如16384px），通过maxZoom控制最大放大比例，避免地图渲染尺寸超过该限制。

const bounds = [[0, 0], [10000000, 10000000]];
const initialCenter = [5000000, 5000000];
// 根据容器宽度计算初始zoom，示例容器宽度1000px
const initialZoom = Math.log2(10000000 / 1000);

<MapContainer
  center={initialCenter}
  zoom={initialZoom}
  className="h-dvh z-10"
  bounds={bounds}
  maxBounds={bounds}
  maxBoundsViscosity={1.0}
  zoomControl={false}
  minZoom={initialZoom - 3}
  maxZoom={15}
  crs={CRS.Simple}
>
  <ImageOverlay
    url="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Blank_square.svg/2048px-Blank_square.svg.png"
    bounds={bounds}
    className="border box-border border-black"
  />
  <ZoomControl position="bottomleft" />
  <Marker position={initialCenter}>
    <Popup>
      This is the center
    </Popup>
  </Marker>
  <Marker position={[51.5, +0.1]}>
    <Popup>
      This is the content
    </Popup>
  </Marker>
</MapContainer>

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