在leafletjs地图中使用Bing Quadkey拼贴而不是x/y/z拼贴

Question

我尝试使用leaflet.js创建一个地图,可以在不同的图块层之间切换.它适用于使用标准x,y和z(oom)模式为切片提供服务的切片服务器.但是,Microsoft Bing使用自己的四核模式.我发现了一个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);

基本上我只是不知道如何使用leafletjs提供的{x},{y}和{z}值调用变量声明中的JavaScript函数.

Answer 1

您可以通过扩展L.TileLayer类来创建简单的"BingLayer".然后你只需要覆盖getTileUrl方法来使用你喜欢的新模板(即用于bing贴图).请参阅链接小提琴以获取示例:

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