R语言leaflet如何实现addControl()控件仅在指定图层显示

leaflet::addControl()本身没有提供关联图层的参数，要实现控件仅在指定图层显示，直接通过注入原生JS监听图层切换事件、动态控制控件DOM的显隐状态即可，不需要依赖额外的R包。

核心逻辑 #

• 给需要联动的自定义控件设置唯一的CSS类名，方便快速定位到对应的DOM元素
• 监听地图的图层切换事件，每次切换时获取当前激活的图层名称
• 判断当前激活图层是否在允许控件显示的图层列表中，匹配则显示控件，否则隐藏
• 地图初始化完成后执行一次显隐判断，避免首次加载时控件状态不匹配

修改后可直接运行的代码 #

library(tidyverse)
library(leaflet)
library(sf)
library(tigris)

statemap <- states(cb = T, resolution = "20m")
statemap <- statemap %>% 
  filter(GEOID < 60) %>% 
  st_transform("EPSG:4326")

leaflet() %>% 
  addPolygons(data = statemap,  weight = 0.5, color = "#000000", opacity = 1,
              fillColor = "red", fillOpacity = 0.7, smoothFactor = 0.5,
              group = "red") %>% 
  addPolygons(data = statemap,  weight = 0.5, color = "#000000", opacity = 1,
              fillColor = "yellow", fillOpacity = 0.7, smoothFactor = 0.5,
              group = "yellow") %>% 
  addPolygons(data = statemap,  weight = 0.5, color = "#000000", opacity = 1,
              fillColor = "blue", fillOpacity = 0.7, smoothFactor = 0.5,
              group = "blue") %>% 
  addLayersControl(baseGroups = c("red", "yellow", "blue"),
                   options=layersControlOptions(collapsed = F)) %>% 
  # 给目标控件添加专属类名，用于JS定位
  addControl("This should only show on RED", position = "bottomright", className = "red-layer-control") %>% 
  # 注入JS逻辑实现联动
  htmlwidgets::onRender("
    function(el, x) {
      const map = this;
      // 配置需要显示该控件的图层名称，支持多个
      const visibleLayers = ['red'];
      const controlNode = el.querySelector('.red-layer-control');

      // 控件显隐切换方法
      function updateControlVisibility(activeLayer) {
        controlNode.style.display = visibleLayers.includes(activeLayer) ? 'block' : 'none';
      }

      // 监听底图切换事件
      map.on('baselayerchange', function(e) {
        updateControlVisibility(e.name);
      });

      // 地图加载完成后初始化控件状态
      map.whenReady(function() {
        // 获取当前激活的底图图层名
        const activeLayer = Object.values(map._layers).find(layer => {
          return layer.options?.group && layer._container && map._container.contains(layer._container)
        }).options.group;
        updateControlVisibility(activeLayer);
      })
    }
  ") %>% 
  setView(zoom = 3.5, lat =38, lng = -100)

自定义调整说明 #

• 若需要控件在多个图层显示，直接修改JS代码中visibleLayers数组的内容即可，例如要在red、blue两个图层都显示，改为const visibleLayers = ['red', 'blue'];
• 若要联动的是叠加图层（即overlayGroups中配置的图层），将监听事件从baselayerchange替换为overlayadd和overlayremove，对应判断图层的添加/移除状态即可
• 若页面有多个需要联动的控件，给每个控件设置不同的className，分别编写对应的显隐判断逻辑即可，互不干扰

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