Leaflet.js使用L.CRS.Simple时出现负坐标瓦片请求的原因排查

我刚帮你梳理了这个问题的核心，本质是L.CRS.Simple默认的坐标转换逻辑和你存储瓦片的y轴方向不匹配，导致Leaflet算出了负数的瓦片y坐标，咱们一步步拆解清楚：

1. 先搞懂L.CRS.Simple的默认坐标逻辑 #

Leaflet的L.CRS.Simple是为平面地图设计的，但它自带了一个反直觉的y轴转换：

• 它把地理坐标[lat, lng]（也就是代码里的L.LatLng对象）转换成像素坐标时，会对lat做取反操作：像素y = -地理lat
• 这就意味着，你设置的地理坐标[0,0]对应像素y=0，而[2048,2048]对应像素y=-2048——这和你瓦片存储的y轴方向完全颠倒了！

你存的瓦片是从上到下y从0到1（比如3/0/0.png是左上角，3/0/1.png是左下角），但Leaflet默认逻辑会认为：地理y值越大（越靠"北"），像素y值越小（越往上），所以它会去请求负数y的瓦片来匹配这个颠倒的坐标系。

2. 你的代码里的关键矛盾点 #

• 你设置的bounds是L.LatLngBounds([0, 0], [2048, 2048])，在默认Simple CRS里，这个范围对应的像素y是从0（地理lat=0）到-2048（地理lat=2048）
• 地图中心设为[1024,1024]，对应的像素y是-1024，Leaflet基于这个位置计算需要加载的瓦片，自然会得出负数的y值

3. 两种快速解决方法 #

方法一：修改瓦片URL，反转y坐标

不用改动CRS，直接在L.tileLayer里自定义URL生成逻辑，把Leaflet算出的y坐标反转，匹配你实际存储的瓦片：

const tileLayer = L.tileLayer('img/test/tiles/{z}/{x}/{y}.png', {
  tileSize: config.tileSize,
  minZoom: config.minZoom,
  maxZoom: config.maxZoom,
  noWrap: true,
  continuousWorld: false,
  bounds: bounds,
  // 自定义URL生成逻辑，反转y坐标
  tileUrlFunction: function(coords) {
    // 总瓦片数是config.tilesAtZoom[coords.z]，所以反转后的y = 总瓦片数-1 - 原y
    const reversedY = config.tilesAtZoom[coords.z] - 1 - coords.y;
    return L.Util.template('img/test/tiles/{z}/{x}/{y}.png', {
      z: coords.z,
      x: coords.x,
      y: reversedY
    });
  }
})

方法二：自定义CRS，修正y轴方向

创建一个自定义的Simple CRS，去掉默认的y轴取反，让地理坐标和你瓦片的y轴方向完全一致：

// 自定义CRS，取消默认的y轴取反
const CRS_Custom = L.extend({}, L.CRS.Simple, {
  transformation: new L.Transformation(1, 0, 1, 0) // 把原有的-1改成1，保持y轴方向一致
});

// 创建地图时使用这个自定义CRS
const map = L.map('map', {
  crs: CRS_Custom,
  minZoom: config.minZoom,
  maxZoom: config.maxZoom,
  zoom: 3,
  center: [1024, 1024],
  maxBounds: bounds,
  maxBoundsViscosity: 1.0,
})

这样地理坐标的y值和像素y值方向完全匹配，Leaflet算出的瓦片y坐标就会是0和1，正好对应你存储的文件。

4. 额外注意点 #

• 你的bounds设置是正确的，但要确保map的maxBounds和tileLayer的bounds完全一致，防止地图被拖出有效范围
• 开启noWrap: true和continuousWorld: false的设置是对的，避免Leaflet重复请求超出范围的瓦片

内容来源于stack exchange