R传单标记弹出窗口中的图像 [英] Image in R Leaflet marker popups

问题描述

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

I'm trying to make my leaflet map generated by R include images in the popups for markers in a dynamic way - e.g.,

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'>"))

但是，上面会生成一个坏图像(图像中的 ye olde ?).查看源代码使其看起来应该工作....不确定这里有什么问题.

The above generates an bad image (ye olde ? in an image), however. Viewing source makes it look like it should work....not sure what's wrong here.

{"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":[]}

推荐答案

如果你可以使用 svg 而不是 jpg 它应该可以工作.查看我的答案这里.

If you can use svg instead of jpg it should work. See my answer here.

编辑/更新:
可以嵌入非本地的图像文件.考虑以下情况，我们在其中添加了来自 Wikipedia 的 R 标志.

EDIT/UPDATE:
It is possible to embed image files that are not local. Consider the following, where we add the R logo from Wikipedia.

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 存储在创建小部件时创建的临时文件夹中.因此，我们无法事先知道将图像保存在哪里.@Spacedman 提供了一些用于存储 的函数传单 映射在用户指定的文件夹中，因此我们可以使用它们来创建我们的工作图这样

For local files it is a bit more tricky as leaflet, or better the underlying htmltools, is expecting relative paths to the specified image file from the location of the index.html which is being stored in a temporary folder that is being created on widget creation. Hence we cannot know in advance where to save our images beforehand. @Spacedman provided some functions for storing leaflet maps in a user specified folder, so we can use those to create our working map like this

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 文件.

We save the index.html in the same folder as the png so now if we open the index.html in a browser the popup should render the png just fine. This should also work with jpg files.

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

Note that this will still not show the desired popup behaviour in the RStudio viewer. There may be a possible workaround for this also by encoding the images to base64. I will dig deeper into this when I find the time.

更新 2:ma​​pview 的开发版本现在有专门的功能:

UPDATE 2: The development version of mapview now has dedicated functions for this:

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

• popupImage() for embedding local or remote images
• popupGraph() for embedding lattice, ggplot2 or htmlwidgets based plots

ma​​pview的开发版可以安装:

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

这篇关于R传单标记弹出窗口中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！