Leaflet custom url\custom tiles

Question

我正在使用传单制作自定义地图。到目前为止一切正常，但不幸的是我用来将我的图像分割成图块的程序不以 0 而是以 1 开始计数，所以我的图块以“1_1.jpg”开头，所以我的整个地图移动了y 轴和 x 轴上的一个图块。重命名瓷砖不是一个选项，因为有很多，所以我正在寻找一种可能性来更改

中的 {x} 和 {y} 值

L.tileLayer('images/map/{z}/C{x}_R{y}.jpg',

到 x=x+1 和 y=y+1 之类的东西，这就是我的逻辑。我读过 getTileUrl 是可能的，但我不明白怎么做。我对 Javascript 还是很陌生，这个问题开始让我抓狂！

如果有人能帮助我，我将不胜感激。

图块名称类似于 "Cx_Ry.jpg"（例如第一张图片 "C1_R1.jpg"）这是代码。

var w = 16384, h = 16384; //Größe innerhalb Box

var map = L.map('image-map', {
        minZoom: 0,
        maxZoom: 5,
        crs: L.CRS.Simple,
        attributionControl: false,
}).setView([0, 0], 0);

var southWest = map.unproject([0, h], map.getMaxZoom());
var northEast = map.unproject([w, 0], map.getMaxZoom());
var bounds = new L.LatLngBounds(southWest, northEast);

map.setMaxBounds(bounds);

L.tileLayer('images/map/{z}/C{x}_R{y}.jpg', {
    minZoom: 0,
    maxZoom: 5,
    tms: false,
    continuousWorld: 'false',
    noWrap: false,
    defaultRadius:1,
}).addTo(map);

Answer 1

您可以扩展 Leaflet 的 TileLayer class 以提供您自己的 getTileUrl 方法：http://leafletjs.com/examples/extending/extending-2-layers.html.

在这种情况下，它可能看起来像这样：

L.TileLayer.MyCustomLayer = L.TileLayer.extend({
    getTileUrl: function(coords) {
        // increment our x/y coords by 1 so they match our tile naming scheme
        coords.x = coords.x + 1;
        coords.y = coords.y + 1;

        // pass the new coords on through the original getTileUrl
        // see http://leafletjs.com/examples/extending/extending-1-classes.html 
        // for calling parent methods
        return L.TileLayer.prototype.getTileUrl.call(this, coords);
    }
});

// static factory as recommended by http://leafletjs.com/reference-1.0.3.html#class
L.tileLayer.myCustomLayer = function(templateUrl, options) {
    return new L.TileLayer.MyCustomLayer(templateUrl, options);
}

// create the layer and add it to the map
L.tileLayer.myCustomLayer('images/map/{z}/C{x}_R{y}.jpg', {
    minZoom: 0,
    maxZoom: 5,
    tms: false,
    continuousWorld: 'false',
    noWrap: false,
    defaultRadius:1,
}).addTo(map);

代码未经测试，但应该能让您朝着正确的方向前进。

Leaflet custom url\custom tiles

Leaflet custom url \ custom tiles

javascript

dictionary

tiles

leaflet