在 Leaflet R 中将图标添加到图层控件 [英] Add Icons to Layer Control in Leaflet R

问题描述

如何将图标添加到包 Leaflet R 中的图层控件?.我用以下代码制作了图标:

rojos <- makeAwesomeIcon(icon='ion-waterdrop', library='ion', markerColor = 'red', iconColor = 'white')verdes <- makeAwesomeIcon(icon='ion-waterdrop', library='ion', markerColor = 'green', iconColor = 'white')

我用下面的代码制作了地图

agua <-leaflet(options = leafletOptions(zoomControl = TRUE,最小缩放 = 10，最大缩放 = 17，拖动 = TRUE))%>%addTiles()%>%setView(-101.145,19.793, 10) %>%# MAPAS 基地addProviderTiles(providers$OpenStreetMap.BlackAndWhite, group = "Calles") %>%addProviderTiles(providers$Esri.WorldImagery, group = "Imagen satelital") %>%#########################################################################################################添加GeoJSONv2(jsonlite::toJSON(rojo),标记类型=标记"，markerIcons = rojos,popupProperty='popup',labelProperty='NOMBRE DEL CUERPO DE AGUA',group = "Agua contaminada") %>%添加GeoJSONv2(jsonlite::toJSON(verde),标记类型=标记"，markerIcons = verdes,popupProperty='popup',labelProperty='NOMBRE DEL CUERPO DE AGUA',group = "Agua no contaminada") %>%#POLIGONOSaddPolygons(data = cuitzeo, col="green",fillColor="Transparent", group = "Cuenca de Cuitzeo",重量 = 3，不透明度 = 1)%>%addPolygons(data = pol_mor, col="#000000",fillColor="透明",group = "Límite Municipal Morelia",重量 = 2，不透明度 = 1，填充不透明度 = .8) %>%# 控制德卡帕斯添加图层控件(baseGroups = c("Calles","Imagen satelital"),overlayGroups = c("Agua contaminada","Agua no contaminada","Cuenca de Cuitzeo","Límite Municipal Morelia"),选项 = 图层控制选项(折叠 = F))

结果如下:

我想获得这种风格的东西，但要使用我的图标:

解决方案

有一种相对简单的方法可以做到这一点，它使用 r 中的小册子的功能，并且不依赖于自定义 javascript 控件:在您的组中包含 html 标记名字.

不要命名一个组:组 A"，而是命名它:

<i class='glyphicon glyphicon-glass icon-black '></i></div>A组

例如，您可以基于图标名称以编程方式相当容易地创建此名称.每个名称只有几处变化:颜色、库(fa、ion、glyphicon)、图标类(例如:fa-glass、ion-checkmark、glyphicon-fire)和显示的组名.

这种方法会创建一个看起来像您想要的图层控件:

为了使事情更容易，将名称存储在命名列表/向量中，并在附加层时使用它来定义组，并在定义哪些组应该在控件中时再次使用它.这是一个基本示例:

库(传单)图标集 <- awesomeIconList("游轮" = makeAwesomeIcon(icon= 'glass', markerColor = 'blue', iconColor = 'black', library = "glyphicon"),"海盗船" = makeAwesomeIcon(icon= 'fire', markerColor = 'black', iconColor = 'white', library = "glyphicon"))# 一些假数据df <- sp::SpatialPointsDataFrame(绑定((runif(20) - .5) * 10 - 90.620130, # lng(runif(20) - .5) * 3.8 + 25.638077 # 纬度),数据帧(类型=因子(ifelse(runif(20) > 0.75, "海盗船", "游轮"),c(游轮"，海盗船"))))# 组名:groups <- c("Cruise Ship" <- "<div style='position: relative; display: inline-block' class='awesome-marker-icon-blue awesome-marker'><i class='glyphicon glyphicon-glass icon-black '></i></div>Cruise Ship","海盗船" <- "<div style='position: relative; display: inline-block' class='awesome-marker-icon-black awesome-marker'><i class='glyphicon glyphicon-fireicon-white '></i></div>海盗船")传单(df) %>% addTiles() %>%addAwesomeMarkers(icon = ~IconSet[type], group=~groups[type]) %>%添加图层控件(overlayGroups = 组，options = layersControlOptions(collapsed = FALSE))

同样，如果处理几个图层或动态图层，创建一个获取图标数据并生成相应名称以供以后使用的函数应该不会太难，而不是对上面的名称进行硬编码.

无论如何，这应该可以用作在控件中实现图标的一种方式.

how to add icons to the layer control in package Leaflet R?. I made icons with the following code:

rojos <- makeAwesomeIcon(icon='ion-waterdrop', library='ion', markerColor = 'red', iconColor = 'white')
verdes <- makeAwesomeIcon(icon='ion-waterdrop', library='ion', markerColor = 'green', iconColor = 'white')

and with the following code I made the map

agua <-leaflet(options = leafletOptions(zoomControl = TRUE,
                                        minZoom = 10, maxZoom = 17,
                                        dragging = TRUE))%>%
  addTiles()%>% 
  setView(-101.145,19.793, 10) %>%
  # MAPAS BASE
  addProviderTiles(providers$OpenStreetMap.BlackAndWhite, group = "Calles") %>%
  addProviderTiles(providers$Esri.WorldImagery, group = "Imagen satelital") %>% 
  ###########################################################################################################
addGeoJSONv2(
  jsonlite::toJSON(rojo),
  markerType="marker",
  markerIcons = rojos,
  popupProperty='popup', 
  labelProperty='NOMBRE DEL CUERPO DE AGUA',
  group = "Agua contaminada") %>%
  addGeoJSONv2(
    jsonlite::toJSON(verde),
    markerType="marker",
    markerIcons = verdes,
    popupProperty='popup', 
    labelProperty='NOMBRE DEL CUERPO DE AGUA',
    group = "Agua no contaminada") %>%
  #POLIGONOS
  addPolygons(data = cuitzeo, col="green",fillColor="Transparent", group = "Cuenca de Cuitzeo",
              weight = 3, opacity = 1)%>%
  addPolygons(data = pol_mor, col="#000000",fillColor="Transparent",  
              group = "Límite Municipal Morelia",
              weight = 2, opacity = 1, fillOpacity = .8) %>%
  # CONTROL DE CAPAS
  addLayersControl(
    baseGroups = c("Calles","Imagen satelital"),
    overlayGroups = c("Agua contaminada","Agua no contaminada","Cuenca de Cuitzeo","Límite Municipal Morelia"),
    options = layersControlOptions(collapsed = F)
  )

the result of this is the following:

I would like to get something of this style, but with my icons:

解决方案

There is a relatively easy way to do this that uses the functionality of leaflet in r and doesn't rely on custom javascript controls: include html tags in your group names.

Instead of naming a group: "Group A", name it:

<div style='position: relative; display: inline-block' class='awesome-marker-icon-blue awesome-marker'>
   <i class='glyphicon glyphicon-glass icon-black '></i>
</div>
Group A

You could create this name programmatically fairly easily based on an icon name for example. Only a few things change in each name: the colors, the library (fa, ion, glyphicon), the icon class (eg: fa-glass, ion-checkmark, glyphicon-fire), and the displayed group name.

This approach creates a layer control that looks like what you want:

To make things easier, store the names in a named list/vector and use that to define the groups when appending layers and again when defining which groups should be in the control. Here's a basic example:

library(leaflet)

IconSet <- awesomeIconList(
  "Cruise Ship"   = makeAwesomeIcon(icon= 'glass', markerColor = 'blue', iconColor = 'black', library = "glyphicon"),
  "Pirate Ship" = makeAwesomeIcon(icon= 'fire', markerColor = 'black', iconColor = 'white', library = "glyphicon")
)

# 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", "Cruise Ship"),
    c("Cruise Ship", "Pirate Ship")
  ))
)

# group names:
groups <- c("Cruise Ship" <- "<div style='position: relative; display: inline-block' class='awesome-marker-icon-blue awesome-marker'><i class='glyphicon glyphicon-glass icon-black '></i></div>Cruise Ship",
            "Pirate Ship" <- "<div style='position: relative; display: inline-block' class='awesome-marker-icon-black awesome-marker'><i class='glyphicon glyphicon-fire icon-white '></i></div>Pirate Ship")


leaflet(df) %>% addTiles() %>%
  addAwesomeMarkers(icon = ~IconSet[type], group=~groups[type]) %>% 
  addLayersControl(                                                                                                           
    overlayGroups = groups,
    options = layersControlOptions(collapsed = FALSE)
  )

Again, if working a few layers, or dynamic layers, it shouldn't be too hard to create a function that takes the icon data and makes a corresponding name to be used later, as opposed to hard coding the names above.

Regardless, this should be usable as a way to implement icons in controls.

这篇关于在 Leaflet R 中将图标添加到图层控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！