Question

有没有办法为addAwesomeMarkers函数创建一个带有正确颜色和图标的传单图例。例如，在下面的地图中，我想创建一个在代码下给出的图例。

library(leaflet)

IconSet <- awesomeIconList(
  ship   = makeAwesomeIcon(icon= 'ship', markerColor = 'green', iconColor = 'white', library = "fa"),
  pirate = makeAwesomeIcon(icon= 'fire', markerColor = 'blue', iconColor = 'white', library = "fa")
)

# Some fake data
df <- sp::SpatialPointsDataFrame(
  cbind(
    (runif(20) - .5) * 10 - 90.620130,  # lng
    (runif(20) - .5) * 3.8 + 25.638077  # lat
  ),
  data.frame(type = factor(
    ifelse(runif(20) > 0.75, "pirate", "ship"),
    c("ship", "pirate")
  ))
)

leaflet(df) %>% addTiles() %>%
  # Select from oceanIcons based on df$type
  addAwesomeMarkers(icon = ~IconSet[type])

您需要时间和精力回答。

Answer 1

有一种方法可以执行此操作，在此answer中引用，即插入地图控件并使用html定义控件。与其他答案不同，图标使用css样式来创建图像（一个元素创建标记形状，另一个元素包含图标，div和span）。图像来自分配给每个元素的CSS类：

div设置标记的背景颜色
跨度（或者字体很棒，<i>），设置图标和图标颜色（虽然对于字体很棒，它似乎不会显示图标的颜色变化）

每个图标库使用不同的类和略有不同的约定。

鉴于其他答案中引用的方法以及图标的属性，我构建了一个显示图标图例的基本功能。

我确实设法构建了一个函数来定位三个支持的传单图标库（离子，字体 - 真棒，glyphicon）中的每一个的图标，但是每一个都有略微不同的定位属性，这仍然导致微小的定位问题对我来说。为了缩短示例代码的利益，我只包括了对字体很棒的定位，其他人的定位遵循类似的方法。如果需要，我可以发布该功能的版本，并支持这三种功能。

该功能只创建html，你需要将它放在一个控件中（它是基本的，可以很容易地添加一些参数来定制它）：

# legend html generator:
markerLegendHTML <- function(IconSet) {

    # container div:
    legendHtml <- "<div style='padding: 10px; padding-bottom: 10px;'><h4 style='padding-top:0; padding-bottom:10px; margin: 0;'> Marker Legend </h4>"

    n <- 1
    # add each icon for font-awesome icons icons:
    for (Icon in IconSet) {
        if (Icon[["library"]] == "fa") {
        legendHtml<- paste0(legendHtml, "<div style='width: auto; height: 45px'>",
                             "<div style='position: relative; display: inline-block; width: 36px; height: 45px' class='awesome-marker-icon-",Icon[["markerColor"]]," awesome-marker'>",
                               "<i style='margin-left: 8px; margin-top: 11px; 'class= 'fa fa-",Icon[["icon"]]," fa-inverse'></i>",
                             "</div>",
                             "<p style='position: relative; top: -20px; display: inline-block; ' >", names(IconSet)[n] ,"</p>",
                           "</div>")    
        }
        n<- n + 1
    }
    paste0(legendHtml, "</div>")
}

并且，除了添加控件之外（请注意，它从图标列表中获取了图例的名称，因此我已经从原始版本修改了这些名称，但其他所有内容都应该相同）：

library(leaflet)

# legend html generator:
markerLegendHTML <- function(IconSet) {
    # container div:
    legendHtml <- "<div style='padding: 10px; padding-bottom: 10px;'><h4 style='padding-top:0; padding-bottom:10px; margin: 0;'> Marker Legend </h4>"

    n <- 1
    # add each icon for font-awesome icons icons:
    for (Icon in IconSet) {
        if (Icon[["library"]] == "fa") {
        legendHtml<- paste0(legendHtml, "<div style='width: auto; height: 45px'>",
                             "<div style='position: relative; display: inline-block; width: 36px; height: 45px' class='awesome-marker-icon-",Icon[["markerColor"]]," awesome-marker'>",
                               "<i style='margin-left: 8px; margin-top: 11px; 'class= 'fa fa-",Icon[["icon"]]," fa-inverse'></i>",
                             "</div>",
                             "<p style='position: relative; top: -20px; display: inline-block; ' >", names(IconSet)[n] ,"</p>",
                           "</div>")    
        }
        n<- n + 1
    }
    paste0(legendHtml, "</div>")
}

IconSet <- awesomeIconList(
  "Regular Ship"   = makeAwesomeIcon(icon= 'ship', markerColor = 'green', iconColor = 'white', library = "fa"),
  "Pirate Ship" = makeAwesomeIcon(icon= 'fire', markerColor = 'blue', iconColor = 'white', library = "fa")
)

# Some fake data
df <- sp::SpatialPointsDataFrame(
  cbind(
    (runif(20) - .5) * 10 - 90.620130,  # lng
    (runif(20) - .5) * 3.8 + 25.638077  # lat
  ),
  data.frame(type = factor(
    ifelse(runif(20) > 0.75, "Pirate Ship", "Regular Ship"),
    c("Regular Ship", "Pirate Ship")
  ))
)


leaflet(df) %>% addTiles() %>% 
  addAwesomeMarkers(icon = ~IconSet[type]) %>% 
  addControl(html = markerLegendHTML(IconSet = IconSet), position = "bottomleft")

addAwesomeMarkers功能的传单传奇与图标

1 个答案: