Question

Leaflet存在一个已知问题，当您使用自定义图块提供程序而非真实地球图像时，请设置 crs：L.CRS.Simple ，Leaflet查询Y坐标被反转的图像与数学轴相比。因此，第一个右上角图片的位置是 1x-1 ，而不是 1x1 。

在互联网上关于反转Y轴的主题相当陈旧，所以我的问题是：现在有一种正常的短路和内置方式来反转查询的Y轴吗？

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

Answer 1

如Leaflet tutorial for WMS/TMS所述，反映切片坐标的Y坐标的规范方法是使用切片网址模板中的{-y}代替{y}。 e.g：

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

但请注意（截至传单1.3.1）only works for maps with a non-infinite coordinate system。

在您的情况下，您可能希望通过创建自己的L.TileLayer子类来解决这个问题。有Leaflet tutorial about extending layers的完整指南，但是用于移动其图块坐标的图块层的TL; DR版本是：

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

自定义图块图像名称

1 个答案: