Leaflet如何在Retina(或任何HD)显示器上处理(div)图标锚点和divIcon大小?

时间:2016-04-10 12:28:08

标签: leaflet

2x Retina,或者不是2x HD,这就是问题。

首先,我没有要测试的Retina显示屏,文档对我来说似乎有点模棱两可。 API可能处理得很好。有可能它没有。我们有可能必须处理其中的一些事情。无论哪种方式,都没有明确记录。

Leaflet Icon对象的iconAnchor属性

对于Icon对象,可以设置iconAnchor属性,以便“tip”居中。当图像(大概)在每个方向上大2倍时,如何处理Retina显示屏?如果我们不能假设每个HD分辨率都是2倍,该怎么办?如果高清显示器的像素比率大1.75倍或2.25倍,该怎么办? Leaflet是否会重新计算新的比例iconAnchor,还是我们在load / detect / init设置中手动执行,或者它是非问题,还是以未定义的方式运行?我们是否总是需要手动处理可能隐藏在API中的内容,以及对“弹性”图标进行更广泛的解决方案处理?

  

图标“尖端”的坐标(相对于其左上角)。图标将对齐,以使此点位于标记的地理位置。如果指定了size,则默认居中,也可以在具有负边距的CSS中设置。 - Leaflet Reference: Icon.iconAnchor

Leaflet Icon对象

对于基于图像文件的Icon对象,有一对属性:iconUrliconRetinaUrl(通常是2x图像),这些都是不言自明的。仅仅通过文档而不是其他内容,这似乎是在更高分辨率显示器上处理图标大小的唯一可靠方法。

Leaflet divIcon对象

使用DivIcon对象,我们继承了上面提到的URL属性,但我们没有要使用的URL,所以它们不是必需的,因此在这种情况下它们毫无意义。但是,我们继承了iconSize属性,这对于在常见显示上设置大小很有用。但是没有IconRetinaSize等。必须在初始化时手动检测和设置分辨率。但似乎Leaflet已经在某种程度上进行了一些分辨率检测,一些内部代码可以在1x和2x像素比率的基础上选择1x和2x图像URL。如果它已经有了这个信息,为什么不正确处理它自己的属性呢?

1 个答案:

答案 0 :(得分:1)

Leaflet(以及每个JS库)使用CSS像素 - 浏览器决定CSS像素和屏幕像素之间的关系(或者#34;设备像素")。阅读{{3}}。

未来可能会有更好的解决方案管理,或者可能使用<picture>元素代替<img>。如果您对如何改进Leaflet或如何改进其文档有任何具体想法,请通过为项目做出贡献(欢迎提出拉动请求!)