6

リーフレットを使用して、自分のタイルを使用して写真マップを作成します。これは期待どおりに機能します。

ズームがこのQuadtreeタイプのパターンに従わないようにする方法を見つけようとしています。

  • ズームレベル0-マップ全体の幅=256px;
  • ズームレベル1-マップ全体の幅=512px;
  • ズームレベル2-マップ全体の幅=1024px;
  • 等々...

25％または100pxの増分でズームインできるようにしたいと思います。

100pxの増分の例：

  • ズームレベル0-マップ全体の幅=200px;
  • ズームレベル1-マップ全体の幅=300px;
  • ズームレベル2-マップ全体の幅=400px;
  • 等々...

質問： これを行うためのロジックは何ですか？可能であれば？

これを実行したい理由は、写真マップ（通常のマップのように折り返されない）の応答性を高め、ユーザーの画面サイズにうまく合わせることができるようにするためです。

私はここで見ることができる私の問題のデモンストレーションをしました

4

1 に答える 1

8

簡単に言うと、事前にレンダリングされたタイルがあるズームレベルしか表示できないということです。リーフレットは、中間のズームレベルを作成しません。

長い答えは、これを使用するには、独自のCRSスケールメソッドを定義し、それをマップに渡す必要があるということです。たとえば、次のようになります。

L.CRS.CustomZoom = L.extend({}, L.CRS.Simple, {
    scale: function (zoom) {
        // This method should return the tile grid size
        // (which is always square) for a specific zoom
        // We want 0 = 200px = 2 tiles @ 100x100px,
        // 1 = 300px = 3 tiles @ 100x100px, etc.
        // Ie.: (200 + zoom*100)/100 => 2 + zoom

        return 2 + zoom;
    }
});

var map = L.map('map', { crs: L.CRS.CustomZoom }).setView([0, 0], 0);

この例では、拡張しましL.CRS.Simpleたが、もちろん、必要なAPIから任意のCRSを拡張したり、独自のCRSを最初から作成したりすることもできます。

タイルサイズの倍数ではないマップピクセルサイズになるズーム係数を使用すると、右/下端のタイルがマップデータで部分的にのみ埋められることを意味します。これは、そのようなタイルの非マップ部分を100％透明（または背景と同じ色）にすることで修正できます。

ただし、私の意見では、最小公分母（この場合は100px）に一致するようにタイルサイズを設定することをお勧めします。tileSizeタイルレイヤーのオプションを使用して、これを反映することを忘れないでください。そしてもちろん、現在使用している256x256タイルではなく、100x100ピクセルのタイルに画像を再レンダリングする必要があります。

注意点の1つとして、現在のバージョンのLeafletJS（0.5）には、TileLayerクラスが2の累乗のズームスケーリングを使用するようにハードコーディングされているため、カスタムscale（）メソッドが機能しないというバグがあります。ただし、実行する必要のある変更は軽微であり、Leafletの将来のリリースで対処されることを願っています。変更TileLayer._getWrapTileNum()するだけ：

_getWrapTileNum: function () {
    // TODO refactor, limit is not valid for non-standard projections
    return Math.pow(2, this._getZoomForUrl());
},

に：

_getWrapTileNum: function () {
    return this._map.options.crs.scale(this._getZoomForUrl());
},
于 2013-01-28T18:11:52.257 に答える