R 的传单：如何更改默认 CSS 集群类

Question

如何更改默认的 CSS classes，它从 Leaflet for R 界面中定义集群对象？例如，如果我想从 .marker-cluster-small class 中删除不透明度，我怎么能在 R 中执行此操作？

这是创建集群 classes 的 CSS：https://github.com/Leaflet/Leaflet.markercluster/blob/64a2d5711521e56cac8ab863fb658beda5690600/dist/leaflet.markercluster-src.js

例如，我想从簇中移除不透明度，例如

.marker-cluster-small {
    background-color: rgba(181, 226, 140, 1.0);
    }
.marker-cluster-small div {
    background-color: rgba(110, 204, 57, 1.0);
    }

有没有办法在 iconCreateFunction 中执行此操作？

library(leaflet)
leaflet(quakes) %>% addTiles() %>% addMarkers(
  clusterOptions = markerClusterOptions(iconCreateFunction=JS("function (cluster) {    
    var childCount = cluster.getChildCount(); 
    var c = ' marker-cluster-';  
    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) });

  }"))
)

Answer 1

一种解决方案是手动编辑 leaflet.R 附带的默认 CSS 文件。我运行 .libPaths() 找到我的库路径，然后对传单目录进行 grep 搜索，直到我在这里找到 Leaflet.markercluster：

/Library/Frameworks/R.framework/Versions/3.2/Resources/library/leaflet/htmlwidgets/plugins/Leaflet.markercluster

从那里，我打开了 MarkerCluster.Defaults.css 文件并编辑了 CSS、

.marker-cluster-small {
    background-color: rgba(181, 226, 140, 1.0);
    }
.marker-cluster-small div {
    background-color: rgba(110, 204, 57, 1.0);
    }

从这里定义自定义集群也很容易类。但是，如果可能的话，我想避免破坏包的稳定性，并且能够在 leaflet.R 或 htmlwidgets.R 中动态定义适当的 CSS 会很棒]

Answer 2

您可以尝试将内联 CSS 添加到创建图标的函数中的不同标记，例如：

clusterOptions = markerClusterOptions(iconCreateFunction=JS("function (cluster) {    
    var childCount = cluster.getChildCount();  
    if (childCount < 100) {  
      c = 'rgba(181, 226, 140, 1.0);'
    } else if (childCount < 1000) {  
      c = 'rgba(240, 194, 12, 1);'  
    } else { 
      c = 'rgba(241, 128, 23, 1);'  
    }    
    return new L.DivIcon({ html: '<div style=\"background-color:'+c+'\"><span>' + childCount + '</span></div>', className: 'marker-cluster', iconSize: new L.Point(40, 40) });

  }")

如果你使用的是shiny，你也可以更改iconCreateFunction为每个标记分配不同的class，并在[=27中添加tags$style =] 为这些 class 设置 CSS。这是一个例子：

ui <- fluidPage(
  tags$head(tags$style(HTML("
  .marker-custom-small {
  background-color: rgba(181, 226, 140, 1);
    }
.marker-customr-small div {
    background-color: rgba(110, 204, 57, 1);
    }

.marker-custom-medium {
    background-color: rgba(241, 211, 87, 1);
    }
.marker-custom-medium div {
    background-color: rgba(240, 194, 12, 1);
    }

.marker-custom-large {
    background-color: rgba(253, 156, 115, 1);
    }
.marker-custom-large div {
    background-color: rgba(241, 128, 23, 1);
    }"))),
  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) });

  }"))
    )
  })
}

shinyApp(ui,server)

无法弄清楚如何在 shiny 应用程序之外的 leaflet 中自定义 CSS。

R 的传单：如何更改默认 CSS 集群类

Leaflet for R: How to change default CSS cluster classes

css

r

rstudio

leaflet

shiny

R 的传单：如何更改默认 CSS 集群 类

Leaflet for R: How to change default CSS cluster classes

css

r

rstudio

leaflet

shiny

R 的传单：如何更改默认 CSS 集群类