markercluster是否与leafletProxy（）和选项iconCreateFunction一起使用？ [英] Does markercluster work together with leafletProxy() and option iconCreateFunction?
问题描述
我做错了什么，或为什么下面的例子不起作用？我正在尝试使用选项 iconCreateFunction 在R Shiny应用程序中使用 leafletProxy（）使传单标记集插件工作。该插件是否无法使用 leafletProxy（）向地图添加自定义图标标记？
当我按下时第一个按钮并在下面的示例中缩小，我收到错误消息：
TypeError：this._group.options.iconCreateFunction不是函数
我尝试从markercluster文档中复制
修订解决方案
iconCreateFunction 的行为绝对是 flakey 在 leafletProxy 中使用时。虽然我认为在某些浏览器中存在缓存，因此难以直观地跟踪。
为了消除您遇到的 javascript 错误，它应用 layerId 和 clusterId 值以及使用 removeMarker 代替 clearMarkers 。
NB 我的解决方案的一个奇怪的副作用是在重新绘制时标记被丢弃，我有点累了，以后会再看一眼。这个问题可能是也可能不是微不足道。
app.R
库（闪亮）
库（dplyr）
库（传单）
ui< - fluidPage（
titlePanel（你好Shiny！），
sidebarLayout（
sidebarPanel（
actionButton（inputId =my_button1，
label =使用leafletProxy（）），
actionButton（ inputId =my_button2，
label =使用renderLeaflet（））
），
mainPanel（
leafletOutput（
outputId =mymap，
width =100％，
height =300px
））
））
服务器< - 函数（输入，输出，会话）{
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>'
返回新的L.DivIcon（{html：html，className：'marker-cluster'}）;
}）
输出$ mymap< - renderLeaflet（{
leaflet（some_data）％>％
addProviderTiles（providers $ CartoDB。正电子线）％>％
fitBounds（
~min（lon），
~min（纬度），
~max（lon），
~max（lat） ）
）％>％
addMarkers（
layerId =mylayer，
clusterId =mycluster，
lng = ~lon，
lat = ~lat，
clusterOptions = markerClusterOptions（
iconCreateFunction = marker_js
）
）
}）
observeEvent（输入$ my_button1，{
leafletProxy（mymap，data = some_data）％>％
removeMarker（layerId =mylayer）％>％
clearTiles％> ％
addProviderTiles（providers $ CartoDB.Positron）％>％
fitBounds（
~min（lon），
~min（lat），
~max（ lon），
~max（纬度）
）％>％
addMarkers（
layerId =mylayer，
clusterId =mycluster，
lng = ~lon，
lat = ~lat，
clusterOptions = markerClusterOptions（
iconCreateFunction = marker_js
）
）
}）
observeEvent（输入$ my_button2，{
输出$ 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 = s erver）
在浏览器中
< a href =https://i.stack.imgur.com/O8VEM.png =nofollow noreferrer>
未发现其他 javascript 错误。
Am I doing something wrong, or why does the below example not work? I am trying to make leaflet markercluster plugin work with leafletProxy() in an R Shiny app, using the option iconCreateFunction. Is the plugin not capable of adding customized icon markers to the map using leafletProxy()?
When I press the first button and zoom out in below example, I get an error saying:
TypeError: this._group.options.iconCreateFunction is not a function
I tried to copy the original example from the markercluster documentation:
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)
Package versions:
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
Browser version: Firefox Quantum 57.0.1 (64-bit)
Revised solution
The behaviour of iconCreateFunction is definitely flakey when used within leafletProxy. Although I think there is caching in some browsers making it difficult to track visually.
In order to eliminate the javascript error you were experiencing, it is important to apply layerId and clusterId values as well as using removeMarker in lieu of clearMarkers.
N.B. A strange side-effect of my solution is that a marker is dropped when re-drawn, I'm getting a bit tired and will have another look later. That problem may or may not be trivial.
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 = "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)
in-browser
No other javascript errors were noted.
这篇关于markercluster是否与leafletProxy（）和选项iconCreateFunction一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
