在 R 传单中添加不透明度滑块

Question

如何在 R 传单应用程序中添加一个滑块，以控制特定图层的不透明度？对于这个应用程序，我不想使用闪亮（这里建议：adding sliders in R leaflet app），因为它必须导出到一个独立的 html 页面。

在下面的示例中，我有两个 CartoDB 图层，我想控制其中一个图层的不透明度，比如底图图层。

Leaflet.js - Set Opacity to LayerGroup with Slider 包含如何添加此类滑块的有用信息。另外，我发现 htmlwidgets::onRender 函数可用于将 JavaScript 代码添加到 htmlwidget。

所以我尝试了以下代码，但它不起作用。滑块可见，但不执行任何操作。此外，拖动滑块时地图会平移。

library(leaflet)
leaflet() %>% 
  addProviderTiles(provider = "CartoDB.PositronNoLabels", group="Basemap", layerId = 123) %>% 
  addTiles("http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png", group="Labels") %>% 
  addLayersControl(baseGroups="Basemap", overlayGroups = "Labels") %>% 
  addControl(html="<input id=\"slide\" type=\"range\" min=\"0\" max=\"1\" step=\"0.1\" value=\"1\" onchange=\"updateOpacity(this.value)\">") %>%
  onRender("
     function updateOpacity(value) {
         this.getLayer(123).opacity(value);
     }
  ")

谁能帮帮我？提前致谢！

Answer 1

这个很棘手，我承认我不确定下面的解决方案是正确的处理方式，但它确实对我有用。

library(leaflet)

leaflet() %>% 
  addProviderTiles(provider = "CartoDB.PositronNoLabels", 
                   group = "Basemap",
                   layerId = 123) %>% 
  addTiles("http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png",
           group = "Labels") %>% 
  addLayersControl(baseGroups = "Basemap",
                   overlayGroups = "Labels") %>% 
  addControl(html = "<input id=\"slide\" type=\"range\" min=\"0\" max=\"1\" step=\"0.1\" value=\"1\">") %>%
  onRender("function(el,x,data){
                     var map = this;
                     var evthandler = function(e){
                        var labels = map.layerManager._byGroup.Labels;
                        Object.keys(labels).forEach(function(el){
                             labels[el]._container.style.opacity = +e.target.value;
                             });
                     };
              $('#slide').on('mousemove',L.DomEvent.stopPropagation);
              $('#slide').on('input', evthandler);
              }
          ")