javascript - 在 R 传单中添加不透明度 slider

Question

如何在 R 传单应用程序中添加 slider ，以控制特定图层的不透明度？对于此应用程序，我不想使用 shiny(此处建议:adding sliders in R leaflet app)，因为它必须导出到独立的 html 页面。

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

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

所以我尝试遵循代码，但没有用。 slider 可见，但不执行任何操作。此外，拖动 slider 时 map 会平移。

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);
              }
          ")