在 Leaflet 中创建具有不同圆圈大小的图例
Posted
技术标签:
【中文标题】在 Leaflet 中创建具有不同圆圈大小的图例【英文标题】:Create legend with different circle sizes in Leaflet 【发布时间】:2020-03-14 00:24:28 【问题描述】:下午好,
我正在与取决于圆半径的传单传奇作斗争。因为我将使用相同颜色但大小不同的值。我想创造适合他们的传奇。
我试过这个例子:
http://jsfiddle.net/nathansnider/o563bg44/5/
在我的地图中实施。
为此,我使用了以下代码:
function getRadius(r)
//r = Math.sqrt(y / Math.PI)
//return r;
return r > 100 ? 15 :
r > 50 ? 10 :
r > 20 ? 6 :
r > 10 ? 3 :
0;
var legend = L.control(position: 'bottomright');
legend.onAdd = function (map)
var div = L.DomUtil.create('div', 'info legend');
grades = [0, 10, 20, 50, 100],
labels = ['<strong>Amount of units</strong>'],
categories = ['> 100','50-100','1-50','N/A'];
for (var i = 0; i < grades.length; i++)
labels.push(
'<i class="circlepadding" style="width: '+Math.max(0,(19-1.8*getRadius))+'px;"></i> <i
style="background: #8080A0; width: '+getRadius*2+'px; height: '+getRadius*2+'px; border-radius:
50%; margin-top: '+Math.max(0,(9-getRadius))+'px;"></i> ');
div.innerhtml = labels.join('<br>');
return div;
;
legend.addTo(map);
但最后我得到了一个糟糕的结果,如下图所示:
有人可以帮我解决这个问题吗?
【问题讨论】:
【参考方案1】:将你的 for 循环更改为:
for (var i = 0; i < grades.length; i++)
var grade = grades[i]*5;
labels.push(
'<i class="circlepadding" style="width: 5px;"></i> <i style="background: #8080A0; width: '+getRadius(grade)*2+'px; height: '+getRadius(grade)*2+'px; border-radius: 50%; margin-top: '+Math.max(0,(9-getRadius(grade)))+'px;"></i> '+categories[i]);
你必须再添加一个类别:
categories = ['> 100','50-100','1-50','N/A','XX'];
【讨论】:
是的,没关系。但是有什么方法可以克服这个“XX”变量吗?要将类别数量从 5 个减少到 4 个? 看来我必须去掉一个成绩,然后就可以了。以上是关于在 Leaflet 中创建具有不同圆圈大小的图例的主要内容,如果未能解决你的问题,请参考以下文章