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

在R小册子

1 个答案: