leaflet echarts热力图

要在 Leaflet 中使用 Echarts 热力图，您需要执行以下步骤：

1. 导入 Leaflet 和 Echarts 库：

<!-- Leaflet CSS 样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css">

<!-- Leaflet JavaScript 库 -->
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>

<!-- Echarts JavaScript 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>

2. 创建一个 Leaflet 地图：

// 创建地图
const map = L.map('map').setView([51.505, -0.09], 13);

// 添加地图图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(map);

3. 创建一个 Echarts 图表：

// 创建图表
const chart = echarts.init(document.getElementById('chart'));

// 配置图表
const option = {
  visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: 10,
  },
  series: [{
    type: 'heatmap',
    coordinateSystem: 'leaflet',
    data: [[51.5, -0.09, 10], [51.5, -0.08, 20], [51.5, -0.07, 30], [51.5, -0.06, 40], [51.5, -0.05, 50], [51.5, -0.04, 60], [51.5, -0.03, 70], [51.5, -0.02, 80], [51.5, -0.01, 90], [51.5, 0, 100]],
    pointSize: 5,
    blurSize: 6,
  }]
};

// 设置图表配置项并渲染
chart.setOption(option);

4. 将 Echarts 图表添加到 Leaflet 地图中：

// 创建热力图图层
const heatmapLayer = L.echartsLayer(chart);

// 将热力图图层添加到地图上
heatmapLayer.addTo(map);

这样就可以在 Leaflet 中使用 Echarts 热力图了。