在R中自定义传单图例时如何添加三角形？

Question

我从这篇文章开始，@Hallie Swan 的代码效果很好，但我想将图例中的最后一个形状更改为空心三角形。

我的印象是，纯粹用 CSS 绘制一个空心三角形是很有挑战性的。然后我发现如果我可以在 R 中的自定义 CSS 部分内联一个 svg 标签（绘制一个空心三角形），它可能会起作用。但我失败了。

这是来自原始帖子的代码，不包括闪亮的部分：

library(leaflet)

colors <- c("red", "white", "blue", "white", "blue", "red")
labels <- c("filled_square", "empty_square", "big_square", "empty_circle", "filled_circle", "big_circle")
sizes <- c(10, 20, 30, 10, 20, 30)
shapes <- c("square", "square", "square", "circle", "circle", "circle")
borders <- c("red", "blue", "black", "blue", "blue", "black")

addLegendCustom <- function(map, colors, labels, sizes, shapes, borders, opacity = 0.5){
  
  make_shapes <- function(colors, sizes, borders, shapes) {
    shapes <- gsub("circle", "50%", shapes)
    shapes <- gsub("square", "0%", shapes)
    paste0(colors, "; width:", sizes, "px; height:", sizes, "px; border:3px solid ", borders, "; border-radius:", shapes)
  }
  make_labels <- function(sizes, labels) {
    paste0("<div style='display: inline-block;height: ", 
           sizes, "px;margin-top: 4px;line-height: ", 
           sizes, "px;'>", labels, "</div>")
  }
  
  legend_colors <- make_shapes(colors, sizes, borders, shapes)
  # I added my modification here, see below
  legend_labels <- make_labels(sizes, labels)
  
  return(addLegend(map, colors = legend_colors, labels = legend_labels, opacity = opacity))
}

leaflet() %>% addTiles() %>% 
  addLegendCustom(colors, labels, sizes, shapes, borders)

我尝试过的：

基于原始代码，我尝试修改

legend_colors

向量中的最后一个元素，如下所示：

legend_colors[length(legend_colors)] <- "url('data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='20' width='30'><polygon points='15,3 25,15 5,15' style='fill:transparent;stroke:black;stroke-width:3' /></svg>')"

但是当我将上述行添加到原始脚本中后，没有显示三角形。三角形应该出现的地方是空的：

目前的屏幕截图：

根据另一篇文章中的信息，对于我试图修改的最后一个图例形状，由传单在引擎盖下构建的CSS代码应该是（如果我错了，请纠正我）：

        {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='20' width='30'><polygon points='15,3 25,15 5,15' style='fill:transparent;stroke:black;stroke-width:3' /></svg>");
    opacity: 0.5;
}

Answer 1

我想通了。解决方案是将图像的 Base64 数据 URI 馈送到 R 中。我首先为空心三角形创建了一个 png 图像，将其保存为我想要的大小，然后使用 这个免费服务 来获取 Base64 数据 URI。

这是R代码（仅针对我正在修改的部分）：

  legend_colors[length(legend_colors)] <- "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAABQJJREFUWEfNl3tMW1Ucx3+37eU6WtAYEx5qENQo5TUL1uoSCmSOP4UARZ1DHoNtmdkf/AEtZPERQkv4w0yNQsLTmEUeKeJ8zWVAiRpbLH/wKJAgSHzQGP+BVMbt6bnXnKZn6Qjr7QOXNSEklHv76ff8Pt9zLgP32Yu5z3jgqIDofcRYv+BRAcXKcfv6WIHo9ccAgKSzH7hz1EnFCiQHACyTyT4BgF1BEFoBwP+3aCOLBUgWSCUDANYD6TwJAO4AjBANVCxANIlrer1ex/N8nMPh+EoQhNOxpBQtkB9GoVCUYIxvulyuqzs7O5xOp6tgWVaLEJqLFioaIHINXa6Fmpoa1fDw8BcAwJSVlRkmJye3AEB3L4HoIJ9TKpU9KysrgykpKV4yT+vr66q8vLw3EEKvYYw/jwYq0oTI/5OfBADY7Ojo+K29vX2W53klGWCO4zwtLS2nuru7HwKApwCADwx+2DUQKRBN5/20tLRLS0tLPRzHKYJsEnd3d0GtVp9zu93vAMC7kaYUCRCdG/LN10ZGRm4aDIYVhNAxuVzuVxwhJOM4bq+vr++5xsbGFwCAVMJfgVTDqoFIgKjmXxcWFp6w2WxDGON4hmHuWA5RFMk997Va7dn5+Xky7K9HklK4QFTzk4Ig3LDb7WMFBQV/I4Ti5HL5HUAYY4ZlWX56evrxkpKSV1iW1SGE7OFChQMUrPlSbW1t/ODg4ARCSEWX6mAjY4xlLMt6Kioqqq1W6x8AoD1KIDK0PplMdkGlUn28vLw8kJqa6hVFUX5wuSgYWTaGYXwbGxuq3NzcM16v9zTG+Go4UFIJUc0TieadnZ2/mkymH4jmLMuGHNLAgHuMRuPLXV1dDwMA2ecka0AKiGp+JT09/a3FxcWeuLg4v+YME/pSUfSPlujxeES1Wn3e7Xa/JwjC21Iphbor1fxpovnY2NiNysrK1WDNpXZzWgMDAwPHGxoayHZCUvozVA2EAqKaf0t285mZmeHDNJeCIvMkiuItnU531ul0XgOAV0OldDcgqvkpURSv2+320fz8/H8QQuxBzaWAAjXgnZ2dfUyv15MaeBEh9PPdoA4DooNMfi/V19dz/f39k6E0DwPKXwNVVVWG8fFx0tzPRwJENb+YkJDwkcvlGkhOTg6puRQQrYHNzU1lTk5OjdfrPYMx/uwwqIMJ0XQeJJpbLJb11tbWsDSXgqI10NbWdtJsNj8SGHDyUEB0vN32B4Go5h9mZGRcWFhYIJqz4WguBRRcA1lZWee3t7c7BEG4DAD+FaHXBwNRzZ8BgBWr1fp9eXn5Gs/zD7AsG/Z5JhQYrYGhoaG8urq6lwJnpt+DayAYiGp+vbi4WDs1NRWV5mEkRbYVfw3Mzc19AwBVwbNEgajmpaIofudwOEY1Gk1UmksB0Rqw2WyPFhUVlSkUihM+n+8nChWsOFmy5aamJkVvb++XsWgeBpS/Bqqrqw2jo6PkOS4/GIhqfikxMfGKy+XqT0pKQqF2c6kPlHqf1sDW1pYyOzu7huf5NzHGn5IBp2cdcijfMpvNa0aj8ce9vT3J3VzqQ6XeJwMeHx//r8lkKrFYLEkAkA4At+gMfaDRaBqdTid5Rvdrfo9exF4hMzPz4urqqgUALpPj5nGE0C/Nzc2u0tLSDZ7nOYVCcSSaS3wp0efzkYeC/YmJiWd7enqeAIBcktA0ABQF2lLqfPR/BUcOe0Sqyf8AKIk/HsRz7OEAAAAASUVORK5CYII=')"
  
  legend_colors[length(legend_colors)] <- gsub("=')", 
                                               "='); width:36px; height:36px", 
                                               legend_colors[length(legend_colors)])

请注意，第二部分是附加更多 CSS 代码来控制元素的大小。只需参考 HTML 源代码即可根据需要调整大小。

传说现在是什么样子