R Leaflet 标记弹出窗口中的图像

Question

我正在尝试让 R 生成的传单地图以动态方式在标记的弹出窗口中包含图像 - 例如，

library(leaflet)


pts <- data.frame(Latitude = 30, Longitude = 30, file = "thing")

leaflet() %>%
  addTiles %>%
  addCircleMarkers(data = pts, lng =~Longitude, lat = ~Latitude,
                   popup =~ paste0("<img src = './", file, ".jpg'>"))

但是，上面生成的图像很差（图像中的旧图像？）。查看源代码使其看起来应该工作....不确定这里有什么问题。

{"lineCap":null,"lineJoin":null,"clickable":true,"pointerEvents":null,
"className":"","stroke":true,"color":"#03F","weight":5,"opacity":0.5,"fill":true,"
fillColor":"#03F","fillOpacity":0.2,"dashArray":null},null,null,
"<img src = './thing.jpg'>"]}],"limits":{"lat":[30,30],"lng":[30,30]}},"evals":[]}

Answer 1

如果您可以使用 svg 而不是 jpg，它应该可以工作。请参阅我的回答 here。

EDIT/UPDATE:
可以嵌入非本地的图像文件。考虑以下内容，我们在其中添加来自维基百科的 R 徽标。

library(leaflet)

pts <- data.frame(Latitude = 30, Longitude = 30, file = "thing")

file <- 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Rlogo.png/274px-Rlogo.png'

leaflet() %>%
  addTiles %>%
  addCircleMarkers(data = pts, lng =~Longitude, lat = ~Latitude,
                   popup = paste0("<img src = ", file, ">"))

这很好用。

对于本地文件，它有点棘手，因为 leaflet，或者更好的是底层 htmltools，期望从 index.html 的位置到指定图像文件的相对路径它存储在创建小部件时创建的临时文件夹中。因此，我们无法提前知道将图像保存在何处。提供了一些用于在用户指定的文件夹中存储 leaflet 地图的功能，因此我们可以使用这些功能来创建我们的工作地图，如下所示

library (leaflet)

saveas <- function(map, file){
  class(map) <- c("saveas",class(map))
  attr(map,"filesave")=file
  map
}

print.saveas <- function(x, ...){
  class(x) = class(x)[class(x)!="saveas"]
  htmltools::save_html(x, file=attr(x,"filesave"))
}

file <- '/path/to/folder/image.png'

pts <- data.frame(Latitude = 30, Longitude = 30, file = "thing")

m <- leaflet() %>%
  addTiles %>%
  addCircleMarkers(data = pts, lng =~Longitude, lat = ~Latitude,
                   popup = paste0("<img src = ", file, ">"))

saveas(m, "/path/to/folder/index.html")

我们将 index.html 保存在与 png 相同的文件夹中，所以现在如果我们在浏览器中打开 index.html，弹出窗口应该可以很好地呈现 png .这也适用于 jpg 个文件。

请注意，这仍然不会在 RStudio 查看器中显示所需的弹出行为。也可以通过将图像编码为 base64 来解决此问题。我会在有时间的时候深入研究这个问题。

更新 2： mapview 的开发版本现在有专门的功能：

popupImage() 用于嵌入本地或远程图像
popupGraph() 用于嵌入基于 lattice、ggplot2 或 htmlwidgets 的绘图

开发版mapview可以安装：

devtools::install_github("environmentalinformatics-marburg/mapview", ref = "develop"

Answer 2

我想在上述讨论中补充一点，您必须双引号路径才能使其与本地资源一起使用（即“'/path/to/folder/image.png'”）

R Leaflet 标记弹出窗口中的图像

Image in R Leaflet marker popups

r

rstudio

leaflet