Leaflet中CRS.Simple+Y轴反转后TileLayer垂直偏移问题排查

我尝试在Leaflet中展示一款游戏地图，要求原点位于左下角，用像素坐标放置标记点（POI）。现有瓦片以左下角为原点组织，因此参考非地理地图教程，使用反转Y轴与CRS.Simple。

我做了以下操作：

• 修改CRS.Simple，设置infinite: false以启用Y轴反转，声明使用该自定义CRS的地图，设置地图范围为[0,0]至瓦片原图尺寸[12544, 44568]。
• 实现TileLayer，匹配文件结构设置URL，开启tms: true反转Y轴，并调用fitBounds（但似乎无效果）：

L.CRS.myCRS = L.extend({}, L.CRS.Simple, {
    infinite: false
});
// Declare map object
var map = L.map('map', {
    crs: L.CRS.myCRS,
    center: [0, 0],
    zoom: 3
});

var bounds = [[0,0], [12544, 44568]]

// Reference the tiles
L.tileLayer('0/{z}/{x}/{y}.png', {
    tms: true,
    minZoom: 3,
    maxZoom: 11,
}).addTo(map);

map.fitBounds(bounds);

添加标记点后：

var marker = L.marker(map.unproject([0, 0], map.getMaxZoom())).addTo(map);
marker.bindPopup('<b>Origin<b>').openPopup();

发现标记点虽在左侧，但地图瓦片垂直居中于该点（已像素测量验证）。需要让原点真正位于瓦片左下角，(0,0)点在此处且其他像素向右向上延伸，问题出在哪里？

问题核心在于CRS坐标转换逻辑与TileLayer Y轴反转的重复操作，调整以下几点即可解决：

1. 重写自定义CRS的坐标转换规则
   Leaflet默认CRS.Simple以左上角为原点，仅设置infinite: false不足以完全反转Y轴。需要重写transformation属性，让Y轴从下往上递增：

L.CRS.myCRS = L.extend({}, L.CRS.Simple, {
    infinite: false,
    // 转换公式：x = 1*像素X + 0；y = -1*像素Y + 0，实现Y轴反转
    transformation: new L.Transformation(1, 0, -1, 0)
});

2. 关闭TileLayer的tms并添加范围限制
   既然已经通过CRS处理了Y轴反转，开启tms: true会导致Y轴被两次反转，需关闭该选项。同时给TileLayer指定bounds，确保瓦片加载范围匹配原图尺寸：

L.tileLayer('0/{z}/{x}/{y}.png', {
    minZoom: 3,
    maxZoom: 11,
    bounds: bounds // 对应你定义的[[0,0], [12544, 44568]]
}).addTo(map);

3. 简化标记点的坐标设置
   自定义CRS已完成像素坐标与地图坐标的映射，无需再用map.unproject，直接使用[0, 0]即可定位到左下角原点：

var marker = L.marker([0, 0]).addTo(map);
marker.bindPopup('<b>Origin</b>').openPopup();

4. 确保地图边界限制生效
   初始化地图时添加maxBounds和maxBoundsViscosity，可以限制地图拖动范围，避免用户拖出瓦片区域：

var map = L.map('map', {
    crs: L.CRS.myCRS,
    maxBounds: bounds,
    maxBoundsViscosity: 1.0 // 让地图到达边界时无法继续拖动
});

最终完整代码 #

L.CRS.myCRS = L.extend({}, L.CRS.Simple, {
    infinite: false,
    transformation: new L.Transformation(1, 0, -1, 0)
});

var bounds = [[0, 0], [12544, 44568]];

var map = L.map('map', {
    crs: L.CRS.myCRS,
    maxBounds: bounds,
    maxBoundsViscosity: 1.0
});

L.tileLayer('0/{z}/{x}/{y}.png', {
    minZoom: 3,
    maxZoom: 11,
    bounds: bounds
}).addTo(map);

map.fitBounds(bounds);

var marker = L.marker([0, 0]).addTo(map);
marker.bindPopup('<b>Origin</b>').openPopup();

调整后，原点(0,0)会准确对应瓦片左下角，像素坐标向右向上延伸，标记点也会正确定位在该位置。

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