传单：瓷砖未对齐和负 y 坐标

Question

我正在尝试使用我自己的图块通过 Leaflet 生成自定义非地理地图。

目前，我使用 imagemagick 创建了大小为 256x256px 的 10x10 虚拟图块，每个图块具有随机纯色。它们位于 public/map-tiles/1/map_x_y.png 中，其中 x 的取值范围为 0 到 9（分别为 y）。

由于是非地理地图，所以注意将crs改成L.CRS.Simple（见http://leafletjs.com/examples/crs-simple/crs-simple.html）：

var map = L.map('map', {
  minZoom: 1,
  maxZoom: 1,
  center: [0, 0],
  crs: L.CRS.Simple
}).setView([0, 0], 1);

L.tileLayer('/map-tiles/{z}/map_{x}_{y}.png', {
    bounds: [[0, 0], [2560, 2560]],
    tms: true
}).addTo(map);

然而，这会产生轻微偏移并因此未对齐的图块：

此外，还会获取 y 坐标为负的图块，这会导致 404d 请求，如控制台中所示。

造成这种行为的原因是什么？

编辑 1：正如 IvanSanchez 所指出的，错位是由缺少 leaflet.css 样式表引起的。

我仍然有负坐标的问题。按照建议，我添加了边界（请参阅上面更新的代码）。观察：

with bounds [[0, 0], [2560, 2560]]: 完全没有图块显示，空白屏幕。
with bounds [[-1280, -1280], [1280, 1280]]：显示所有图块，但获取负图块（例如 (5,-1)）导致 404s。

编辑 2：经过多次测试，负片似乎确实是 y 轴处理的产物 (http://leafletjs.com/examples/wms/wms.html)。原点在左上角，y 向下。我希望获取原点下方的图块，而不是上方的图块。

为了保持 x 和 y 都增加的约定（即 x 向右增加，y 向下增加，从 0 到 9 提取具有正坐标分量的图块），我尝试了什么：

为 tileLayer 设置 tms: true。没有成功，负 y 的瓦片仍然被提取。
将 tileLayer 源路径中的 {y} 更改为 {-y}。结果 Error: No value provided for variable {-y}。我的脚本使用的是 Leaflet 1.3.1.

Answer 1

在具有 L.CRS.Simple 的地图中，默认情况下所有 TileLayer 都有无限边界。

如果您希望 TileLayer 仅在给定区域请求图块，请阅读 Leaflet API documentation，特别是名为 bounds 的 TileLayer 选项（继承自 GridLayer 选项）。让我引用：

bounds
type LatLngBounds
default undefined
If set, tiles will only be loaded inside the set LatLngBounds.

你还提到：

Weirdly enough, it tries to fetch tiles with negative coordinates [...]

这并不奇怪，这是设计的行为。负坐标本身并没有什么错误（也不奇怪），负坐标是有效的 documented in some tile standards

因此，如果您有 10x10 个大小为 [0, 0] 到 [10, 10] 的 256 像素图块，您可能需要

L.tileLayer('/map-tiles/map_{x}_{y}.png', {
  bounds: [[0, 0], [2560, 2560]]
}).addTo(map);

如果您的数据中心是 [0, 0] 点并且您的图块跨度从 [-5, -5] 到 [5, 5]，您可能需要

L.tileLayer('/map-tiles/map_{x}_{y}.png', {
  bounds: [[-1280, -1280], [1280, 1280]]
}).addTo(map);

Answer 2

问题归结为两个方面：

错位：缺少 leaflet.css 样式表，只需在页面的 HTML 中链接即可。
已获取负块：对于 Leaflet，y-axis 下降。我希望从左到右、从上到下获取图块，并将原点设置为左上角。相反，取到了负 y。由于我的磁贴名称是 map_x_y.png，其中 x 和 y 的值在 {0:9} 中，这导致了 404d 请求。设置负边界解决了 bounds: [[0,0],[-1230,1230]] 的问题（注意减号）。 1230 对应于缩放 0 时的图块数乘以一个图块的像素大小。

传单：瓷砖未对齐和负 y 坐标

Leaflet: misalignment of tiles and negative y coordinates

javascript

leaflet

tile