Leaflet非地理地图使用TileLayer时出现垂直偏移如何解决

问题原因 #

你遇到的垂直偏移问题由两个坐标映射规则不匹配导致：

• Leaflet的L.Transformation中，Y轴转换参数符号错误。四个参数对应规则为屏幕X = a*坐标X + b、屏幕Y = c*坐标Y + d，你设置的c参数为正1/128，而游戏地图瓦片、TMS规范的Y轴方向和Leaflet默认屏幕Y轴方向（向下为正）相反，没有做翻转处理。
• 你开启了tms: true，TMS瓦片的Y轴从地图底部开始计数，而你设置的坐标原点[0,0]对应地图左上角，二者Y轴方向相反，会产生等于地图高度的整体垂直偏移。

修复代码 #

仅需要修改自定义CRS的转换规则，翻转Y轴并补充偏移量即可：

// 替换原有自定义CRS代码
L.CRS.MySimple = L.extend({}, L.CRS.Simple, {
    transformation: new L.Transformation(1 / 128, 0, -1 / 128, img[1] / 128)
});

修改后两个测试标记就会分别对齐瓦片的左上角和右下角，坐标和地图的匹配关系恢复正常。

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