Shiny + Leaflet - 是否可以根据组向弹出窗口添加图像？

Question

目前，我有一个闪亮的应用程序，可以创建物种点的传单地图。当您将鼠标悬停在某个点上时，物种名称会同时显示为标签和弹出窗口。

leafletProxy("map", data = filteredData()) %>%
  clearMarkers() %>%
  addCircleMarkers(popup = ~as.character(species),
                   label = ~as.character(species), 
                   radius = 6,
                   stroke = TRUE,
                   weight = 1,
                   fillOpacity = 5,
                   fillColor = ~pal(species),
                   color = "black")

我已经阅读了如何将图像添加到弹出窗口，但这会将相同的图像添加到所有弹出窗口。我想要发生的是，一旦点击一个点，就会出现一个带有物种名称和图片的弹出窗口（本地文件或网络链接，以最简单的为准） - 这样每个组（物种）都有自己的相关图片。

这可能吗？

Answer 1

是的，如果您希望每个组都有自己的图像，您需要创建一个包含图像 URL 的新列。重要的部分是在弹出窗口中使用 HTML img 标签。

请看下面的演示。

data <- data.frame(
    lng = c(-1,0,1,2),
    lat = c(-1,0,1,2),
    label = c("p1","p2","p3","p4"),
    # some random images I picked up from google images
    # it can be both local or remote
    image_link = c(
        "https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png",
        "https://store-images.s-microsoft.com/image/apps.18496.14408192455588579.aafb3426-654c-4eb2-b7f4-43639bdd3d75.2c522ca4-9686-4ee2-a4ac-cdbfaf92c618?mode=scale&q=90&h=1080&w=1920",
        "https://mk0jobadderjftub56m0.kinstacdn.com/wp-content/uploads/stackoverflow.com-300.jpg",
        # row number 4 use the same link as row number 1
        "https://mk0jobadderjftub56m0.kinstacdn.com/wp-content/uploads/stackoverflow.com-300.jpg"
    )
)


library(leaflet)

leaflet(data = data) %>%
    addTiles() %>%
    addCircleMarkers(
        lng = ~lng,
        lat = ~lat,
        popup = ~paste0(
            "<img src='",image_link,"' width='50px' height='50px'>"
        )
    )

Answer 2

您也可以从这里复制代码：

https://github.com/abenedetti/bioNPS