React Leaflet开发时出现多个重复地图渲染问题如何解决

问题原因 #

你遇到的重复地图是TileLayer配置错误导致的：你使用的是单张超大地图切片（不是标准的XYZ瓦片服务），没有做边界限制、缩放范围限制，Leaflet默认会把单张瓦片重复平铺填充整个视口，就出现了多份重复地图的效果。同时你设置的zoom值为100，远远超出了单张图片支持的最大缩放级别，也会加剧这个异常。

修复步骤 #

1. 首先确认你已经正确引入Leaflet官方样式，很多异常渲染问题都是漏引官方样式导致的，在App.js顶部添加引入：

import 'leaflet/dist/leaflet.css'

2. 调整MapContainer的配置，限制缩放范围和拖动边界：

<MapContainer
  center={position}
  zoom={3}
  maxZoom={8} // 4096*4096的单张图片最大缩放设到8足够清晰
  minZoom={1}
  scrollWheelZoom={false}
  maxBounds={[
    [51.9, -0.8],
    [51.1, 0.2]
  ]} // 可根据你实际要展示的地图范围调整坐标，限制地图只能在这个范围内拖动
  maxBoundsViscosity={1.0} // 拖动到边界时不会出现回弹空白
>

3. 给TileLayer添加禁止平铺的核心配置：

<TileLayer
  attribution='Some random text'
  url="http://blog.damonpollard.com/wp-content/uploads/2013/09/GTAV_ATLUS_4096x4096.png"
  tileSize={4096} // 匹配你使用的单张瓦片尺寸
  noWrap={true} // 核心配置，禁止瓦片重复拼接
  bounds={[
    [51.9, -0.8],
    [51.1, 0.2]
  ]} // 和MapContainer的maxBounds保持一致即可
/>

修改完成后页面就只会显示一份地图，不会出现重复拼接的情况，你可以根据自己的实际展示需求调整边界坐标的数值。

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