欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

leaflet 绘制半圆扇形 饼图

程序员文章站 2022-03-21 19:49:00
...

插件Leaflet-semicircle
示例demo http://jieter.github.io/Leaflet-semicircle/examples/semicircle.html

1.半圆扇形

/**
* []  坐标
* radius 半径
* startAngle  开始角度
* endAngle  结束角度
* fill 填充
* fillColor  填充色
* fillOpacity  填充透明度
*/
L.semiCircle([51.5, -0.09], {
    radius: 500,
	startAngle: 45,
	stopAngle: 135,
	fill: true,
    fillColor:'#f03',
    fillOpacity: 0.5,
    color: '#f03',
    opacity: 0.5,
}).addTo(map);

2.饼图

2.1 单个数字

L.pie([50.66, -0.0], 45).addTo(map);

2.2 数组

L.pie(
    [50.70, 0],
    [10, 20, 30, 40, 50, 70]
).addTo(map);

2.3 对象数组

L.pie([50.68, 0.05], [
    {num: 45, label: 'Bob'},
    {num: 60, label: 'Tom'},
    {num: 45, label: 'Ada'}
]).addTo(map);

设置

L.pie([50.66, 0.05], 15, {
    pathOptions: {
        opacity: 0.9,
        fillOpacity: 0.9
    },
    colors: ['#fff', '#afb', '#fba']
}).addTo(map);
相关标签: leaflet