You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Leaflet中Font-Awesome风格自定义图标聚类显示问题

问题:自定义图标叠加与聚类标记冲突解决

我在制作地图时遇到以下问题:需要使用makeAwesomeIcon不支持的自定义图标,且同一位置存在多个数据点,需借助leaflet的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))

# 将第2-5行的经纬度修改为与第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,
                    ))

内容的提问来源于stack exchange,提问作者Samuel Thompson

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.15 19:28:09