Leaflet如何实现当前地图视图外多边形的预加载

问题原因 #

该现象是Leaflet默认的矢量图层裁剪优化机制导致的：默认矢量渲染器只会绘制比当前视口宽高各多10%的区域（对应padding默认值0.1），平移、缩放地图时，新进入视口的多边形区域此前未被渲染，就会出现短暂空白，等渲染完成后才正常显示。

解决方案 #

调整矢量渲染器的padding参数，增大预渲染的范围，即可实现多边形提前加载，避免空白。如果你的自定义底图范围固定，直接把值设到足够覆盖全图即可，Simple坐标系下小范围场景不会产生性能负担。

有两种实现方式可选：

方式1：全局生效（所有矢量图层通用）

在初始化地图前添加如下配置，修改所有矢量图层的默认渲染器参数：

// 预渲染范围为当前视口的1倍大小，可根据实际需求调整数值
L.Path.mergeOptions({
  renderer: L.canvas({
    padding: 1
  })
});

方式2：仅对目标多边形生效

单独给多边形指定自定义渲染器，不影响其他图层：

// 自定义渲染器
const customRenderer = L.canvas({padding: 1});
// 多边形指定渲染器
L.polygon(latlngs, {
  color: "#fff",
  weight: 5,
  renderer: customRenderer
}).addTo(map);

额外优化点 #

你提供的代码中重复定义了minZoom属性，后定义的minZoom: -2.8会覆盖先定义的minZoom: -3.2，可根据实际需求删除无用的重复配置。

完整修改后代码示例 #

<script>
  // 全局配置渲染器预渲染范围
  L.Path.mergeOptions({
    renderer: L.canvas({padding: 1})
  });

  const bounds = [[-1900, 0], [2200, 8200]];
  const map = L.map("map", {
      crs: L.CRS.Simple,
      maxBounds: bounds,
      maxBoundsViscosity: 1.0,
      maxZoom: -0.6,
      minZoom: -2.8, // 删除了重复的minZoom配置
      zoomDelta: 0.5,
      zoomSnap: 0.5,
  })

  L.imageOverlay("map.jpg", bounds).addTo(map);
  map.fitBounds(bounds);

  let latlngs = [
      [1714, 2549],
      [1776, 3336],
      [934, 3121],
      [836, 2382],
  ];

  L.polygon(latlngs, {color: "#fff", weight: 5}).addTo(map);
</script>

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