我正在使用 R leaflet 制作传单 map 。我能够更改图例的边框
通过添加到我的 css 文件(在我的计算机上保存传单 map 之后)
.legend {
padding: 6px 10px 6px 6px;
color: #000033;
background: #fff;
border-left:5px solid #666666;
border-right:5px solid #666666;
border-top:5px solid #666666;
border-bottom:5px solid #666666
}
但是，当我尝试用图例中的圆圈替换正方形(以匹配 map 上的圆圈)时，它不起作用。我用过(来自:https://gis.stackexchange.com/questions/88462/how-to-create-leaflet-legend-for-points):
.legend .circle {
border-radius: 50%;
width: 10px;
height: 10px;
margin-top: 8px;
}
我是 CSS 的新手，所以任何建议都将不胜感激。
这是我的 html 文档。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="test_files/htmlwidgets-0.5/htmlwidgets.js"></script>
<script src="test_files/jquery-1.11.1/jquery.min.js"></script>
<link href="test_files/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<script src="test_files/leaflet-0.7.3/leaflet.js"></script>
<link href="test_files/leafletfix-1.0.0/leafletfix.css" rel="stylesheet" />
<link href="test_files/leaflet-label-0.2.2/leaflet.label.css" rel="stylesheet" />
<script src="test_files/leaflet-label-0.2.2/leaflet.label.js"></script>
<script src="test_files/leaflet-binding-1.0.1.9002/leaflet.js"></script>
</head>
<body style="background-color:white;">
<div id="htmlwidget_container">
<div id="htmlwidget-9645" style="width:100%;height:400px;" class="leaflet"></div>
</div>
<script type="application/json" data-for="htmlwidget-9645">{"x":{"calls":[{"method":"addTiles","args":["http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"maxNativeZoom":null,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"continuousWorld":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":null,"unloadInvisibleTiles":null,"updateWhenIdle":null,"detectRetina":false,"reuseTiles":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>"}]},{"method":"addCircles","args":[[42.3601,41.7627,40.7127,39.95,40.4397,41.8236],[-71.0589,-72.6743,-74.0059,-75.1667,-79.9764,-71.4222],[24111.6030159755,10607.3229421942,86979.3078841169,37385.8261912185,16590.8679700611,12656.8005435813],null,null,{"lineCap":null,"lineJoin":null,"clickable":true,"pointerEvents":null,"className":"","stroke":true,"color":["#FF0000","#FF9000","#B649AF","#B873BC","#C7C617","#000000"],"weight":1,"opacity":0.5,"fill":true,"fillColor":["#FF0000","#FF9000","#B649AF","#B873BC","#C7C617","#000000"],"fillOpacity":0.2,"dashArray":null},["Boston","Hartford","New York City","Philadelphia","Pittsburgh","Providence"],null,null]},{"method":"addLegend","args":[{"colors":["#FF0000","#FF9000","#B649AF","#B873BC","#C7C617","#000000"],"labels":["Boston","Hartford","New York City","Philadelphia","Pittsburgh","Providence"],"na_color":null,"na_label":"NA","opacity":0.5,"position":"bottomright","type":"factor","title":"Cities","extra":null,"layerId":null,"className":"info legend"}]}],"limits":{"lat":[39.95,42.3601],"lng":[-79.9764,-71.0589]}},"evals":[]}</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-9645">{"viewer":{"width":"100%","height":400,"padding":0,"fill":true},"browser":{"width":"100%","height":400,"padding":0,"fill":true}}</script>
</body>
</html>
最佳答案
由于没有提供 R 代码，我只使用了 ?addLegend 中的第一个示例。将来一些可重现的 R 代码会有所帮助。您为 .legend .circle 指定的自定义样式将不适用，因为我们从 leaflet 获得的图例矩形是 .legend i。请注意，如果需要，我们可以在 addLegend 中使用 className 参数来更具体地标识我们的元素，但我认为这对于您的示例不是必需的。
我将 margin-top 更改为 4px 所以圆圈居中；根据需要调整
# from ?addLegend
# !formatR
library(leaflet)
# a manual legend
leaf <- leaflet() %>%
addTiles() %>%
addLegend(
position = 'bottomright',
colors = rgb(t(col2rgb(palette())) / 255),
labels = palette(), opacity = 1,
title = 'An Obvious Legend'
)
# see what it looks like with no customization
leaf
# you specify a custom style like this
# but the legend rectanges are .legend i
# instead of .legend .circle
library(htmltools)
browsable(
tagList(list(
tags$head(
tags$style(
".leaflet .legend i{
border-radius: 50%;
width:10px;
height: 10px;
margin-top: 4px;
}"
)
),
leaf
))
)
关于css - 带有 R 传单的自定义图例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35778338/