R Leaflet标记弹出窗口中的图像 [英] 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'>"))

但是，以上内容会生成不好的图像(图像中是旧的?).查看源代码使其看起来像应该正常工作..不确定此处出了什么问题.

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 提供了一些用于存储leaflet的功能地图位于用户指定的文件夹中，因此我们可以使用它们来创建我们的工作地图，

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: mapview 的开发版本现在具有专用功能:

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

• popupImage()用于嵌入本地或远程图像
• popupGraph()用于嵌入基于晶格， ggplot2 或基于 htmlwidgets 的图

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

mapview 的开发版本可以安装:

The development version of mapview can be installed with:

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

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