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

Answer 2

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

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

2 个答案: