リーフレットでimageOverlayをズームするときの再サンプリングを回避する方法

Question

リーフレット1.0.0でimageOverlayを使用しています。

にズームインすると、画像はリサンプリングとなっている徐々に「ぼやけ」、さらにあなたがズームします。（リーフレットは、それがズームして、画素値を補間することにより、有用されています。）

私はこのリサンプリングをので避けたいです拡大するにつれて画像のレイヤーが「ブロック」になることを意味します。つまり、拡大するにつれてピクセルが徐々に拡大されるという印象を与えます。

これを制御するリーフレットAPIはありません。私は非常に大きな画像を作成することでそれを幾分回避することができますが、これは高価であり、どんな場合でも高いズームレベルで分解されます。

リーフレットAPIやその他の方法で、私がしたいことをすることは可能ですか？

Answer 1

画像の「ぼかし」は、リーフレットによるものではなく、ウェブブラウザによるものです。画像、任意の画像がウェブページに画像のピクセルサイズとは異なるサイズでロードされている場合、ブラウザはスケーリングアルゴリズムを選択してスケールを再調整する必要があります。

ブラウザの中には、Web制作者がimage-rendering CSS ruleを通じてこの動作を調整できるものがあります。あなたが好きなものとすべてL.ImageOverlay秒にCSSルールを適用することができ

：

リーフレット1.0.2のよう

.leaflet-layer-image { 
    image-rendering: crisp-edges 
} 

、特定のImageOverlayのためのCSSクラスを指定することはまだできません。

さまざまなブラウザサポートにご注意ください。。 image-rendering CSSルールのサポートは、異なるWebブラウザ間でと大きく異なります（）。リーフレットは、画像サイズを設定するには、変換CSSに大きく依存しているとして疑問Using nearest-neighbor with CSS zoom on canvas (and img)で説明したような

---

ソリューションは、ここでは実際には適用されません。 <canvas>ベースのテクニックを使用する場合は、ズームレベルを変更するたびに再描画する必要があります。

（PS：あなたはすべての主要なブラウザでアルゴリズムを大型化/小型化を強制するのは良い信頼性クロスブラウザの方法を見つけることができる場合リーフレットは、その恩恵を受けることができるように、プルリクエストを作成してください）