R中使用组层的小叶组层控制

u0njafvf  于 2023-01-28  发布在  其他
关注(0)|答案(3)|浏览(106)

我对在R中创建的LeafletMap中使用leaflet-groupedlayercontrol很感兴趣,并且一直在关注这个gist。我可以成功添加JS插件(如下面的工作示例所示),但我的问题是如何引用R中已经创建的标记组?

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

#Download the JS and CSS     
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")
    
#Add the dependency
    ctrlGrouped <- 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
    }
#create a basic map
map <- leaflet() %>%
        setView(-122.38, 47.56, zoom = 12) 
     
 #add the plugin and then tell it to do stuff within onRender()              
      map <- map %>% registerPlugin(ctrlGrouped) %>% 
 #I can create some points within onRender() but I want to refer to existing R objects if possible.   
        onRender("function(el, x) {
    var basemaps = {
      Grayscale: L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href=http://www.openstreetmap.org/copyright>OpenStreetMap</a>'
      })
    };
    basemaps.Grayscale.addTo(this);   // default base layer
    var groups = {
      highschool: new L.LayerGroup(),
      elementary: new L.LayerGroup()
    };
L.marker([47.577541, -122.3843482]).bindPopup('West Seattle HS').addTo(groups.highschool);
    L.marker([47.5661429, -122.3840636]).bindPopup('Seattle Lutheran HS').addTo(groups.highschool);      
    L.marker([47.581081, -122.3871535]).bindPopup('Lafayette ES').addTo(groups.elementary);
    L.marker([47.566556, -122.3964651]).bindPopup('Genesee Hill ES').addTo(groups.elementary);
    // Overlay layers are grouped
    var groupedOverlays = {
      'all schools': {
        'High School locations': groups.highschool,
        'Elementary locations': groups.elementary
      }
    };
        var options = {
      groupCheckboxes: true
        };
        L.control.groupedLayers(null, groupedOverlays, options).addTo(this);
    }") 
      
map

我希望引用现有的R对象,使用addLegend(),控制最初可见的内容等,而不是在onRender()中创建所有标记。如果不太想控制分组层,代码看起来更像这样:

map <- leaflet() %>%
      addCircles(lng =highschool$Longitude,lat=highschool$Latitude,weight = 1, radius = highschool$units*2 , color = ~pal(a_palette), popup = popup_hs, group="highschool" )%>%
      addCircles(lng =elementary$Longitude,lat=elementary$Latitude,weight = 1, radius = misc$units*2 , color = ~pal(a_palette), popup = popup_el, group="elementary" )%>%
      addLegend("bottomleft", colors = palette_color_RSEI ,group = "highschool",labels = c("Lowest ","","","Highest"),
                title = "Highschool size", opacity = 1) %>%
      addLegend("bottomleft", colors = a_palette ,group = "elementary",labels = c("Lower % of population", "", "","","","Higher % of population"),
                title = "Elementary size", opacity = .5) %>%
      addLayersControl(overlayGroups = c("highschool", "elementary"))%>%
      hideGroup(c(   "highschool"))

如有任何指导,将不胜感激。

cld4siwp

cld4siwp1#

看起来你也可以在javascript for循环中引用htmlwidgets::onRender()中的R对象。对我来说,关键是要意识到R对象在onRender()中有点标记。例如,R向量df$longitude是一个JSON对象,在onRender()中为data.longitude。
下面是我的问题中的一个例子,我将一个R对象中的4个标记添加到onRender()中的leafletMap,然后使用leaflet插件leaflet-groupedlayercontrol。我的真实的世界Map有更多的组,所以这可能不是最整洁的方法。

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

df<-tibble::tibble(lat= c(47.577541, 47.5661429,47.581081,47.566556),
                   lng = c(-122.3843482,-122.3840636,-122.3871535,-122.3964651),
                   name= c("West Seattle HS","Seattle Lutheran HS","Lafayette ES","Genesee Hill ES"),
                   grouping=c("groups.highschool","groups.highschool","groups.elementary","groups.elementary"))

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

ctrlGrouped <- htmltools::htmlDependency(
  name = 'ctrlGrouped',
  version = "1.0.0",
  # works in R and Shiny - download js/css files, then use this:
  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() %>% addTiles() %>%
  registerPlugin(ctrlGrouped) %>%
  fitBounds(min(df$lng), min(df$lat), max(df$lng), max(df$lat)) %>%
  onRender("
        function(el, x, data) {
         var groups = {
          highschool: new L.LayerGroup(),
          elementary: new L.LayerGroup()
        };
          for (var i = 0; i < data.lng.length; i++) {
            var label = JSON.stringify(data.name[i])
            var mygroup = data.grouping[i]
            var marker =  L.marker([data.lat[i], data.lng[i]]).bindPopup(label).addTo(eval(mygroup));
          }
        var groupedOverlays = {
          'all schools': {
            'High School locations': groups.highschool,
            'Elementary locations': groups.elementary
          }
        };
            var options = {
          groupCheckboxes: true,
          collapsed:false
            };
            L.control.groupedLayers(null, groupedOverlays, options).addTo(this);
        }
      ", data = df)
txu3uszq

txu3uszq2#

它看起来类似于:

map <- leaflet() %>%
    addCircles(...) %>%
    addCircles(...) %>%
    addLegend(...) %>%
    addLegend(...) %>%
    registerPlugin(ctrlGrouped) %>%
    onRender("function(el, x) {
        var groupedOverlays = {
            'all schools': {
                'High School locations': groups.highschool,
                'Elementary locations': groups.elementary
            }
        };
        var options = {
            groupCheckboxes: true
        };
        L.control.groupedLayers(null, groupedOverlays, options).addTo(this);
    }")
wwwo4jvm

wwwo4jvm3#

显示L.tileLayer的示例,改编自SEAnalyst答案。

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

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

ctrlGrouped <- htmltools::htmlDependency(
  name = 'ctrlGrouped',
  version = "1.0.0",
  # works in R and Shiny - download js/css files, then use this:
  src = c(file = normalizePath('C:/grouped_layer_controls')),
  script = "L.Control.groupedlayer.js",
  stylesheet = "L.Control.groupedlayer.css"
)

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

leaflet() %>% 
  addTiles() %>%
  setView(lng = -122.3903184, lat = 47.5724059, zoom = 15) |>

  leaflet::addCircles(lng = -122.3903184,
                      lat = 47.5724059,
                      radius = 20,
                      fillColor = 'red',
                      fillOpacity = 1,
                      group = "r") |>

  leaflet::addCircles(lng = -122.390,
                      lat = 47.572,
                      radius = 20,
                      fillColor = 'blue',
                      fillOpacity = 1,
                      group = "b") |>

  leaflet::addLayersControl(baseGroups = c("r", "b"),
                            options = leaflet::layersControlOptions(collapsed = FALSE)) |>

  registerPlugin(ctrlGrouped) %>%

  htmlwidgets::onRender(

    "function(el, x, data) {

      var basemaps = {
        Stadia_AlidadeSmoothDark: 
      
 L.tileLayer( 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', 
{
      attribution: '&copy; <a href=\"\">BLAM-O</a>'
      }),
    Streets: 
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}),
    CartoDB_Positron: 
      L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {})
  };

  var groupedOverlays = {
    \"Map Type\": {
      \"Stadia\": basemaps.Stadia_AlidadeSmoothDark,
      \"Streets\": basemaps.Streets,
      \"Positron\": basemaps.CartoDB_Positron
    }
  };

  var options = {
    groupCheckboxes: false,
    exclusiveGroups: [\"Map Type\"],
    collapsed:false
  };

  L.control.groupedLayers(null, groupedOverlays, options).addTo(this);

  basemaps.Streets.addTo(this);

}")

相关问题