如何在R语言Leaflet的Overlay Groups图层控件中添加副标题

我想在R语言创建的Leaflet地图的Overlay Groups控件框中显示副标题，实现类似如下的分组效果：
数据类型1

⬞ Data1

⬞ Data2

数据类型2

⬞ Data3

尝试过一些JS层分组控件但不适用于R，想知道如何用R实现。以下是我的基础代码：

library(leaflet)
library(leaflet.esri)
library(htmlwidgets)
library(sf)

data1 <- data.frame(Lon=c(1,2), Lat=c(0.5,0.8))
data2 <- data1+0.1
data3 <- data1+0.2

map <- leaflet() %>%
  addTiles(group="OpenStreetMap", options = tileOptions(opacity=0.5)) %>%
  addEsriBasemapLayer(esriBasemapLayers$Imagery, group = "Satellite") %>%
  
  addMarkers(lng=data1$Lon, lat=data1$Lat, group="Data1") %>%
  addMarkers(lng=data2$Lon, lat=data2$Lat, group="Data2") %>%
  addMarkers(lng=data3$Lon, lat=data3$Lat, group="Data3") %>%
  
  addLayersControl(baseGroups=c("OpenStreetMap", "Satellite"), overlayGroups=c("Data1", "Data2", "Data3"), position="topleft", options=layersControlOptions(collapsed=F)) %>%  
  
  htmlwidgets::onRender("
        function() {
            $('.leaflet-control-layers-overlays').prepend('<b>TITLE 2</b>');
            $('.leaflet-control-layers-list').prepend('<b>TITLE 1</b>');
        }
    ")

map

解决方案 #

可以通过htmlwidgets::onRender结合DOM操作，在Overlay控件的对应图层前插入分组标题，并调整样式实现需求。修改后的代码如下：

library(leaflet)
library(leaflet.esri)
library(htmlwidgets)
library(sf)

data1 <- data.frame(Lon=c(1,2), Lat=c(0.5,0.8))
data2 <- data1+0.1
data3 <- data1+0.2

map <- leaflet() %>%
  addTiles(group="OpenStreetMap", options = tileOptions(opacity=0.5)) %>%
  addEsriBasemapLayer(esriBasemapLayers$Imagery, group = "Satellite") %>%
  
  addMarkers(lng=data1$Lon, lat=data1$Lat, group="Data1") %>%
  addMarkers(lng=data2$Lon, lat=data2$Lat, group="Data2") %>%
  addMarkers(lng=data3$Lon, lat=data3$Lat, group="Data3") %>%
  
  addLayersControl(baseGroups=c("OpenStreetMap", "Satellite"), 
                   overlayGroups=c("Data1", "Data2", "Data3"), 
                   position="topleft", 
                   options=layersControlOptions(collapsed=F)) %>%  
  
  htmlwidgets::onRender("
    function(el, x) {
      // 插入数据类型1标题到Data1前
      $('label:contains(\"Data1\")').before('<div style=\"font-weight:bold; margin-top:8px; margin-left:4px;\">数据类型1</div>');
      // 插入数据类型2标题到Data3前
      $('label:contains(\"Data3\")').before('<div style=\"font-weight:bold; margin-top:8px; margin-left:4px;\">数据类型2</div>');
      // 移除默认的Overlays标题（可选）
      $('.leaflet-control-layers-overlays').children('span:first').remove();
    }
  ")

map

关键说明 #

• 通过jQuery选择器label:contains("Data1")定位到对应图层的标签元素，用before()方法在其前方插入分组标题
• 用内联样式font-weight:bold设置加粗，margin调整间距，让标题与图层项区分开
• 如果不需要默认的“Overlays”标题，可以通过$('.leaflet-control-layers-overlays').children('span:first').remove()移除

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