以 Font-Awesome 风格聚集自定义图标

Question

上一个话题： https://stackoverflow.com/questions/75526891/custom-icons-in-font-awesome-style-r-leaflet?newreg=026c290b4abe44f58cc3d9a9bb490e39

我一直在使用我的地图解决同样的问题，并使用 makeAwesomeIcon 无法使用的自定义图标。然而，在我的工作中，我在同一位置有多个数据点，因此希望使用传单中的 clusterOptions 对它们进行聚类，并且在这种情况下，addAwesomeMarkers() 项似乎被 AddMarkers() 项覆盖。

我修改了下面上一个主题中的可重现代码，对前 5 个数据点进行聚类以进行测试，并将 clusterOptions 添加到地图中。

我需要能够在标记顶部显示图标，而不是覆盖它们。

library(dplyr)
library(fontawesome) 

data <- head(quakes,20)
groups <- rep(c(1,2,3,4),each=5)
data <- as.data.frame(cbind(data,groups))

# Update lat and long of rows 2-5 to match row 1
data[2:5, c("lat", "long")] <- data[1, c("lat", "long")]

markers <- awesomeIconList(
  `1` = makeAwesomeIcon(
    icon="empty",
    markerColor = "white",
    library="fa"
  ),
  `2` = makeAwesomeIcon(
    icon="empty", 
    markerColor ="pink",
    library="fa"
  ),
  `3`  = makeAwesomeIcon(
    icon="empty", 
    markerColor ="red",
    library="fa"
  ),
  `4` = makeAwesomeIcon(
    icon="empty", 
    markerColor ="blue",
    library="fa"
  )
)

icons <- iconList(
  `1` = makeIcon(
    iconUrl = "https://www.svgrepo.com/show/503906/ice-cream.svg",
    iconWidth = 31*215/230,
    iconHeight = 20, 
    iconAnchorY = 33,
    iconAnchorX = 31*215/230/2
  ),
  `2` = makeIcon(
    iconUrl = "https://www.svgrepo.com/show/39019/donut.svg",
    iconWidth = 31*215/230,
    iconHeight = 20, 
    iconAnchorY = 33,
    iconAnchorX = 31*215/230/2
  ),
  `3` = makeIcon(
    iconUrl = "https://www.svgrepo.com/show/500813/coffee.svg",
    iconWidth = 31*215/230,
    iconHeight = 20, 
    iconAnchorY = 33,
    iconAnchorX = 31*215/230/2
  ),
  `4` = makeIcon(
    iconUrl = "https://www.svgrepo.com/show/111427/shawarma.svg",
    iconWidth = 31*215/230,
    iconHeight = 20, 
    iconAnchorY = 33,
    iconAnchorX = 31*215/230/2
  )
)

data %>% leaflet() %>% addTiles() %>% 
  addAwesomeMarkers(lat = ~lat, lng = ~long, popup = ~as.character(mag), icon = ~ markers[groups],
                    clusterOptions = markerClusterOptions(
                      spiderfyOnMaxZoom = TRUE,    
                      showCoverageOnHover = TRUE,
                      zoomToBoundsOnClick = TRUE,   
                      spiderfyDistanceMultiplier = 2.0,     
                    )) %>% 
  addMarkers(lat = ~lat, lng = ~long, popup = ~as.character(mag), icon = ~ icons[groups],       
                    clusterOptions = markerClusterOptions(
                      spiderfyOnMaxZoom = TRUE,    
                      howCoverageOnHover = TRUE, 
                      zoomToBoundsOnClick = TRUE,   
                      spiderfyDistanceMultiplier = 2.0,
                    ))

Answer 1

最终找到了解决此问题的方法，即使用 makeIcon() 函数中内置的“阴影”功能将图钉和图标组合成单个图标。

以下示例：

syringe = makeIcon(
  iconUrl = https://www.svgrepo.com/show/482909/syringe.svg,
  iconWidth = 30,
  iconHeight = 20, 
  iconAnchorY = 35,
  iconAnchorX = 15,
  shadowUrl = https://www.svgrepo.com/show/512650/pin-fill-sharp-circle-634.svg,
  shadowWidth = 50,           
  shadowHeight = 40,          
  shadowAnchorY = 40,         
  shadowAnchorX = 20,
  popupAnchorX = 0.1,
  popupAnchorY = -40
)