R Leaflet实现无背景的船舶航向自定义图标绘制

我明白你想要的效果——用Glyphicon的"tag"图标作为船舶标记，去掉默认的背景圆，并且让图标根据对地航向（COG）旋转。之前的代码问题在于两点：一是makeAwesomeIcon默认会添加背景标记，二是直接传向量给iconRotate不会为每个标记单独设置旋转角度。下面是两种可行的解决方案：

方案一：修改AwesomeIcon参数（最简单） #

通过设置markerColor = "transparent"去掉背景，同时用lapply为每个船舶生成单独的旋转图标：

首先准备数据（先把COG转为数值型避免字符串问题）：

x <- structure(list(boatName = c("Conti Benguela", "Sunny Bay", "Sunny Horizon", "FMT URLA", "Qi Xiang 22", "STI Solidarity"), 
                    lat = c(37.115365, 38.4772017, 14.632, 56.80515, 51.31172, -2.2783283), 
                    lon = c(15.2682183, -8.7888783, -79.5806667, 7.601885, -143.5678933, 46.6328383), 
                    cog = c("16", "331", "182", "21", "288", "72")), 
               row.names = c(NA, 6L), class = "data.frame")
x$cog <- as.numeric(x$cog)

然后生成图标列表并绘制地图：

library(leaflet)

# 为每个船舶生成无背景的旋转tag图标
shipIcons <- lapply(x$cog, function(angle) {
  makeAwesomeIcon(
    icon = "tag",
    library = "glyphicon",
    markerColor = "transparent",  # 完全移除背景标记
    iconColor = "darkred",        # 自定义图标颜色，可按需修改
    iconRotate = angle            # 按COG值旋转图标
  )
})

# 绘制地图
leaflet(x) %>%
  addTiles() %>%
  addAwesomeMarkers(
    lng = ~lon,
    lat = ~lat,
    icon = shipIcons,
    popup = ~boatName
  )

方案二：自定义HTML图标（更灵活） #

如果需要更多样式控制，可以直接用HTML生成纯图标，配合CSS确保无背景：

library(leaflet)
library(htmltools)

# 自定义图标生成函数
shipIconCustom <- function(angle, color = "darkred") {
  icon(
    iconUrl = NULL,
    html = sprintf('<span class="glyphicon glyphicon-tag" style="color:%s; transform: rotate(%ddeg); font-size:18px;"></span>', color, angle),
    iconSize = c(20, 20),
    className = "no-bg-marker"
  )
}

# 添加CSS移除默认标记的背景和边框
tags$style(HTML("
  .no-bg-marker {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
"))

# 生成图标列表
shipIconsCustom <- lapply(x$cog, shipIconCustom)

# 绘制地图
leaflet(x) %>%
  addTiles() %>%
  addMarkers(
    lng = ~lon,
    lat = ~lat,
    icon = shipIconsCustom,
    popup = ~boatName
  )

关键说明： #

• 两种方案都解决了背景标记的问题：方案一通过transparent直接隐藏背景，方案二用CSS彻底移除默认样式。
• 必须用lapply遍历每个COG值生成图标，因为makeAwesomeIcon和自定义icon函数都只能处理单个角度，无法直接接受向量参数。

内容的提问来源于stack exchange，提问作者Dhiraj