Leaflet.js地图如何固定自定义瓦片位置 不随窗口尺寸变动

你当前代码瓦片位置漂移的核心原因有3个：

• 使用全局自增变量i匹配瓦片地址：Leaflet加载、重绘瓦片的顺序完全不固定，窗口尺寸变化、地图重绘时i的计数逻辑会彻底混乱，无法和固定位置绑定
• 自定义图层类名不一致：定义的类是L.TileLayer.CustomUrlLayer，实例化时却调用L.TileLayer.MyLayer，存在引用错误
• 没有使用Leaflet内置的固定瓦片坐标：Leaflet渲染瓦片时本身就有固定的行列坐标体系，getTileUrl方法传入的coords参数自带的x/y值就是瓦片在网格里的固定行列位置，不需要自己维护计数器。

你要求的排布规则和Leaflet默认瓦片网格规则完全匹配：

• 第一行（y=0）从左到右x坐标依次为0、1、2、3，对应Tile0到Tile3
• 第二行（y=1）从左到右x坐标依次为0、1、2、3，对应Tile4到Tile7
  只要直接用coords.x、coords.y匹配URL，同时锁死地图缩放层级、限制可视范围、禁用偏移交互，就能让瓦片位置完全不受窗口尺寸变化影响。

// 配置项：按你的实际瓦片情况修改
const TILES_PER_ROW = 4; // 每行瓦片数
const TOTAL_ROWS = 2; // 瓦片总行数
const TILE_SIZE = 256; // 单张瓦片尺寸
const FIXED_ZOOM = 18; // 固定缩放层级，和你原有配置保持一致

// 自定义固定瓦片图层
L.TileLayer.FixedTileLayer = L.TileLayer.extend({
    getTileUrl: function(coords) {
        // 超出瓦片预设范围的位置不加载资源
        if (coords.x < 0 || coords.x >= TILES_PER_ROW || coords.y <0 || coords.y >= TOTAL_ROWS) {
            return '';
        }
        // 直接用固定坐标匹配URL，重绘时位置永远对应
        return `https://example.com/${coords.y}-${coords.x}.png`;
    }
});

L.tileLayer.fixedLayer = function(options) {
    return new L.TileLayer.FixedTileLayer(null, options);
}

// 初始化地图，禁用所有会改变视图的交互
const map = L.map('map', {
    zoomControl: false,
    dragging: false,
    scrollWheelZoom: false,
    doubleClickZoom: false,
    boxZoom: false,
    keyboard: false,
    touchZoom: false,
    inertia: false
}).setView([0, 0], FIXED_ZOOM);

// 计算瓦片覆盖的地理边界，锁死可视范围
const mapBounds = L.latLngBounds(
    map.unproject([0, TILE_SIZE * TOTAL_ROWS], FIXED_ZOOM),
    map.unproject([TILE_SIZE * TILES_PER_ROW, 0], FIXED_ZOOM)
);
map.setMaxBounds(mapBounds);
map.setMinZoom(FIXED_ZOOM);
map.setMaxZoom(FIXED_ZOOM);

// 加载固定瓦片图层
L.tileLayer.fixedLayer({
    attribution: 'My Map',
    noWrap: true,
    tileSize: TILE_SIZE,
    bounds: mapBounds
}).addTo(map);

• 不要用任何全局计数器匹配瓦片地址，所有地址匹配完全依赖coords自带的固定坐标，不管窗口怎么缩放、怎么触发重绘，同一个网格位置永远加载同一张瓦片
• 必须锁死缩放层级，缩放会改变瓦片坐标的对应关系，直接导致排布错乱
• 给地图设置maxBounds可以避免用户拖动地图导致瓦片移出可视区域，如果你不需要交互可以保留所有交互禁用配置，如果需要支持平移可以去掉dragging禁用配置，只要保留bounds限制即可，瓦片相对位置依然固定。

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