我做错了什么,或为什么下面的例子不起作用?我正在尝试使用选项leafletProxy()
在R Shiny应用程序中使用iconCreateFunction
制作传单标记集群插件。该插件是否无法使用leafletProxy()
向地图添加自定义图标标记?
当我按下第一个按钮并在下面的示例中缩小时,我收到错误消息:
TypeError:this._group.options.iconCreateFunction不是函数
我尝试从markercluster文档中复制the original example:
library(shiny)
library(dplyr)
library(leaflet)
ui <- fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
actionButton(inputId = "my_button1",
label = "Use leafletProxy()"),
actionButton(inputId = "my_button2",
label = "Use renderLeaflet()")
),
mainPanel(
leafletOutput(
outputId = "map",
width = "100%",
height = "300px"
)
)
)
)
server <- function(input, output, session) {
some_data <- data.frame(
"lon"=c(4.905167,4.906357,4.905831),
"lat"=c(52.37712,52.37783,52.37755),
"number_var"=c(5,9,7),
"name"=c("Jane","Harold","Mike"),
stringsAsFactors = F
)
output$map <- renderLeaflet({
return(
leaflet(data = some_data[0,]) %>%
addProviderTiles(providers$CartoDB.Positron) %>%
fitBounds(
min(some_data$lon),
min(some_data$lat),
max(some_data$lon),
max(some_data$lat)
) %>%
addMarkers(
lng = ~lon,
lat = ~lat,
clusterOptions = markerClusterOptions(
iconCreateFunction = JS(paste0("function(cluster) {",
"return new L.DivIcon({",
"html: '<div style=\"background-color:rgba(77,77,77,0.5)\"><span>' + cluster.getChildCount() + '</div><span>',",
"className: 'marker-cluster'",
"});",
"}"))
)
)
)
})
observeEvent(input$my_button1,{
leafletProxy(mapId = "map",
session = session,
data = some_data) %>%
addProviderTiles(providers$CartoDB.Positron) %>%
clearMarkerClusters() %>%
clearMarkers() %>%
fitBounds(
min(some_data$lon),
min(some_data$lat),
max(some_data$lon),
max(some_data$lat)
) %>%
addMarkers(
lng = ~lon,
lat = ~lat,
clusterOptions = markerClusterOptions(
iconCreateFunction = JS(paste0("function(cluster) {",
"console.log('Here comes cluster',cluster); ",
"return new L.DivIcon({",
"html: '<div style=\"background-color:rgba(77,77,77,0.5)\"><span>' + cluster.getChildCount() + '</div><span>',",
"className: 'marker-cluster'",
"});",
"}"))
)
)
})
observeEvent(input$my_button2,{
output$map <- renderLeaflet({
leaflet(data = some_data) %>%
addProviderTiles(providers$CartoDB.Positron) %>%
fitBounds(
min(some_data$lon),
min(some_data$lat),
max(some_data$lon),
max(some_data$lat)
) %>%
addMarkers(
lng = ~lon,
lat = ~lat,
clusterOptions = markerClusterOptions(
iconCreateFunction = JS(paste0("function(cluster) {",
"console.log('Here comes cluster',cluster); ",
"return new L.DivIcon({",
"html: '<div style=\"background-color:rgba(77,77,77,0.5)\"><span>' + cluster.getChildCount() + '</div><span>',",
"className: 'marker-cluster'",
"});",
"}"))
)
)
})
})
}
shinyApp(ui = ui, server = server)
包装版本:
dplyr_0.7.4
leaflet_1.1.0
shiny_1.0.5
R version 3.4.3 (2017-11-30)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 16.04.3 LTS
浏览器版本:Firefox Quantum 57.0.1(64位)
答案 0 :(得分:2)
要遵循Kevin的回答,将clusterId修改为向量将使leafletProxy版本对我有用。不确定是否会导致意想不到的后果...
app.R
library(shiny)
library(dplyr)
library(leaflet)
ui <- fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
actionButton(inputId = "my_button1",
label = "Use leafletProxy()"),
actionButton(inputId = "my_button2",
label = "Use renderLeaflet()")
),
mainPanel(
leafletOutput(
outputId = "mymap",
width = "100%",
height = "300px"
))
))
server <- function(input, output, session) {
some_data <- data.frame(
lon = c(4.905167, 4.906357, 4.905831),
lat = c(52.37712, 52.37783, 52.37755),
number_var = c(5, 9, 7),
name = c("Jane", "Harold", "Mike"),
stringsAsFactors = FALSE
)
marker_js <- JS("function(cluster) {
var html = '<div style=\"background-color:rgba(77,77,77,0.5)\"><span>' + cluster.getChildCount() + '</div><span>'
return new L.DivIcon({html: html, className: 'marker-cluster'});
}")
output$mymap <- renderLeaflet({
leaflet(some_data) %>%
addProviderTiles(providers$CartoDB.Positron) %>%
fitBounds(
~min(lon),
~min(lat),
~max(lon),
~max(lat)
) %>%
addMarkers(
layerId = "mylayer",
clusterId = "mycluster",
lng = ~lon,
lat = ~lat,
clusterOptions = markerClusterOptions(
iconCreateFunction = marker_js
)
)
})
observeEvent(input$my_button1, {
leafletProxy("mymap", data = some_data) %>%
removeMarker(layerId = "mylayer") %>%
clearTiles %>%
addProviderTiles(providers$CartoDB.Positron) %>%
fitBounds(
~min(lon),
~min(lat),
~max(lon),
~max(lat)
) %>%
addMarkers(
layerId = "mylayer",
clusterId = ~name,
lng = ~lon,
lat = ~lat,
clusterOptions = markerClusterOptions(
iconCreateFunction = marker_js
)
)
})
observeEvent(input$my_button2,{
output$mymap <- renderLeaflet({
leaflet(some_data) %>%
addProviderTiles(providers$CartoDB.Positron) %>%
fitBounds(
~min(lon),
~min(lat),
~max(lon),
~max(lat)
) %>%
addMarkers(
layerId = "mylayer",
clusterId = "mycluster",
lng = ~lon,
lat = ~lat,
clusterOptions = markerClusterOptions(
iconCreateFunction = marker_js
)
)
})
})
}
shinyApp(ui = ui, server = server)
答案 1 :(得分:1)
在iconCreateFunction
中使用leafletProxy
的行为绝对是 flakey 。虽然我认为某些浏览器存在缓存,因此难以直观地跟踪。
为了消除您遇到的 javascript 错误,应用layerId
和clusterId
值以及使用removeMarker
代替clearMarkers
。
N.B。我的解决方案的一个奇怪的副作用是,重新绘制时会丢弃标记,我会感到有点疲倦,以后会再看一眼。这个问题可能是也可能不是微不足道的。
library(shiny)
library(dplyr)
library(leaflet)
ui <- fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
actionButton(inputId = "my_button1",
label = "Use leafletProxy()"),
actionButton(inputId = "my_button2",
label = "Use renderLeaflet()")
),
mainPanel(
leafletOutput(
outputId = "mymap",
width = "100%",
height = "300px"
))
))
server <- function(input, output, session) {
some_data <- data.frame(
lon = c(4.905167, 4.906357, 4.905831),
lat = c(52.37712, 52.37783, 52.37755),
number_var = c(5, 9, 7),
name = c("Jane", "Harold", "Mike"),
stringsAsFactors = FALSE
)
marker_js <- JS("function(cluster) {
var html = '<div style=\"background-color:rgba(77,77,77,0.5)\"><span>' + cluster.getChildCount() + '</div><span>'
return new L.DivIcon({html: html, className: 'marker-cluster'});
}")
output$mymap <- renderLeaflet({
leaflet(some_data) %>%
addProviderTiles(providers$CartoDB.Positron) %>%
fitBounds(
~min(lon),
~min(lat),
~max(lon),
~max(lat)
) %>%
addMarkers(
layerId = "mylayer",
clusterId = "mycluster",
lng = ~lon,
lat = ~lat,
clusterOptions = markerClusterOptions(
iconCreateFunction = marker_js
)
)
})
observeEvent(input$my_button1, {
leafletProxy("mymap", data = some_data) %>%
removeMarker(layerId = "mylayer") %>%
clearTiles %>%
addProviderTiles(providers$CartoDB.Positron) %>%
fitBounds(
~min(lon),
~min(lat),
~max(lon),
~max(lat)
) %>%
addMarkers(
layerId = "mylayer",
clusterId = "mycluster",
lng = ~lon,
lat = ~lat,
clusterOptions = markerClusterOptions(
iconCreateFunction = marker_js
)
)
})
observeEvent(input$my_button2,{
output$mymap <- renderLeaflet({
leaflet(some_data) %>%
addProviderTiles(providers$CartoDB.Positron) %>%
fitBounds(
~min(lon),
~min(lat),
~max(lon),
~max(lat)
) %>%
addMarkers(
layerId = "mylayer",
clusterId = "mycluster",
lng = ~lon,
lat = ~lat,
clusterOptions = markerClusterOptions(
iconCreateFunction = marker_js
)
)
})
})
}
shinyApp(ui = ui, server = server)
未发现其他 javascript 错误。