如何在Leaflet for R接口中更改定义集群对象的默认CSS类？例如,如果我想从.marker-cluster-small类中删除不透明度,我怎么能在R中执行此操作？
例如,我想从群集中删除不透明度,例如
.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) });
}"))
)
解决方法
您可以尝试将内联CSS添加到创建图标的函数中的不同标记,例如：
clusterOptions = markerClusterOptions(iconCreateFunction=JS("function (cluster) {
var childCount = cluster.getChildCount();
if (childCount < 100) {
c = 'rgba(181,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',40) });
}")
如果使用闪亮,还可以更改iconCreateFunction以为每个标记指定不同的类,并在标题中添加标签$style以设置这些类的CSS.这是一个例子：
ui <- fluidPage(
tags$head(tags$style(HTML("
.marker-custom-small {
background-color: rgba(181,1);
}
.marker-customr-small div {
background-color: rgba(110,1);
}
.marker-custom-medium {
background-color: rgba(241,211,87,1);
}
.marker-custom-medium div {
background-color: rgba(240,1);
}
.marker-custom-large {
background-color: rgba(253,156,115,1);
}
.marker-custom-large div {
background-color: rgba(241,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>',40) });
}"))
)
})
}
shinyApp(ui,server)
无法弄清楚如何在闪亮的应用程序之外的传单中使用自定义CSS.
