移除Leaflet底图中的菱形空白区域

成因 #

这种菱形空白是因为地图被拖放到了Web墨卡托投影（EPSG:3857）的有效范围之外——绝大多数公开瓦片服务（比如OpenStreetMap）仅覆盖纬度±85.0511度、经度±180度的区域，超出这个范围后没有可用瓦片，就会显示空白。你之前调用setMaxBounds无效，大概率是因为设置的边界不符合这个有效范围。

解决办法 #

1. 正确设置地图边界 #

直接使用Web墨卡托的标准有效边界限制地图拖动范围，代码示例：

// 定义Web墨卡托的最大有效边界
const webMercatorBounds = [
  [-85.0511287798066, -180], // 西南极点
  [85.0511287798066, 180]    // 东北极点
];
// 应用边界并开启粘性限制，防止拖出范围
map.setMaxBounds(webMercatorBounds);
map.options.maxBoundsViscosity = 1.0;

2. 检查瓦片服务覆盖范围 #

如果是自定义瓦片服务，确认你的瓦片是否覆盖了超出标准范围的区域；如果是第三方瓦片，本身就不支持南北极区域，只能通过边界限制解决。

3. 启用世界复制跳转（针对经度跨域场景） #

如果空白是因为跨180度经度导致的，可开启worldCopyJump选项让地图自动跳转：

const map = L.map('map', {
  worldCopyJump: true
});

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