Leaflet benutzerdefinierte URL \ benutzerdefinierte Fliesen

Question

Ich arbeite an einer benutzerdefinierten Karte mit Prospekt. Bis jetzt hat alles gut geklappt, aber leider starte ich mit dem Programm, mit dem ich mein Bild in Kacheln teile, mit 0, aber mit 1, also beginnen meine Kacheln mit "1_1.jpg" und so wird meine ganze Karte um eine Kachel verschoben auf y- und x-Achse. Um die Fliesen zu umbenennen, ist keine Option, Cuz es zu viele, so dass ich war auf der Suche nach einer Möglichkeit, zu ändern, um den {x} und {y} Wert in

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

um so etwas wie x=x+1 und y=y+1, das wäre meine Logik. Ich habe gelesen, dass es mit getTileUrl möglich wäre, aber ich habe nicht verstanden, wie. Ich bin noch ziemlich neu in Javascript und dieses Problem beginnt mich verrückt zu machen!

Wenn jemand helfen kann, wäre ich sehr dankbar.

Kachelnamen sind wie "Cx_Ry.jpg" (zum Beispiel erstes Bild "C1_R1.jpg") Und hier ist der Code.

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

Sie können TileLayer Klasse Prospekt des erweitern Sie Ihre eigenen getTileUrl Verfahren bereitzustellen: http://leafletjs.com/examples/extending/extending-2-layers.html.

In diesem Fall wäre es wahrscheinlich so etwas wie folgt aussehen:

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

-Code nicht getestet, aber sollten Sie in die richtige Richtung sich zu bewegen.