Vue3组件中Leaflet仅加载地图第一行瓦片的问题求助

核心原因：瓦片坐标系不匹配 #

Leaflet 默认使用 TMS 坐标系（Y轴从地图底部开始计数），而大多数自托管瓦片服务（比如你用的本地服务）采用 XYZ 坐标系（Y轴从地图顶部开始计数）。坐标规则不匹配会导致Leaflet请求的Y值和实际存储的瓦片Y值相反，最终只能加载到第一行瓦片。

解决方案 #

1. 反转Y轴坐标 #

通过tileUrlFunction自定义瓦片URL生成逻辑，把Leaflet的Y坐标转换为XYZ坐标系的对应值：

onMounted(() => {
  const map = L.map("map", { attributionControl: false }).setView([0, 0], 0);
  L.tileLayer("http://127.0.0.1:7800/{z}/{x}/{y}.jpeg", {
    maxZoom: 0,
    noWrap: true,
    tileUrlFunction: (coords) => {
      // 计算反转后的Y值
      const reversedY = Math.pow(2, coords.z) - 1 - coords.y;
      return `http://127.0.0.1:7800/${coords.z}/${coords.x}/${reversedY}.jpeg`;
    },
  }).addTo(map);

  // 可选：延迟调用invalidateSize确保容器尺寸计算准确
  setTimeout(() => map.invalidateSize(), 100);
});

2. 匹配瓦片服务的层级配置 #

如果你的本地瓦片服务包含多个缩放层级，要把maxZoom设置为实际瓦片的最高层级。比如瓦片支持到zoom 3层级，就把maxZoom改为3，否则Leaflet不会请求对应层级的瓦片。

3. 完善容器样式（可选） #

给地图容器添加position: relative，确保Leaflet能正确识别容器边界：

#map {
  width: 100%;
  height: 512px;
  position: relative;
}

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