如何为Leaflet中空多边形轮廓添加对应图例？

要实现和中空多边形轮廓匹配的图例（即图例项仅显示边框、无填充色），可以通过自定义CSS样式修改leaflet图例的默认显示效果，具体实现如下：

解决方案：自定义图例CSS样式 #

1. 给addLegend指定一个自定义类名，用于绑定样式规则
2. 用htmltools::tags$style编写CSS，将图例的填充色块设为透明，同时保留对应颜色的边框

修改后的完整代码 #

library(sf)
library(leaflet)
library(tidyverse)
library(htmltools)

demo(nc, ask = FALSE, echo = FALSE)

nc_pal <- colorFactor(palette = "inferno", domain = nc$NAME)
nc <- st_transform(nc, 4326)

# 定义图例的自定义CSS样式
legend_custom_style <- tags$style(
  ".outline-legend .legend i {
    background-color: transparent !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 0 !important;
  }"
)

leaflet(nc) %>%
  addProviderTiles(provider = "Esri.WorldTopoMap", group = "Esri.WorldTopoMap") %>%
  addPolygons(
    data = nc,
    group = "nc",
    color = ~ nc_pal(NAME),
    fillOpacity = 0,
    weight = 2 # 调整轮廓线宽度，和图例边框视觉统一
  ) %>%
  addLegend(
    data = nc,
    group = "nc",
    pal = nc_pal,
    values = ~ NAME,
    className = "outline-legend" # 绑定自定义样式类
  ) %>%
  addControl(legend_custom_style, position = "topright") # 加载自定义样式

关键说明 #

• 使用pal和values参数替代手动指定colors，更简洁且避免重复调用调色板
• CSS规则中通过!important强制覆盖leaflet的默认图例样式，确保透明填充和边框生效
• 调整addPolygons的weight参数，让地图上的轮廓线与图例边框宽度一致，视觉更协调

如果需要更个性化的图例形态，也可以手动构建HTML元素作为自定义图例，再通过addControl添加到地图中。

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