R Leaflet层控制与easybutton

Question

我想使用传单 easyButton plugin 来控制显示的层，而不是内置的层控件。不幸的是，我不懂 JS，并且花了几个小时试图理解 leafletJS 文档以找到执行此操作的正确方法。

这是我正在尝试的代码的精简版。自警报发生以来，onClick 显然有效，但显示的图层没有任何变化。

每个按钮应该只显示一层和 none 其他层（而不是允许一次看到多个层）。

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

statemap <- states(cb = T)


statemap <- statemap %>% 
  filter(GEOID < 60) %>% 
  shift_geometry(geoid_column = "GEOID") %>% 
  st_transform("EPSG:4326")

leaflet(statemap) %>% 
  addPolygons(weight = 1.25, color = "#000000", opacity = 1,#444444
              fillColor = "green",
              layerId = "green") %>% 
   addPolygons(weight = 1.25, color = "#000000", opacity = 1,#444444
              fillColor = "red",
              layerId = "red") %>% 
   addPolygons(weight = 1.25, color = "#000000", opacity = 1,#444444
              fillColor = "yellow",
              layerId = "yellow") %>% 
  addEasyButtonBar(easyButton(icon = "fa-globe", title = "Drinking Water Standard",
                onClick = JS("function(btn, map) {
                             alert(\"Green\");
                             map.clearLayers();
                             map.addLayer('green');
                }")), 
    easyButton(icon = "fa-crosshairs", title = "Groundwater Standard",
                onClick = JS("function(btn, map) {
                             alert(\"Yellow\");
                             map.clearLayers();
                             map.addLayer('yellow');
                }")),
    easyButton(icon = "fa-globe", title = "Surface Water Standard",
                onClick = JS("function(btn, map) {
                             alert(\"Red\");
                             map.clearLayers();
                             map.addLayer('red');
                }")))

Answer 1

您可以在 addLayersControl() 函数中使用 baseGroups 参数的现有功能并将 onClick 事件映射到简易按钮。

最终的 onRender() 功能只是隐藏了这一层控制面板，因此人们可以使用简单的按钮。

工作示例：https://rpubs.com/Jumble/leaflet_easybuttons_layer_control

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

statemap <- states(cb = T)


statemap <- statemap %>% 
  filter(GEOID < 60) %>% 
  shift_geometry(geoid_column = "GEOID") %>% 
  st_transform("EPSG:4326") 

leaflet(statemap) %>% 
  addPolygons(weight = 1.25, color = "#000000", opacity = 1,#444444
              fillColor = "green",
              group = "green") %>% 
  addPolygons(weight = 1.25, color = "#000000", opacity = 1,#444444
              fillColor = "red",
              group = "red") %>% 
  addPolygons(weight = 1.25, color = "#000000", opacity = 1,#444444
              fillColor = "yellow",
              group = "yellow") %>% 
  addLayersControl(baseGroups = c("green", "red", "yellow"), options=layersControlOptions(collapsed = F)) %>%
  addEasyButtonBar(easyButton(icon = "fa-globe", title = "Drinking Water Standard",
                              onClick = JS("function(btn, map) {
                     
                             let layerControlElement = document.getElementsByClassName('leaflet-control-layers')[0];
                             layerControlElement.getElementsByTagName('input')[0].click();

                }")), 
                   easyButton(icon = "fa-crosshairs", title = "Groundwater Standard",
                              onClick = JS("function(btn, map) {

                             let layerControlElement = document.getElementsByClassName('leaflet-control-layers')[0];
                             layerControlElement.getElementsByTagName('input')[1].click();

                }")),
                   easyButton(icon = "fa-globe", title = "Surface Water Standard",
                              onClick = JS("function(btn, map) {
                              
                             let layerControlElement = document.getElementsByClassName('leaflet-control-layers')[0];
                             layerControlElement.getElementsByTagName('input')[2].click();

                }"))) %>%
  htmlwidgets::onRender("
    function(el, x) {
        document.getElementsByClassName('leaflet-control-layers')[0].style.display = 'none';
    }")

R Leaflet层控制与easybutton

R Leaflet layers control with easybutton

r

r-leaflet