Javascript markercluster是否与Proxy（）和option iconCreateFunction一起工作？

我做错了什么，或者为什么下面的例子不起作用？我正在尝试使用选项

iconCreateFunction

使传单markercluster插件在R闪亮的应用程序中与

传单代理（）

一起工作。插件是否无法使用

proxy（）

向地图添加自定义图标标记

在下面的示例中，当我按下第一个按钮并缩小时，会出现一个错误，错误是：

TypeError:此.\u group.options.iconCreateFunction不是函数

我试图从markercluster文档中复制：

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)

浏览器版本：Firefox Quantum 57.0.1（64位）

修订后的解决方案 当在

proxy

中使用时，

iconCreateFunction

的行为无疑是脆弱的。尽管我认为在某些浏览器中存在缓存，使得可视化跟踪变得困难

为了消除您遇到的javascript错误，应用

layerId

和

clusterId

值以及使用

removeMarker

代替

clearMarkers

非常重要

N.B.我的解决方案的一个奇怪的副作用是，当重新绘制时，一个标记会掉下来，我有点累了，稍后会再看一看。这个问题可能是琐碎的，也可能不是琐碎的

应用程序R

库（闪亮）
图书馆（dplyr）
图书馆（单张）
ui%
菲特邦兹(
~min（lon），
~min（拉丁美洲），
~max（lon），
~max（拉丁美洲）
) %>%
添加标记(
layerId=“mylayer”，
clusterId=“mycluster”，
液化天然气=~lon，
lat=~lat，
clusterOptions=markerClusterOptions(
iconCreateFunction=marker_js
)
)
})
ObserveeEvent（输入$my_按钮1{
传单代理（“mymap”，数据=部分数据）%>%
移除标记（layerId=“mylayer”）%>%
clearTiles%>%
addProviderTiles（提供程序$CartoDB.Positron）%>%
菲特邦兹(
~min（lon），
~min（拉丁美洲），
~max（lon），
~max（拉丁美洲）
) %>%
添加标记(
layerId=“mylayer”，
clusterId=“mycluster”，
液化天然气=~lon，
lat=~lat，
clusterOptions=markerClusterOptions(
iconCreateFunction=marker_js
)
)
})
ObserveeEvent（输入$my_按钮2{
输出$mymap%
addProviderTiles（提供程序$CartoDB.Positron）%>%
菲特邦兹(
~min（lon），
~min（拉丁美洲），
~max（lon），
~max（拉丁美洲）
) %>%
添加标记(
layerId=“mylayer”，
clusterId=“mycluster”，
液化天然气=~lon，
lat=~lat，
clusterOptions=markerClusterOptions(
iconCreateFunction=marker_js
)
)
})
})
}
shinyApp（用户界面=用户界面，服务器=服务器）

在浏览器中

没有注意到其他javascript错误

---

按照Kevin的回答，将clusterId修改为vector可以让Proxy版本适合我。但不确定这是否会导致意外后果

应用程序R

库（闪亮）
图书馆（dplyr）
图书馆（单张）
ui%
菲特邦兹(
~min（lon），
~min（拉丁美洲），
~max（lon），
~max（拉丁美洲）
) %>%
添加标记(
layerId=“mylayer”，
clusterId=“mycluster”，
液化天然气=~lon，
lat=~lat，
clusterOptions=markerClusterOptions(
iconCreateFunction=marker_js
)
)
})
ObserveeEvent（输入$my_按钮1{
传单代理（“mymap”，数据=部分数据）%>%
移除标记（layerId=“mylayer”）%>%
clearTiles%>%
addProviderTiles（提供程序$CartoDB.Positron）%>%
菲特邦兹(
~min（lon），
~min（拉丁美洲），
~max（lon），
~max（拉丁美洲）
) %>%
添加标记(
layerId=“mylayer”，
clusterId=~name，
液化天然气=~lon，
lat=~lat，
clusterOptions=markerClusterOptions(
iconCreateFunction=marker_js
)
)
})
ObserveeEvent（输入$my_按钮2{
输出$mymap%
addProviderTiles（提供程序$CartoDB.Positron）%>%
菲特邦兹(
~min（lon），
~min（拉丁美洲），
~max（lon），
~max（拉丁美洲）
) %>%
添加标记(
layerId=“mylayer”，
clusterId=“mycluster”，
液化天然气=~lon，
lat=~lat，
clusterOptions=markerClusterOptions(
iconCreateFunction=marker_js
)
)
})
})
}
shinyApp（用户界面=用户界面，服务器=服务器）

我在运行代码时没有收到任何错误。但我在mac电脑上。当按下两个按钮时，你看到标记了吗？谢谢您的尝试。第一次按Proxy（）后是的，但在使用缩小功能后不是。谢谢。这正是问题所在。markercluser插件应该组织缩放，但在

Proxy

的情况下，这似乎不起作用（当然，动态地向地图添加标记会非常有用）。这一未回答的问题表明这个问题已经存在了一段时间，并在两个相关的github问题中引用（和）没有团队的评论。谢谢你的意见；我同意在使用

loapleproxy（）

进行操作之前，应初始化和预渲染传单贴图。但是我的主要问题仍然存在：当使用

proxy（）

时，插件不接受option

iconCreateFunction

的自定义函数。我认为这是一个错误，除非我知道如何使用定制的创建函数来标记使用<代码> LoeLePro（）/<代码>。@ NILUB，在您的澄清之后更新的解决方案。谢谢。上面的代码会导致错误。1） 运行应用程序。2） 打开开发者工具/Firebug。3） 单击“使用代理（）。4） 如上所述的JS错误：

uncaughttypeerror:this.\u group.options.iconCreateFunction不是函数

。你能复制吗？几乎完美，做得好。唯一的问题是

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

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)

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)