Utilizzare i riquadri Bing Quadkey al posto dei riquadri x/y/z nella mappa leafletjs

Question

Cerco di creare una mappa con leaflet.js in cui è possibile passare da layer di tile diversi. Funziona alla grande con i server di tessere che servono le tessere con lo schema standard x, y e z (oom). Tuttavia, Microsoft Bing utilizza il proprio schema quadkey. Ho trovato una funzione JavaScript per convertire xyz in quad, ma non so come usarlo. Si prega di consultare il mio esempio:

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

Fondamentalmente io non so come chiamare la funzione JavaScript all'interno della dichiarazione variabile con il {x}, {y} e {Z} valori che leafletjs fornisce.

Answer 1

È possibile creare un semplice "BingLayer" estendendo la classe L.TileLayer. Quindi devi solo sovrascrivere il metodo getTileUrl per utilizzare il nuovo modello che preferisci (ad es. Per le mappe bing). Vedere il violino legato per un esempio:

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