React集成Leaflet地图瓦片加载不全问题求助

刷新页面时，Leaflet地图偶尔出现瓦片加载不完整的情况——仅发起初始瓦片请求（如https://a.tile.openstreetmap.org/1/0/0.png），后续瓦片的网络请求完全不触发。尝试添加以下代码修复瓦片加载后，地图却不再遵循设置的bounds参数，直接显示全球视图：

setTimeout(() => {
  mapRef?.invalidateSize(true)
}, 10)

原代码实现 #

export const Map = ({ mapBounds, markers, polylineMarkers, iconRenderer, onMapBoundsChange, location, params, shouldCallApi, setSearchedBounds, setSearchParams }) => {
  const [mapRef, setMap] = useState(null)
  const [bounds, setBounds] = useState(mapBounds)

  console.log(bounds)

  useEffect(() => {
    if (mapRef) {
      mapRef.on('moveend', handleMoveEnd)
      mapRef.on('zoomend', handleZoomEnd)
      mapRef.fitBounds(formatBounds(bounds))

      return () => {
        mapRef.off('moveend', handleMoveEnd)
        mapRef.off('zoomend', handleZoomEnd)
        console.log('Event listeners cleaned up')
      }
    }
  }, [mapRef])


  function handleMapLoad(s) {
    setMap(s.target)
  }

  function handleMoveEnd() {

  }

  const handleZoomEnd = () => {

  }

  return (
    <div style={{ width: '100%', position: 'relative', zIndex: '9', height: `${window.innerHeight - 160}px` }}>
    <MapContainer
      bounds={formatBounds([-123.5515950324797, 22.1747014618931, -11.173665344979696, 42.45509353676294])}
      maxBounds={[[85, -180], [-85, 180]]}
      whenReady={handleMapLoad}
      style={{ width: '100%', position: 'relative', zIndex: '9', height: `${window.innerHeight - 160}px` }}
      worldCopyJump={false}
      noWrap={true}>
      <TileLayer url={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
        attribution={'&copy <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'} />
    </MapContainer>
    </div>
  )
}

问题原因 #

• 瓦片加载不完整：地图容器尺寸在Leaflet初始化时未正确计算，导致Leaflet无法确定需要加载的瓦片范围。
• bounds失效：invalidateSize(true)会强制重置地图视图，覆盖了之前通过fitBounds设置的范围。

修复方案 #

修改后的代码 #

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

export const Map = ({ mapBounds, markers, polylineMarkers, iconRenderer, onMapBoundsChange, location, params, shouldCallApi, setSearchedBounds, setSearchParams }) => {
  const [mapRef, setMap] = useState(null)
  const [bounds, setBounds] = useState(mapBounds)
  // 用useRef存储容器高度，避免重复计算
  const containerHeight = useRef(window.innerHeight - 160)

  // 监听窗口resize，动态更新地图尺寸
  useEffect(() => {
    const handleResize = () => {
      containerHeight.current = window.innerHeight - 160
      mapRef?.invalidateSize()
    }
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [mapRef])

  useEffect(() => {
    if (mapRef) {
      mapRef.on('moveend', handleMoveEnd)
      mapRef.on('zoomend', handleZoomEnd)
      
      // 先修正容器尺寸，再适配指定范围
      const adjustMap = () => {
        mapRef.invalidateSize()
        mapRef.fitBounds(formatBounds(bounds || [-123.5515950324797, 22.1747014618931, -11.173665344979696, 42.45509353676294]))
      }

      // 延迟执行确保容器尺寸稳定
      const timeoutId = setTimeout(adjustMap, 0)
      
      return () => {
        clearTimeout(timeoutId)
        mapRef.off('moveend', handleMoveEnd)
        mapRef.off('zoomend', handleZoomEnd)
        console.log('Event listeners cleaned up')
      }
    }
  }, [mapRef, bounds]) // 加入bounds作为依赖，确保范围变化时重新适配


  function handleMapLoad(s) {
    setMap(s.target)
  }

  function handleMoveEnd() {

  }

  const handleZoomEnd = () => {

  }

  return (
    <div style={{ width: '100%', position: 'relative', zIndex: '9', height: `${containerHeight.current}px` }}>
    <MapContainer
      maxBounds={[[85, -180], [-85, 180]]}
      whenReady={handleMapLoad}
      style={{ width: '100%', position: 'relative', zIndex: '9', height: '100%' }} // 继承父容器高度，减少计算误差
      worldCopyJump={false}
      noWrap={true}>
      <TileLayer url={'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'}
        attribution={'&copy <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'} />
    </MapContainer>
    </div>
  )
}

关键修改说明 #

1. 用useRef存储容器高度，避免每次渲染重复计算window.innerHeight
2. 监听窗口resize事件，动态调整地图尺寸，适配窗口变化
3. 在useEffect中加入bounds依赖，确保范围参数变化时重新适配视图
4. 初始化时先调用invalidateSize修正容器尺寸，再调用fitBounds恢复指定范围，避免视图被重置
5. 将MapContainer的高度设为100%，直接继承父容器高度，减少尺寸计算误差

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