Leaflet交互式地图部署线上后X轴重复显示问题求助

结合你描述的本地与线上环境的差异、测试截图以及代码细节，我判断核心问题出在配置项的拼写错误上，导致地图的“禁止重复包裹”逻辑没有生效，下面是具体的分析和修复方案：

问题根源：配置项拼写错误 #

你代码里写了continousWorld: false，但Leaflet的正确配置项是**continuousWorld**（多了一个字母u）。拼写错误会让这个配置完全失效，即便你设置了noWrap: true，Leaflet仍会默认允许地图在X轴方向重复绘制，这就是你看到左侧出现重复地图的直接原因。

修复步骤 #

1. 纠正配置项拼写 #

把continousWorld: false修改为continuousWorld: false，确保禁用地图重复的配置正常生效。

2. 增强边界限制（可选） #

为了彻底避免用户拖动到地图边界外，可在地图初始化时添加maxBoundsViscosity: 1.0，让地图完全无法拖出设定的边界范围。

修改后的完整代码如下：

var mapSW = [0, 4096], mapNE = [4096, 0];
var map = L.map('map', {
  maxBoundsViscosity: 1.0 // 新增：强化边界限制，防止拖出地图范围
}).setView([0,0],1);

L.tileLayer('maps/emptyGrid/{z}/{x}/{y}.png', {
  minZoom: 1,
  maxZoom: 4,
  continuousWorld: false, // 纠正拼写错误
  noWrap:true,
  crs: L.CRS.Simple,
}).addTo(map);

map.setMaxBounds(new L.LatLngBounds(
  map.unproject(mapSW, map.getMaxZoom()),
  map.unproject(mapNE, map.getMaxZoom())
));

额外验证点 #

• 确认虚拟主机上的瓦片文件路径maps/emptyGrid/{z}/{x}/{y}.png正确，注意Linux主机区分路径大小写；
• 检查各缩放级别（1-4级）的瓦片数量是否符合预期，确保x轴的瓦片范围与本地环境一致。

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