如何更改从 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, 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
为每个标记分配不同的类,并添加 tags$style
在 header 中为这些类设置 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。
关于css - R : How to change default CSS cluster classes 的传单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33634901/