自定义图块图像名称的反转Y轴 [英] Inverted Y axis of custom tile images names

问题描述

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

There is a know problem of Leaflet that when you use a custom tile provider, not with real earth images, set crs: L.CRS.Simple, Leaflet queries for images where Y coordinate is inverted in comparison to the math axis. So the first top-right image's location is 1x-1 instead of 1x1.

在互联网上有关反转Y轴的话题比较古老，所以我的问题是:如今是否存在一种正常的短而内建的方式来反转查询的Y轴?

In the internet topics about inverting Y axis are rather old, so my question is: nowadays is there a normal short and built-in way to invert queried Y axis?

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

The only old solutions I've found were rewriting Leaflet internal objects, like extending L.CRS.Simple.

推荐答案

如传单中所述WMS/TMS教程，将平铺坐标的Y坐标反转的规范方法是在平铺URL中使用 {-y} 而不是 {y} 模板.例如:

As noted in the Leaflet tutorial for WMS/TMS, the canonical way of inverting the Y coordinate for tile coordinates is using {-y} instead of {y} in the tile URL template. e.g.:

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

但是，请注意，(从第1.3.1版开始)仅适用于具有非无限坐标系的地图.

Note, however, that (as of Leaflet 1.3.1) that only works for maps with a non-infinite coordinate system.

在您的情况下，您可能想通过创建自己的 L.TileLayer 子类来解决此问题.关于有关扩展图层的传单教程，有完整的指南，但是移位其图块坐标的图块的TL; DR版本为:

In your case, you might want to get around this by creating your own subclass of L.TileLayer. There is a complete guide on the Leaflet tutorial about extending layers, but the TL;DR version for a tilelayer that shifts its tile coordinates is:

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坐标的具体情况是:

And the specific case for just inverting the Y coordinate is:

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

这篇关于自定义图块图像名称的反转Y轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！