在 R Leaflet 中实现 groupedLayerControl 插件的问题

问题描述

我正在尝试为传单地图实现插件扩展 groupedLayerControl。您可以在我正在使用的代码下方看到（目前无法使用）。我试图将覆盖层放在不同的组类别中。我是 javascript 新手，所以我真的无法确定我做错了什么。代码没有给我地图中的组图层。有人可以帮我吗？

registerPlugin <- function(map,plugin) {
  map$dependencies <- c(map$dependencies,list(plugin))
    map
  }


Value1 = c(12,43,54,34,23,77,44,22)
Value2 = c(6,5,2,7,6,4,3)
Lat = c(51.1,51.6,57.3,52.4,56.3,54.3,60.4,49.2)
Lon = c(5,-3,-2,-1,3,-5,0)



leaflet() %>%
  addProviderTiles(providers$CartoDB.Positron,group = "Alpha") %>%
  registerPlugin(groupedLayerControlPlugin) %>%
  
  onRender("function(el,x) {
        var baseLayers = {
            'Alpha': this.layerManager.getLayerGroup('Alpha'),};

        var groupedOverlays = {
            'Group 1': {
                'Value1': this.layerManager.getLayerGroup('Value1'),},'Group 2': {
                'Value2': this.layerManager.getLayerGroup('Value2'),}
        };

        var Options = {
          groupCheckBoxes: true
        };

        console.log(L.control.groupedLayers);
        L.control.groupedLayers(baseLayers,groupedOverlays,Options).addTo(this);
    }") %>%
  
  addCircles(lat=Lat,lng=Lon,radius = Value1*1000,group = "Value1") %>%
    
  addCircles(lat=Lat,radius = Value2*10000,group = "Value1")

解决方法

这是一个老问题，但我想我会使用您的数据添加一个完整的工作示例。在提供的示例中，您只有一个问题，即您需要至少一个 group = "Value2" 参数来表示 leaflet::addCircles() 之一。您示例中的两个 addCircles() 都显示 group = "Value1"）。

在下面的代码中，除了叠加层的 groupedlayercontrol 之外，我还添加了一个额外的基础层来演示基础层分组。

library(dplyr)
library(leaflet)
library(htmlwidgets)

Value1 = c(12,43,54,34,23,77,44,22)
Value2 = c(6,5,2,7,6,4,3)
Lat = c(51.1,51.6,57.3,52.4,56.3,54.3,60.4,49.2)
Lon = c(5,-3,-2,-1,3,-5,0)

urlf <- 'https://raw.githubusercontent.com/ismyrnow/leaflet-groupedlayercontrol/gh-pages/dist/%s'
download.file(sprintf(urlf,'leaflet.groupedlayercontrol.min.js'),'C:/Temp/L.Control.groupedlayer.js',mode="wb")
download.file(sprintf(urlf,'leaflet.groupedlayercontrol.min.css'),'C:/Temp/L.Control.groupedlayer.css',mode="wb")

groupedLayerControlPlugin <- htmltools::htmlDependency(
  name = 'ctrlGrouped',version = "1.0.0",src = c(file = normalizePath('C:/Temp')),script = "L.Control.groupedlayer.js",stylesheet = "L.Control.groupedlayer.css"
)

registerPlugin <- function(map,plugin) {
  map$dependencies <- c(map$dependencies,list(plugin))
  map
}


leaflet() %>%
  addProviderTiles("Stamen.Watercolor",group = "Beta") %>%
  addProviderTiles(providers$CartoDB.Positron,group = "Alpha") %>%

  registerPlugin(groupedLayerControlPlugin) %>%

  
  onRender("function(el,x) {
         var groups = {
            Value1: this.layerManager.getLayerGroup('Value1'),Value2: this.layerManager.getLayerGroup('Value2')  
            };
        var baseLayers = {
            'Alpha': this.layerManager.getLayerGroup('Alpha'),'Beta': this.layerManager.getLayerGroup('Beta')
        };

        var groupedOverlays = {
            'all value groups': {
           'Value 1' : groups.Value1,'Value 2' : groups.Value2}
        };

        var Options = {
          groupCheckboxes: true
        };

        console.log(L.control.groupedLayers);
        L.control.groupedLayers(baseLayers,groupedOverlays,Options).addTo(this);
    }")  %>% addCircles(lat=Lat,lng=Lon,radius = Value1*1000,group = "Value1") %>%
  
  addCircles(lat=Lat,radius = Value2*10000,group = "Value2")