传单：瓷砖和负 y 坐标的错位答案

【问题标题】：Leaflet: misalignment of tiles and negative y coordinates传单：瓷砖和负 y 坐标的错位
【发布时间】：2018-03-05 23:27:55
【问题描述】：

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

目前，我使用 imagemagick 创建了 10x10 大小为 256x256 像素的虚拟图块，每个图块具有随机纯色。它们被放置在 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 样式表造成的。

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

边界为 [[0, 0], [2560, 2560]]：完全不显示图块，空白屏幕。
边界为 [[-1280, -1280], [1280, 1280]]：显示所有图块，但提取了负图块（例如 (5,-1)），导致 404 秒。

编辑 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。

【问题讨论】：

标签： javascript leaflet tile

【解决方案1】：

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

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

bounds
输入LatLngBounds
默认undefined
如果设置，则只会在集合LatLngBounds 内加载图块。

你还提到：

奇怪的是，它会尝试获取具有负坐标的图块 [...]

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

因此，如果您有 10x10 大小为 256 像素的图块，范围从 [0, 0] 到 [10, 10]，您可能需要类似的东西

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);

【讨论】：

感谢 Ivan，并为选择不当的措辞感到抱歉……我的意思是说我的兴趣比其他任何事情都多。我得到了边界的概念，但是边界： [[0, 0], [2560, 2560]] 完全删除了瓷砖（空白区域）并且 [[-1280, -1280], [1280, 1280]] 产生了相同的效果瓷砖错位。我的 map.setView([0, 0], 1) 有问题吗？
哦，等等，错位实际上可能是您的网页中缺少leaflet.css。
你能用这些信息更新你的问题吗，也许是一个链接来看看它是如何失败的？例如比如plnkr.co/edit/WxoYaRwbiDAZ37oEwXlQ?p=preview。如果问题是负的y 坐标（请在解释您的问题时具体说明！！），请阅读leafletjs.com/examples/wms/wms.html 直到最后。
我更新了问题。回家后我会尝试放一个链接。

【解决方案2】：

问题归结为两个方面：

错位：leaflet.css 样式表丢失，只需在页面的 HTML 中链接即可。
获取负片：对于 Leaflet，y 轴向下。我希望从左到右，从上到下获取瓷砖，原点设置在左上角。相反，取的是负 y。由于我的图块名称是 map_x_y.png，其中 x 和 y 采用 {0:9} 中的值，这导致了 404d 请求。设置负边界解决了bounds: [[0,0],[-1230,1230]] 的问题（注意减号）。 1230 对应于以像素为单位缩放 0 倍的图块数量。

【讨论】：