Verwenden Sie Bing Quadkey-Kacheln anstelle von x/y/z-Kacheln in leafletjs map

Question

Ich versuche, eine Map mit leaflet.js zu erstellen, wo es möglich ist, zwischen verschiedenen Kachel-Layern zu wechseln. Es funktioniert hervorragend mit Tileservers, die die Kacheln mit dem Standardschema x, y und z (oom) bedienen. Microsoft Bing verwendet jedoch ein eigenes Quadkey-Schema. Ich habe eine JavaScript-Funktion gefunden, um xyz in Quad umzuwandeln, aber ich weiß nicht, wie ich es benutzen soll. Bitte beachten Sie meinem Beispiel:

function toQuad(x, y, z) { 
    var quadkey = ''; 
    for (var i = z; i >= 0; --i) { 
     var bitmask = 1 << i; 
     var digit = 0; 
     if ((x & bitmask) !== 0) { 
      digit |= 1;} 
     if ((y & bitmask) !== 0) { 
      digit |= 2;} 
     quadkey += digit; 
    } 
    return quadkey; 
}; 
var openstreetmap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}), 
arcgissat = L.tileLayer('http://{s}.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {subdomains: ['server', 'services'], attribution: '&copy; <a href="http://www.arcgis.com/">ArcGIS esri</a>'}) 
// bingsat = L.tileLayer('http://t{s}.tiles.virtualearth.net/tiles/a'+toQuad({x},{y},{z})+'.jpeg?g=1398', {subdomains: [0,1,2,3,4,5], attribution: '&copy; <a href="http://bing.com/maps">Bing Maps</a>'}), 
var map = L.map('map', { 
    center: [48.85,2.33], 
    zoom: 10, 
    layers: [openstreetmap] 
}); 
var baseLayers = { 
    "OpenStreetMap": openstreetmap, 
//  "Bing Sat": bingsat, 
      "ArcGIS esri Sat": arcgissat 
}; 
L.control.layers(baseLayers, null, {collapsed: false}).addTo(map); 

Grundsätzlich ich weiß nur nicht, wie die JavaScript-Funktion aufrufen, innerhalb der Deklaration von Variablen mit der {x}, {y} und {z} Werte, die leafletjs zur Verfügung stellt.

Answer 1

Sie können einen einfachen "BingLayer" erstellen, indem Sie die L.TileLayer-Klasse erweitern. Dann müssen Sie nur die getTileUrl-Methode überschreiben, um die neue Vorlage zu verwenden, die Sie bevorzugen (z. B. für Bing-Maps). Siehe die verknüpfte Geige für ein Beispiel:

http://jsfiddle.net/nkmbx/

var BingLayer = L.TileLayer.extend({ 
getTileUrl: function (tilePoint) { 
    this._adjustTilePoint(tilePoint); 
    return L.Util.template(this._url, { 
     s: this._getSubdomain(tilePoint), 
     q: this._quadKey(tilePoint.x, tilePoint.y, this._getZoomForUrl()) 
    }); 
}, 
_quadKey: function (x, y, z) { 
    var quadKey = []; 
    for (var i = z; i > 0; i--) { 
     var digit = '0'; 
     var mask = 1 << (i - 1); 
     if ((x & mask) != 0) { 
      digit++; 
     } 
     if ((y & mask) != 0) { 
      digit++; 
      digit++; 
     } 
     quadKey.push(digit); 
    } 
    return quadKey.join(''); 
} 
});