React-Leaflet中TileLayer仅渲染1次但自定义图层重复渲染6次问题

问题表现 #

• 使用react-leaflet开发时，仅渲染1次TileLayer组件加载自定义单张底图/allmap.jpg，实际页面中图层重复渲染了6次
• 问题复现代码：

<MapContainer 
  className='absolute h-[750px] w-[750px] left-[45%] top-[80px] bg-no-repeat bg-cover bg-[#688daa]'
  center={[51.505, -0.09]} 
  zoom={5} 
  scrollWheelZoom={true} 
  noWrap={true}
>
  <TileLayer
    noWrap={true}
    url="/allmap.jpg"
  />
</MapContainer>

• 实际渲染效果：
  

问题原因 #

重复渲染和React组件重绘没有关系，是Leaflet瓦片图层的默认加载逻辑导致的：
默认配置下TileLayer会按照256px256px的标准切片尺寸，结合当前缩放等级计算视口内需要加载的瓦片网格数量。你当前设置zoom=5、容器尺寸750px750px时，视口刚好覆盖6个默认瓦片网格。直接把单张全图地址填入url参数后，Leaflet会在每个瓦片网格位置都加载一次这张图。
注意你加的*noWrap={true}只能阻止图层横向跨180度经线时重复复制世界*，不会限制当前视口范围内的瓦片加载，所以没法解决这个重复问题。

修复方案 #

方案1：调整TileLayer参数适配单张图（需保留TileLayer场景用） #

手动配置瓦片尺寸、缩放范围、地理边界参数，让所有缩放层级下视口内始终只存在1个瓦片位，示例配置如下：

<TileLayer
  noWrap={true}
  url="/allmap.jpg"
  // 替换为你实际使用的自定义图片的像素尺寸
  tileSize={1024}
  // 按你的业务需求配置允许的缩放范围
  minZoom={3}
  maxZoom={7}
  // 替换为你的图片实际覆盖的经纬度边界，和地图center参数匹配
  bounds={[[40, -20], [63, 20]]}
/>

方案2：换用ImageOverlay加载单张底图（单图场景更推荐） #

react-leaflet提供的ImageOverlay组件专门用于加载单张地理参考图片，不会走瓦片切片加载逻辑，从根源避免重复加载问题，使用前记得先从react-leaflet导入该组件：

<MapContainer 
  className='absolute h-[750px] w-[750px] left-[45%] top-[80px] bg-no-repeat bg-cover bg-[#688daa]'
  center={[51.505, -0.09]} 
  zoom={5} 
  scrollWheelZoom={true}
>
  <ImageOverlay
    url="/allmap.jpg"
    // 替换为你的图片实际对应的经纬度覆盖范围
    bounds={[[40, -20], [63, 20]]}
  />
</MapContainer>

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