在Leafletjs地图中，使用Bing Quadkey瓦片替代x/y/z瓦片。

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函数，并使用由leafletjs提供的{x}、{y}和{z}值。

- user168080

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

- user2494854

---

但是可以进一步优化，使用预分配的数组和数组索引。 - Richard Collette

Answer 2

对于leaflet =>1，@user2494854的答案不起作用。这是他的答案的更新版本，对我有效：

var BingLayer = L.TileLayer.extend({
getTileUrl: function(coords) {
var quadkey = this.toQuadKey(coords.x, coords.y, coords.z)
var url = L.Util.template(this._url, {
  q: quadkey,
  s: this._getSubdomain(coords)
})
if (typeof this.options.style === 'string') {
  url += '&st=' + this.options.style
}
return url
},
toQuadKey: function(x, y, z) {
var index = ''
for (var i = z; i > 0; i--) {
  var b = 0
  var mask = 1 << (i - 1)
  if ((x & mask) !== 0) b++
  if ((y & mask) !== 0) b += 2
  index += b.toString()
 }
  return index
 }
})

- Dany