带图标的addAwesomeMarkers函数的传单图例 [英] Leaflet legend for addAwesomeMarkers function with icons

问题描述

是否可以使用正确的颜色和图标为addAwesomeMarkers函数创建传单图例.例如，在下面的地图中，我想创建一个在代码下给出的图例.

Is there any way to create a leaflet legend for addAwesomeMarkers function with right colors and icons. For example, in the following map, I would like to create a legend given under the code.

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])

真诚地感谢您的时间和精力.

You time and effort to answer is cordially appreciated.

推荐答案

在 answer ，即通过插入地图控件并使用html定义控件.与其他答案不同，图标使用css样式创建图像(一个元素创建标记形状，另一个元素包含图标，div和span).图像来自分配给每个元素的css类:

There is a way you can do this, referenced in this answer, and that is by inserting a map control and define the control with html. Unlike the other answer, the icons use css styling to create the image (one element creates the marker shape, the other contains the icon, a div and a span). The images come from the css classes assigned to each element:

• div设置标记的背景颜色
• 跨度(对于字体超赞，为<i>)，设置图标和图标的颜色(尽管对于字体超赞，图标的颜色似乎没有变化)

• the div sets the background color of the marker
• the span (or for font-awesome, the <i>), sets the icon and the icons color (though for font-awesome, it doesn't seem that color changes of the icon)

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

Each icon library uses different classes and slightly different conventions.

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

Given the method referenced in the other answer, and the properties of the icons, I built a basic function that displays an icon legend.

我确实设法构建了一个功能，该功能可以从三个受支持的传单图标库(ion，awesome，glyphicon)中的每个定位图标，但是每个定位属性的定位属性略有不同，这仍然会导致较小的定位给我的问题.为了使示例代码更简短，我只包括了字体真棒的定位，而其他字符的定位则采用类似的方法.如果需要，我可以发布该功能的版本并支持所有这三个功能.

该函数仅创建html，您需要将其放置在控件中(它是基本的，可以轻松添加一些参数来对其进行自定义):

The function only creates the html, you'll need to place it in a control still (it is basic, a few parameters could easily be added to customize it):

# 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>")
}

此外，还需要添加控件(请注意，它从图标列表中获取了图例的名称，因此我从您的原始名称中修改了这些名称，但其他所有内容都应相同):

And, all together with adding the control (note that it takes the names for the legend from the icon list, so I've modified these from your original, but everything else should be the same):

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函数的传单图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！