浏览器与 leaflet::addMapPane() 函数不一致

Question

每当使用 addMapPane() 函数创建不同的窗格时，我在 blogdown 网站中集成 leaflet 地图时遇到问题。问题是，当使用 Safari 时，一切正常，但是当使用 Chrome 时，磁贴根本不会显示。

这个具体的例子可以查看here（请用Safari和Chrome打开它以了解不同之处）。

编写这个非常简单的 Rmd 文档可以很容易地找出问题所在：

---
title: Browsers inconsistency with tiles
output: html_document
---

```{r}
library(leaflet)
leaflet(
  width = "100%"
) %>%
  addMapPane(
    name = "test",
    zIndex = 500L
  ) %>%
  addTiles(
    options = tileOptions(
      pane = "test"
    )
  )
```

使用 Safari 时，html 页面呈现如下。

这是预期的输出，一切正常。但是，当在 Chrome 中打开完全相同的 html 时，我看到以下内容：

如您所见，图块未使用 Chrome 渲染。由于浏览器似乎造成了问题，我猜它可能与 css 相关，但我不知道如何确认或（更好）解决这个问题。

有人知道这件事吗？

Answer 1

将此 css 添加到您的文档中：

img.leaflet-tile {
    max-width: none !important;
    max-height: none !important;
}

我不知道为什么它可以在 Safari 中工作，为什么不能在 Firefox 和 Chrome 中使用，但它与此有关 css class，因为它没有应用:

.leaflet-container .leaflet-overlay-pane svg, .leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer {
    max-width: none !important;
    max-height: none !important;
}

浏览器与 leaflet::addMapPane() 函数不一致

Browser inconsistency with the leaflet::addMapPane() function

r

leaflet

r-markdown

blogdown