时间戳

首页 > 解决方案 > Inverted Y axis of custom tile images names

javascript - Inverted Y axis of custom tile images names

问题描述

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.

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?

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

标签： javascriptleaflet

解决方案

如WMS/TMS 的 Leaflet 教程中所述，将 Y 坐标反转为瓦片坐标的规范方法是使用{-y}而不是{y}在瓦片 URL 模板中。例如：

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

但是请注意，（从 Leaflet 1.3.1 开始）仅适用于具有非无限坐标系的地图。

在您的情况下，您可能希望通过创建自己的L.TileLayer. 有一个关于扩展层的 Leaflet 教程的完整指南，但是 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(....);

推荐阅读