我来帮你梳理这个问题，核心原因大概率是gdal2tiles-leaflet生成切片的坐标系原点、Y轴方向，和你Leaflet CRS.Simple的默认设置不匹配，咱们一步步拆解解决：

问题根源 #

你之前用ImageOverlay时，Leaflet的CRS.Simple默认规则是：

• 左上角为坐标原点[0, 0]
• Y轴向下递增，坐标范围对应[[0, 0], [图片宽度×分辨率, 图片高度×分辨率]]（按你的参数就是[[0,0], [420.04, 293.88]]米）

但gdal2tiles-leaflet的默认行为遵循GIS行业标准：

• 左下角为坐标原点
• Y轴向上递增，且默认生成TMS格式的切片（和Leaflet默认的XYZ切片Y轴方向完全相反）

这两个核心差异直接导致了TileLayer和原ImageOverlay叠加时的错位。

具体解决方法 #

方法1：重新生成适配CRS.Simple的切片 #

用gdal2tiles-leaflet生成时，明确指定坐标系参数，让切片完全匹配Leaflet的CRS.Simple规则：

gdal2tiles-leaflet --profile=mercator --resampling=bilinear --s_srs EPSG:404000 --t_srs EPSG:404000 --zoom 0-15 your-image.png tiles-folder

• EPSG:404000是对应Leaflet CRS.Simple的伪EPSG编码，强制切片使用左上角原点、Y轴向下的笛卡尔坐标
• --zoom 0-15：根据你的图片宽度（21002px）计算，最大缩放级约为15（log2(21002)≈15），可根据需求调整范围
• 生成的切片会自动适配Leaflet的XYZ格式，无需额外配置

方法2：在Leaflet中调整参数适配现有切片 #

如果不想重新生成切片，直接在Leaflet里修改TileLayer的配置，兼容gdal2tiles的默认输出：

// 自定义CRS，匹配gdal2tiles的左下角原点+Y轴向上规则
const customCRS = L.CRS.Simple.extend({
  transformation: new L.Transformation(1, 0, -1, 293.88)
  // 293.88是图片高度×分辨率（14694×0.02），用来反转Y轴方向
});

// 加载TileLayer时启用TMS格式+自定义CRS
L.tileLayer('tiles-folder/{z}/{x}/{y}.png', {
  crs: customCRS,
  minZoom: 0,
  maxZoom: 15,
  tms: true, // 关键：gdal2tiles默认生成TMS格式切片，必须开启这个参数
  bounds: [[0, 0], [420.04, 293.88]] // 和原ImageOverlay保持一致的边界范围
}).addTo(map);

验证方法 #

设置完成后，执行map.fitBounds([[0, 0], [420.04, 293.88]])让地图定位到原图片范围，再叠加原ImageOverlay，检查两者是否完全重合。如果还有轻微偏移，可微调自定义CRS的transformation参数，或者检查gdal2tiles生成的tilemapresource.xml文件，确认其中的分辨率是否和你设置的0.02米/像素一致。

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