html - R : CSS defined in header is not working inside leafletProxy 的传单

Question

我正在使用 leaflet 和 shiny 创建一个带有集群的小 map 。为此，我需要更改簇的颜色，这是我使用来自对 this question 的回复的代码完成的。 .但是，我无法让它在 leafletProxy() 中工作，我需要它来允许用户过滤显示的数据。这是一个显示问题的示例(我刚刚将所有簇都涂成红色):

library(shiny)
library(leaflet)

ui <- fluidPage(
    tags$head(tags$style(HTML("
                              .marker-custom-small {
                              background-color: rgba(255, 0, 0, 1);
                              }
                              .marker-customr-small div {
                              background-color: rgba(255, 0, 0, 1);
                              }

                              .marker-custom-medium {
                              background-color: rgba(255, 0, 0, 1);
                              }
                              .marker-custom-medium div {
                              background-color: rgba(255, 0, 0, 1);
                              }

                              .marker-custom-large {
                              background-color: rgba(255, 0, 0, 1);
                              }
                              .marker-custom-large div {
                              background-color: rgba(255, 0, 0, 1);
                              }"))),
    actionButton("but", "New clusters, please!"),

    leafletOutput("mymap")


  )

  server<-function(input, output, session) {
    output$mymap <- renderLeaflet({
      leaflet(quakes) %>% addTiles() %>% addMarkers(
        clusterOptions = markerClusterOptions(iconCreateFunction=JS("function (cluster) {    
                                                                    var childCount = cluster.getChildCount(); 
                                                                    var c = ' marker-custom-';  
                                                                    if (childCount < 100) {  
                                                                    c += 'large';  
                                                                    } else if (childCount < 1000) {  
                                                                    c += 'medium';  
                                                                    } else { 
                                                                    c += 'small';  
                                                                    }    
                                                                    return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });

    }"))
    )
  })


    observeEvent(input$but, {

      leafletProxy("mymap") %>%

      clearMarkerClusters() %>%

        addMarkers(data = quakes,
          clusterOptions = markerClusterOptions(iconCreateFunction=JS("function (cluster) {    
                                                                      var childCount = cluster.getChildCount(); 
                                                                      var c = ' marker-custom-';  
                                                                      if (childCount < 100) {  
                                                                      c += 'large';  
                                                                      } else if (childCount < 1000) {  
                                                                      c += 'medium';  
                                                                      } else { 
                                                                      c += 'small';  
                                                                      }    
                                                                      return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });

                }"))
        )




    })


  }

  shinyApp(ui,server)

当用户单击该按钮时，应显示新的聚类(在本例中为相同点)，但没有任何反应。 R 报告没有错误，addMarkers() 正在读取地震数据，因为我收到消息 Assuming 'long' and 'lat' are longitude and latitude, respectively在控制台中。我怀疑问题与 leafletProxy() 中的 addMarkers() 调用有关，没有找到(？)集群类，因为替换...

clusterOptions = markerClusterOptions(iconCreateFunction=JS("function (cluster) {    
                                                            var childCount = cluster.getChildCount(); 
                                                            var c = ' marker-custom-';  
                                                            if (childCount < 100) {  
                                                            c += 'large';  
                                                            } else if (childCount < 1000) {  
                                                            c += 'medium';  
                                                            } else { 
                                                            c += 'small';  
                                                            }    
                                                            return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });

                                                            }"))

只有...

clusterOptions = markerClusterOptions()

...使具有标准颜色的簇显示得很好。

如果能提供一些帮助，我将不胜感激!

最好的，

贝特尔

Answer 1

遵循 Shiny 文章网站上的建议 here我设法使用链接到 ui.R 和 includeCSS() 函数的自定义样式表来实现这一点。添加集群时我没有使用任何 JS 表达式，我的自定义颜色也很好。

例如代码:

library(shiny)
library(leaflet)

ui <- fluidPage(
    includeCSS("./style.css"),

    actionButton("but", "New clusters, please!"),

  leafletOutput("mymap")


  )

server<-function(input, output, session) {
  output$mymap <- renderLeaflet({
    leaflet(quakes) %>% addTiles() %>% addMarkers(clusterOptions =
                                                    markerClusterOptions())
})


  observeEvent(input$but, {

    leafletProxy("mymap") %>%

      clearMarkerClusters() %>%

      addMarkers(data = quakes,
                 clusterOptions = markerClusterOptions())
  })


}

shinyApp(ui,server)

应该有效，您只需要确保完全指定默认样式中定义的所有样式(在 ./path/to/your/package/library/leaflet 中找到/htmlwidgets/plugins/Leaflet.markercluster/MarkerCluster.Default)

例如，要将所有簇着色为红色(按照您的原始示例)，您可以使用:

样式.css:

.marker-cluster-small {
    background-color: rgba(255, 0, 0, 1);
    }
.marker-cluster-small div {
    background-color: rgba(255, 0, 0, 1);
    }

.marker-cluster-medium {
    background-color: rgba(255, 0, 0, 1);
    }
.marker-cluster-medium div {
    background-color: rgba(255, 0, 0, 1);
    }

.marker-cluster-large {
    background-color: rgba(255, 0, 0, 1);
    }
.marker-cluster-large div {
    background-color: rgba(255, 0, 0, 1);
    }

    /* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
    background-color: rgb(255, 0, 0);
    }
.leaflet-oldie .marker-cluster-small div {
    background-color: rgb(255, 0, 0);
    }

.leaflet-oldie .marker-cluster-medium {
    background-color: rgb(255, 0, 0);
    }
.leaflet-oldie .marker-cluster-medium div {
    background-color: rgb(255, 0, 0);
    }

.leaflet-oldie .marker-cluster-large {
    background-color: rgb(255, 0, 0);
    }
.leaflet-oldie .marker-cluster-large div {
    background-color: rgb(255, 0, 0);
}

.marker-cluster {
    background-clip: padding-box;
    border-radius: 20px;
    }
.marker-cluster div {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;

    text-align: center;
    border-radius: 15px;
    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
    }
.marker-cluster span {
    line-height: 30px;
    }

这应该允许您完全自定义集群，并让它们在您使用 leafletProxy() 时正确显示。