leaflet添加饼图

实现方案
为了在 Leaflet 地图中集成并显示饼状图表，可以通过结合使用 Leaflet 和第三方 JavaScript 库来完成这一目标。一种常见的方法是利用 D3.js 或者 ECharts 来创建饼图，并将其嵌入到 Leaflet 的自定义覆盖层 (overlay) 中。
使用ECharts作为示例：

引入必要的库

首先，在 HTML 文件头部加入对 Leaflet 及 ECharts 的引用链接。
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
登录后复制

初始化地图和设置视图

通过 JavaScript 初始化一个新的 Leaflet 地图实例，并设定初始位置与缩放级别。
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&amp;copy; OpenStreetMap contributors'
}).addTo(map);
登录后复制

创建一个用于放置图表的 div 并添加至地图标记处

每当需要在一个具体的地理位置上展示饼图时，先构建一个小容器（div），再把这个容器绑定给该地点上的弹窗(Popup)，最后在这个容器内生成由 ECharts 渲染出来的饼形统计图。
function addPieChartToMarker(latlng, data){
var popupContent = document.createElement("div");

// Create a new marker at the specified location.
var marker = L.marker(latlng).bindPopup(popupContent);

// Add this marker to our existing leaflet map object.
marker.addTo(map);

// Initialize an instance of echarts inside the created container element.
var chartDom = document.createElement('div');
chartDom.style.width = '200px';
chartDom.style.height = '200px';
popupContent.appendChild(chartDom);

var myChart = echarts.init(chartDom);
var option;

option = {
tooltip: { trigger: 'item' },
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: { show: false, position: 'center' },
emphasis: {
label: { show: true, fontSize: '40', fontWeight: 'bold' }
},
labelLine: { show: false },
data: data
}
]
};

option &amp;&amp; myChart.setOption(option);
}
登录后复制
上述代码片段展示了如何将带有指定地理坐标的饼图附加到 Leaflet 地图中的某个点位[^1]。