自定义平铺图像名称的倒 Y 轴

Question

Leaflet 的一个已知问题是，当您使用自定义 tile 提供程序时，而不是使用真实地球图像，设置 crs: L.CRS.Simple，Leaflet 查询 Y 坐标倒置的图像与数学轴相比。所以右上角第一张图片的位置是 1x-1 而不是 1x1。

在互联网上关于反转 Y 轴的话题相当古老，所以我的问题是：现在有没有一种正常的短内置方法来反转查询的 Y 轴？

我发现的唯一旧解决方案是重写 Leaflet 内部对象，例如扩展 L.CRS.Simple。

Answer 1

如Leaflet tutorial for WMS/TMS 中所述，反转图块坐标的 Y 坐标的规范方法是在图块 URL 模板中使用 {-y} 而不是 {y}。例如：

var layer = L.tileLayer('http://base_url/tms/1.0.0/tileset/{z}/{x}/{-y}.png');

但是，请注意（从 Leaflet 1.3.1 开始）only works for maps with a non-infinite coordinate system。

在您的情况下，您可能希望通过创建自己的 L.TileLayer 子类来解决此问题。 Leaflet tutorial about extending layers 上有一个完整的指南，但是 TL;DR 版本的 tilelayer 可以改变其 tile 坐标：

L.TileLayer.CustomCoords = L.TileLayer.extend({
    getTileUrl: function(tilecoords) {
        tilecoords.x = tilecoords.x + 4;
        tilecoords.y = tilecoords.y - 8;
        tilecoords.z = tilecoords.z + 1;
        return L.TileLayer.prototype.getTileUrl.call(this, tilecoords);
    }
});

var layer = new L.TileLayer.CustomCoords(....);

而只是反转Y坐标的具体情况是：

L.TileLayer.InvertedY = L.TileLayer.extend({
    getTileUrl: function(tilecoords) {
        tilecoords.y = -tilecoords.y;
        return L.TileLayer.prototype.getTileUrl.call(this, tilecoords);
    }
});

var layer = new L.TileLayer.InvertedY(....);