Użyj kafelków Bing Quadkey zamiast płytek x/y/z w mapie leafletjs

Question

Próbuję utworzyć mapę z plikiem leaflet.js, w której można przełączać się między różnymi warstwami płytek. Działa wspaniale z kaflami, które obsługują płytki ze standardowym schematem x, yi z (oom). Jednak Microsoft Bing używa własnego schematu w postaci kwadratu. Znalazłem funkcję JavaScript do konwersji xyz na quad, ale nie wiem jak z niej korzystać. Proszę zobaczyć mój przykład:

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

Zasadniczo ja po prostu nie wiem, jak do wywołania funkcji JavaScript wewnątrz deklaracji zmiennej z {x}, {y} i {Z} wartości, które leafletjs zapewnia.

Answer 1

Możesz utworzyć prostą "BingLayer", rozszerzając klasę L.TileLayer. Następnie wystarczy przesłonić metodę getTileUrl, aby użyć nowego preferowanego szablonu (np. Dla map bing). Zobacz połączoną skrzypce na przykład:

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(''); 
} 
});