Leaflet 舍入像素坐标有什么原因吗?

mbe*_*sky 2 javascript leaflet

我想知道一些传单投影方法,例如 latLngToLayerPoint舍入像素坐标_setPos的方法Marker

有什么理由吗?最好不要舍入,因为我们可以采取更好的定位和更平滑的标记动画。

Iva*_*hez 5

主要原因是像素保真度:确保图像(图块或标记图标)中的一个像素与屏幕中的一个像素完全对应。

这最好用一个反例来解释:当图像(或图像的容器)具有小数偏移时,某些浏览器(尤其是 Chrome)会执行像素插值。

我们以 leafletjs.com 主页上显示的地图为例,点击浏览器的开发者工具...

原始传单地图

...并将主地图窗格的偏移量更改半个像素

具有非整数偏移量的传单地图

看起来很模糊。如果您的视力或屏幕无法让您欣赏到其中的差异,请看放大后的样子:

并排模糊和非模糊地图

虽然浏览器正在按照要求执行操作(将图像移动半个像素),但这意味着屏幕上的每个像素都是源图块图像中四个像素的加权组合(因为 webkit 引擎使用线性插值) 。其他浏览器(例如 Firefox)不会显示此行为(因为它们使用最近邻方法)。

尽管 Leaflet 默认使用整数偏移量,但有些设置(高分辨率屏幕加上平移动画加上浏览器设置的组合)仍然会导致这种模糊;例如,请参阅Leaflet bug #6069。子像素的东西一般是 PITA 来处理(参见Leaflet bug #3575)。

使用非整数偏移量会使此类错误更加突出。