在 Leafletjs 地图中使用 Bing Quadkey 磁贴而不是 x/y/z 磁贴答案

【问题标题】：Use Bing Quadkey tiles instead of x/y/z tiles in leafletjs map在 Leafletjs 地图中使用 Bing Quadkey 磁贴而不是 x/y/z 磁贴
【发布时间】：2013-06-13 20:03:11
【问题描述】：

我尝试使用 Leaflet.js 创建一个地图，可以在不同的图块层之间切换。它适用于使用标准 x、y 和 z(oom) 模式提供瓷砖的瓷砖服务器。但是，Microsoft Bing 使用自己的四键架构。我找到了一个将 xyz 转换为 quad 的 JavaScript 函数，但我不知道如何使用它。请看我的例子：

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 函数。

【问题讨论】：

标签： javascript function map leaflet tile

【解决方案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('');
}
});

【讨论】：

但可以使用预分配数组和数组索引进一步优化。

【解决方案2】：

对于传单=> 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
 }
})

【讨论】：