我有一个闪亮的应用程序,涉及在地图上绘制大量线条。我想使用旋转器向用户显示渲染正在进行中。大多数闪亮的方法都不起作用,因为它们只在数据被发送到leaflet时显示旋转器,而不是在leaflet渲染时显示。Leaflet.Spin插件看起来很有前途,但我一直在努力使其工作。我一直在遵循的示例是
https://gist.github.com/jcheng5/c084a59717f18e947a17955007dc5f92
使用polylineDecorator作为示例的leaflet插件和leafletProxy
我该如何正确触发js事件并在渲染线条(例如此示例中的圆形)时显示Leaflet.Spin?谢谢!
更新:现在Spinner可以工作,但是每个添加的单独圆形都会触发事件,因此如果圆形数量减少,则Spinner无法正确关闭。
library(shiny)
library(leaflet)
library(htmltools) # for htmlDependency
library(htmlwidgets) # for onRender
# https://gist.github.com/jcheng5/c084a59717f18e947a17955007dc5f92
# https://dev59.com/NK_la4cB1Zd3GeqPoic2polylinedecorator-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)
invokeMethod()
而不是leaflet js的layeradd
有更好的方法来完成这个任务。 - rbasaaddCircles()
有1000个元素,则有1000个图层。Leafletjslayeradd
方法被触发了1000次。clearShapes()
将删除这1000个图层。Leafletjslayerremove
被触发1000次,创建1000个旋转器实例。然后,您画了500个圆,只清除了500个旋转器。通过仅观察那一个不可见的形状,我们只会有一个旋转器在运行。 - rbasaleaflet.extras2
。如果你想看一下,可以访问https://github.com/radbasa/leaflet.extras2/tree/spin - rbasaleaflet.extras2
中。https://github.com/trafficonese/leaflet.extras2 - rbasa