带有R传单的自定义图例
我正在使用R传单来制作传单地图。我能够改变我传奇的边界
通过添加到我的css文件中（在我的计算机上保存传单地图之后）
.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
}
但是，当我尝试用图例中的圆替换正方形（以匹配地图上的圆）时，它不起作用。我用过（来自：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。请注意，如有必要，我们可以使用className参数in addLegend来更具体地标识我们的元素，但是对于您的示例，我认为这不是必需的。
我改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
))
)