15

異なるタイル レイヤーを切り替えることができる leaflet.js を使用してマップを作成しようとしています。これは、標準の x、y、および z(oom) スキーマでタイルを提供するタイルサーバーでうまく機能します。ただし、Microsoft Bing は独自の quadkey スキーマを使用します。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 関数を呼び出す方法がわかりません。

4

2 に答える 2

17

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('');
}
});
于 2013-06-17T20:26:07.730 に答える