Question

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

目前，我使用 imagemagick 创建了大小为256x256像素的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样式表引起的。

我仍然遇到负坐标问题。正如所建议的，我添加了边界（参见上面的更新代码）。观察：

带边界[[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，特别是名为TileLayer的{{1}}选项（继承自bounds }选项）。我来引用一下：

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

你还提到：

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

这并不奇怪，它的行为与设计完全相同。负坐标没有任何固有的错误（也不奇怪），负的切片坐标是有效的documented in some tile standards

因此，如果您有10x10的256px大小，范围从[0,0]到[10,10]，您可能需要类似

的内容

LatLngBounds

如果你的数据中心是[0,0]点并且你的图块从[-5，-5]到[5,5]，你可能想要像

这样的东西

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

Answer 2

问题归结为两个方面：

错位：缺少leaflet.css样式表，只需将其链接到页面的HTML中。
取消负片：对于Leaflet，y轴向下。我期望从左到右，从上到下提取瓷砖，原点设置在左上角。相反，取消了负面的y。自从我的瓷砖＆＃39;名称是 map_x_y.png ，其中x和y取{0：9}中的值，这导致404d请求。设置负边界可以解决bounds: [[0,0],[-1230,1230]]的问题（注意减号）。 1230对应于缩放的瓦片数量，是一个瓦片像素大小的0倍。

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

2 个答案: