无法让 Leaflet.Spin 插件在 R Shiny 中工作

Question

我有一个闪亮的应用程序，它涉及在地图上绘制大量线条。我想使用微调器向用户显示渲染正在进行中。大多数闪亮的方法都不起作用，因为它们只在数据发送到传单时显示微调器，而不是在传单渲染时显示。Leaflet.Spin 插件看起来很有前途，但我一直在努力让它工作。我一直在遵循的例子是

https://gist.github.com/jcheng5/c084a59717f18e947a17955007dc5f92

以 polylineDecorator 为例的传单插件和传单代理

当线条（本例中的圆圈）渲染时，如何让 js 事件正确触发并显示 Leaflet.Spin？谢谢！

更新：微调器现在可以工作，但事件会为添加的每个单独的圈子触发，因此如果圈子数量减少，微调器不会正确关闭。

library(shiny)
library(leaflet)
library(htmltools) # for htmlDependency
library(htmlwidgets) # for onRender

# https://gist.github.com/jcheng5/c084a59717f18e947a17955007dc5f92
# https://stackoverflow.com/questions/52846472/leaflet-plugin-and-leafletproxy-with-polylinedecorator-as-example
spinPlugin <- htmlDependency(
  "spin.js", 
  "2.3.2",
  src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2"),
  script = "spin.min.js") # there's no spin.css

leafletspinPlugin <- htmlDependency(
  "Leaflet.Spin", 
  "1.1.2",
  src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/Leaflet.Spin/1.1.2"),
  script = "leaflet.spin.min.js")

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

# Note: Ctrl-Shift-J opens the javascript console in the browser
spin_event <- "function(el, x) {
  console.log('spin event added'); 
  var mymap = this;
  mymap.on('layerremove', function(e) {
    console.log('layerremove fired');
    mymap.spin(true);
  });
  mymap.on('layeradd', function(e) {
    console.log('layeradd fired');
    mymap.spin(false); 
  });
}"

dlat <- 1 / 111000 * 100 # degrees per metre

ui <- fluidRow(
  tags$h2("Using Leaflet.Spin in Shiny"),
  actionButton("plotbutton", label = "Show Spinner While Adding Markers"),
  leafletOutput("map")
)

server <- function(input, output, session) {
  output$map <- renderLeaflet({
    cat("renderLeaflet\n")
    leaflet() %>%
      addTiles() %>%
      setView(175.322, -37.789, zoom = 17) %>% 
      registerPlugin(spinPlugin) %>% 
      registerPlugin(leafletspinPlugin) %>% 
      onRender(spin_event) %>% 
      clearShapes() %>% # initialise spinner
      addCircles(
        lng = 175.322,
        lat = -37.789,
        radius = 0,
        opacity = 0
      )
  })

  observeEvent(input$plotbutton, {
    cat("input$plotbutton\n")
    n <- ceiling(runif(1) * 10000)
    leafletProxy("map") %>%
      clearShapes() %>% 
      addCircles(
        lng = 175.322 + (runif(n) * 2 - 1) * dlat * 6,
        lat = -37.789 + (runif(n) * 2 - 1) * dlat * 1.5,
        radius = dlat * runif(n) * dlat
      )
  })
}

shinyApp(ui = ui, server = server)

Answer 1

晚了一年，但我一直在寻找一种方法来制作传单的繁忙微调器。

我意识到您的原始代码会在clearShapes(). 如果下面addCircles()的圈数少于 x 个，则将有旋转实例仍在运行。

我的解决方案是使用一个虚拟层来监视 Javascript。在下面的示例中，一个带有layerId = 'spinnerMarker'. 要开始leafletproxy更新，删除removeShape(layerId = 'spinnerMarker')触发 JS 的那个层layerremove。然后添加数据圈。通过添加一个圆圈layerId = 'spinnerMarker'来触发 JS 来结束更新layeradd。

在 JS 中，被添加或删除的层被检查e.layer.options.layerId == 'spinnerMarker'以运行mymap.spin()。

这样就只有一个自旋实例在运行。

library(shiny)
library(leaflet)
library(htmltools) # for htmlDependency
library(htmlwidgets) # for onRender

# https://gist.github.com/jcheng5/c084a59717f18e947a17955007dc5f92
# /sf/ask/3699253071/
spinPlugin <- htmlDependency(
  "spin.js", 
  "2.3.2",
  src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2"),
  script = "spin.min.js") # there's no spin.css

leafletspinPlugin <- htmlDependency(
  "Leaflet.Spin", 
  "1.1.2",
  src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/Leaflet.Spin/1.1.2"),
  script = "leaflet.spin.min.js")

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

# Note: Ctrl-Shift-J opens the javascript console in the browser
spin_event <- "function(el, x) {
  console.log('spin event added'); 
  var mymap = this;
  mymap.on('layerremove', function(e) {
    console.log('layerremove fired');
    if (e.layer.options.layerId == 'spinnerMarker') {
      console.log(e.layer.options.layerId);
      mymap.spin(true);
    }
  });
  mymap.on('layeradd', function(e) {
    console.log('layeradd fired');
    if (e.layer.options.layerId == 'spinnerMarker') {
      console.log(e.layer.options.layerId);
      mymap.spin(false);
    }
  });
}"

dlat <- 1 / 111000 * 100 # degrees per metre

ui <- fluidRow(
  tags$h2("Using Leaflet.Spin in Shiny"),
  actionButton("plotbutton", label = "Show Spinner While Adding Markers"),
  leafletOutput("map")
)

server <- function(input, output, session) {
  output$map <- renderLeaflet({
    cat("renderLeaflet\n")
    leaflet() %>%
      addTiles() %>%
      setView(175.322, -37.789, zoom = 17) %>% 
      registerPlugin(spinPlugin) %>% 
      registerPlugin(leafletspinPlugin) %>% 
      onRender(spin_event) %>% 
      clearShapes() %>% # initialise spinner
      addCircles(     # invisible placeholder
        lng = 175.322,
        lat = -37.789,
        radius = 0,
        opacity = 0,
        layerId = 'spinnerMarker'   # identifier, can be found in js: e.layer.options.layerId
      )
  })
  
  observeEvent(input$plotbutton, {
    cat("input$plotbutton\n")
    n <- ceiling(runif(1) * 10000)
    leafletProxy("map") %>%
      removeShape(layerId = 'spinnerMarker') %>%    # this triggers mymap.spin(true)
      clearShapes() %>% 
      addCircles(
        lng = 175.322 + (runif(n) * 2 - 1) * dlat * 6,
        lat = -37.789 + (runif(n) * 2 - 1) * dlat * 1.5,
        radius = dlat * runif(n) * dlat
      ) %>%
      addCircles(         # invisible placeholder to trigger the mymap.spin(false)
        lng = 175.322,
        lat = -37.789,
        radius = 0,
        opacity = 0,
        layerId = 'spinnerMarker'   # identifier, can be found in js: e.layer.options.layerId
      )
  })
}

shinyApp(ui = ui, server = server)