Sử dụng gạch Bing Quadkey thay vì gạch x/y/z trong bản đồ leafletjs

Question

Tôi cố gắng tạo bản đồ với leaflet.js nơi có thể chuyển đổi giữa các lớp lát khác nhau. Nó hoạt động tốt với các máy xếp gạch phục vụ các ô với lược đồ chuẩn x, y và z (oom). Tuy nhiên, Microsoft Bing sử dụng lược đồ tứ giác riêng của nó. Tôi tìm thấy một hàm JavaScript để chuyển đổi xyz thành quad, nhưng tôi không biết cách sử dụng nó. Hãy xem ví dụ của tôi:

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

Về cơ bản tôi chỉ không biết làm thế nào để gọi hàm JavaScript bên trong khai báo biến với {x}, {y} và {z} giá trị mà leafletjs cung cấp.

Answer 1

Bạn có thể tạo một "BingLayer" đơn giản bằng cách mở rộng lớp L.TileLayer. Sau đó, bạn chỉ cần ghi đè phương thức getTileUrl để sử dụng mẫu mới mà bạn thích (tức là đối với các bản đồ bing). Xem fiddle liên kết cho một ví dụ:

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