Leaflet 只渲染游戏地图的 y 坐标为 0 的图块

Question

我刚开始使用 Leaflet，我想为我玩的游戏 (GTA V) 制作一张地图

我拥有构建地图所需的所有图块。但是，当我运行我的代码时，只显示 2 个图块，它们的 y 坐标为 0。

我的代码：

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="en">
    <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="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512- xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
        <link rel="stylesheet" href="style.css">
        <script src="./script.js" type="text/javascript" defer></script>
        <title>Test Map</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

我已经尝试过设置边界，但也没有用。

解法：
我在创建地图时指定了简单的坐标系，并否定了我边界的 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);

Answer 1

这可能与 leaflet 将缩放与 y 值混淆有关。我建议遵循标准的 slippymap 瓦片结构。磁贴需要位于遵循 zoom/x/y 模式的目录结构中。看起来你只有一个缩放层（据我所知）。假设其缩放级别为 0。您的图块应按如下方式组织：

/myproj
  myjavascriptfile.js
  /tiles
    /0
      /0
         0.png
         1.png
      /1
         0.png
         1.png
      /2
         0.png
         1.png

现在您可以像这样告诉 tilelayer 在哪里可以找到这些：

const tile = L.tileLayer('tiles/{z}/{y}/{x}.png')

我强烈建议查看 this article 命名地图图块。

Answer 2

如果您制作的地图不覆盖 ~sphere（如地球），请务必指定 L.CRS.Simple in the map crs option:

A simple CRS that maps longitude and latitude into x and y directly. May be used for maps of flat surfaces (e.g. game maps).

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

否则，在缩放 0 时，默认 EPSG3857 CRS 的最大和最小纬度将限制在 256px 高度，在缩放 1 时限制为 512px，在缩放 2 时限制为 1024px，因此仍在您的 y = 0 图块（1024px 大小）内。

另请参阅涵盖此案例的 Leaflet 教程：Non-geographical maps

Leaflet 只渲染游戏地图的 y 坐标为 0 的图块

Leaflet only renders tiles with 0 y coordinate for game map

leaflet