リーフレットマップに余分なズームレベルを追加する

Question

Im leafletを使用して、自分のタイルを使用して写真マップを作成します。これは期待どおりに機能します。私はこのQuadtreeタイプのパターン、次からズームを防ぐことができますどのように動作するようにしようと

イム：

• ズームレベル0 - 全体マップの幅= 256PX。
• ズームレベル1 - マップ全体の幅= 512ピクセル。
• ズームレベル2 - 全体のマップ幅= 1024px;
• のように...

私は、25％または100pxにの言う刻みでズームできるようにしたいと思います。

100ピクセル単位の例：

• ズームレベル0 - 全体マップの幅= 200pxの。
• ズームレベル1 - マップ全体の幅= 300ピクセル;
• ズームレベル2 - マップ全体の幅= 400ピクセル。
• のように...

---

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

---

これをやりたいと思っための私の理由は、（通常のマップのようなラップdoesntの）私のフォトマップはresponsiveよりも、ユーザーがうまく画面サイズを合うことができるようにということです。

私は私の問題のデモンストレーションを行ったhere

Answer 1

を見ることができる短い答えは、あなただけあなたがしているプリレンダリングされたタイルのズームレベルを示すことができるということです。リーフレットはあなたの仲介ズームレベルを作成しません。

長い答えは、これを行うに使用するためには、あなたがあなた自身の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を拡張することももちろん可能ですが、スクラッチから自分自身を作成することもできます。

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

しかし、私の意見では、最小の共通分母（この場合は100px）に一致するようにタイルサイズを設定する方がはるかに良い考えです。タイルレイヤーでtileSizeオプションを使用してこれを反映させてください。もちろん、現在使用している256x256のタイルの代わりに、100x100ピクセルのタイルにイメージを再レンダリングする必要があります。

LeafletJS（0.5）の現在のバージョンでは、TileLayerクラスが2のべき乗の倍率を使用するようにハードコードされているため、カスタムscale（）メソッドが機能しなくなるというバグがあります。しかし、あなたが行う必要がある変更は軽微です。今後のリーフレットのリリースで対応されることを願っています。

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

：単純からTileLayer._getWrapTileNum()を変更するには、すべてのズームレベルのための事前レンダリングされたタイルを持っていない場合

_getWrapTileNum: function() { 
    return this._map.options.crs.scale(this._getZoomForUrl()); 
},