如何在Leaflet中缩放imageOverlay时避免重新取样

时间:2016-12-05 04:53:24

标签: leaflet

我在Leaflet 1.0.0中使用imageOverlay

放大时,图像会重新采样,并且在您放大时会逐渐变得“模糊”。(通过在缩放时插入像素值,传单很有帮助。)

我想避免这种重新取样,以便在放大时图像层变得“块状”。也就是说,它会让用户在放大时逐渐放大像素的印象。

我在Leaflet API中看不到控制它的方法。我可以通过制作非常大的图像来解决这个问题,但这样做成本很高,无论如何都会在高变焦级别下发生故障。

是否可以通过Leaflet API或其他方法做我想要的事情?

1 个答案:

答案 0 :(得分:2)

"模糊"由于您的网络浏览器,图片不是由于Leaflet。当图像(任何图像)加载到网页中,其大小与图像的像素尺寸不同时,浏览器必须使用其选择的缩放算法对其进行重新缩放。

一些浏览器允许网络作者通过image-rendering CSS rule调整此行为。

您可以将CSS规则应用于所有 L.ImageOverlay,例如:

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

从Leaflet 1.0.2开始,尚无法为特定ImageOverlay指定CSS类。

谨防不同的浏览器支持。对image-rendering CSS规则的支持因不同的网络浏览器之间的狂野而异。

问题Using nearest-neighbor with CSS zoom on canvas (and img)中描述的解决方案在这里并不适用,因为Leaflet在很大程度上依赖CSS变换来设置图像大小。如果您使用基于<canvas>的技术,则会在每次缩放级别更改时中断或需要重新绘制。

(PS:如果你能找到一个好的可靠的跨浏览器方式来强制所有主流浏览器中的缩小尺寸/尺寸缩小算法,请提出拉取请求,以便Leaflet可以从中受益)< / p>