Используйте плитки Bing Quadkey вместо x/y/z плитки на карте leafletjs

Question

Я пытаюсь создать карту с leaflet.js, где можно переключаться между различными слоями плитки. Он отлично работает с файловыми серверами, которые обслуживают плитки стандартными схемами x, y и z (oom). Однако Microsoft Bing использует собственную схему quadkey. Я нашел функцию JavaScript для преобразования xyz в quad, но я не знаю, как ее использовать. Пожалуйста, смотрите мой пример:

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

В основном я просто не знаю, как вызвать функцию JavaScript внутри объявления переменной с {х}, {у} и {Z} значения, leafletjs обеспечивает.

Answer 1

Вы можете создать простой «BingLayer», расширив класс L.TileLayer. Затем вам просто нужно переопределить метод getTileUrl, чтобы использовать новый шаблон, который вы предпочитаете (т. Е. Для бинговых карт). Смотрите связанную скрипку для примера:

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