Leaflet自定义瓦片地图采用CRS.simple时高缩放级别Marker位置偏移问题

问题根因 #

CRS.simple默认采用分辨率 = 2^(-zoom)的规则计算平面坐标与像素坐标的映射，当你自定义切割的瓦片分辨率规则和默认规则不匹配时，缩放层级越高，坐标换算的累积误差越大，就会出现低缩放正常、高缩放Marker偏移的问题，你当前最大缩放仅为6，缩放≥5时误差已经大到肉眼可见。

修复步骤 #

• 对齐瓦片切割参数与地图配置
  确认你切割瓦片时的三个核心参数：原始图片像素尺寸、瓦片单块尺寸（多为256px）、瓦片y轴方向（TMS规则y轴朝下，Leaflet默认y轴朝上）。
• 自定义CRS的分辨率列表
  按你实际的瓦片切割规则，显式指定从zoom 0到zoom 6每一级的分辨率，替换默认的自动计算逻辑：

  // 示例参数：原始图宽4096px，高3072px，瓦片尺寸256px，最大缩放6
  const TILE_SIZE = 256;
  const MAX_ZOOM = 6;
  const IMG_WIDTH = 4096;
  const IMG_HEIGHT = 3072;
  
  // 生成对应缩放级的分辨率数组
  const resolutions = Array.from({length: MAX_ZOOM + 1}, (_, zoom) => {
    return IMG_WIDTH / (TILE_SIZE * Math.pow(2, zoom));
  });
  
  // 扩展自定义CRS
  const customSimpleCRS = L.extend({}, L.CRS.Simple, {
    resolutions: resolutions
  });
  
  // 初始化地图时指定自定义CRS
  const map = L.map('map-container', {
    crs: customSimpleCRS,
    maxZoom: MAX_ZOOM,
    minZoom: 0
  });
  

• 修正瓦片图层配置
  给TileLayer添加对应匹配参数，避免瓦片对齐偏移：

  L.tileLayer('your-tile-path/{z}/{x}/{y}.png', {
    tileSize: TILE_SIZE,
    bounds: [[0, 0], [IMG_HEIGHT, IMG_WIDTH]], // 对应图片坐标范围
    tms: true, // 如果你的瓦片是按TMS规则切割（y轴朝下）就打开，否则删除
    noWrap: true
  }).addTo(map);
  

• 重新添加Marker验证
  按原始坐标重新添加Marker，缩放至6级验证位置即可。

内容的提问来源于stack exchange，提问作者K. Braungardt