使用Leaflet为GTA V搭建自定义地图时仅渲染y=0的瓦片问题及解决

问题说明 #

刚接触Leaflet，想给玩的游戏《GTA V》做自定义地图，已经把所有要用的瓦片都准备好了，但跑初始代码的时候，只出来2个y坐标为0的瓦片。之前试过调整bounds参数，没解决问题，后来调试的时候找到了可行的修正方法，现在把完整的问题情况、初始代码、瓦片命名规则、改完能跑的代码都整理在下面。

初始代码内容 #

初始JavaScript逻辑 #

const map = L.map('map', {}).setView([0.0, 0.0], 0);

const tile = L.tileLayer('tiles/minimap_sea_{y}_{x}.png', {
    minZoom: 0,
    maxZoom: 2,
    tileSize: 1024,
    bounds: [[0, 0],[3072, 2048]],
    maxNativeZoom: 0,
    minNativeZoom: 0,
    noWrap: true
}).addTo(map);

初始HTML结构 #

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="leaflet.css">
        <script src="leaflet.js"></script>
        <link rel="stylesheet" href="style.css">
        <script src="./script.js" type="text/javascript" defer></script>
        <title>测试地图</title>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

配套CSS样式 #

body {
    margin: 0;
    height: 100vh;
    width: 100vw;
}

#map {
    width: 100%;
    height: 100%;
    background-color: #888888;
}

瓦片命名规则 #

所有瓦片文件按如下规律命名：

minimap_sea_0_0.png
minimap_sea_0_1.png
minimap_sea_1_0.png
minimap_sea_1_1.png
minimap_sea_2_0.png
minimap_sea_2_1.png

对应URL模板tiles/minimap_sea_{y}_{x}.png的y、x参数，覆盖x轴0-1、y轴0-2的范围。

修正方案 #

共做三处调整：

• 地图初始化时指定坐标系为*L.CRS.Simple*，适配自定义像素类地图的坐标规则（默认EPSG:3857坐标系无法匹配这类无地理投影的自定义地图）
• 将bounds参数的y轴取值取反，匹配Leaflet的像素坐标方向
• 开启tms参数，对齐瓦片的y轴计数逻辑

调整后可运行的JavaScript代码 #

const map = L.map('map', {
    crs: L.CRS.Simple
}).setView([0.0, 0.0], 0);

const tile = L.tileLayer('tiles/minimap_sea_{y}_{x}.png', {
    minZoom: 0,
    maxZoom: 2,
    tileSize: 1024,
    bounds: [[0, 0],[-3072, 2048]],
    maxNativeZoom: 0,
    minNativeZoom: 0,
    tms: true
}).addTo(map);

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