vue3中leaflet 插件HeatmapOverlay加载热力图

在 Vue 3 中使用 Leaflet 插件 HeatmapOverlay 加载热力图，可以使用 Vue 3 的 Composition API 和 Leaflet 的 TypeScript 类型定义文件。以下是一个简单的示例代码：

首先安装 Leaflet 和 HeatmapOverlay 插件以及它们的类型定义文件：

npm install leaflet leaflet.heatmap @types/leaflet @types/leaflet.heatmap --save

然后在 Vue 文件中引入 Leaflet 和 HeatmapOverlay 插件：

import { defineComponent, onMounted, ref } from 'vue';
import * as L from 'leaflet';
import 'leaflet.heatmap';

在组件中定义地图容器和热力图数据：

export default defineComponent({
  setup() {
    const mapContainer = ref(null);
    const heatmapData = [
      [51.5, -0.09, 0.5],
      [51.51, -0.1, 0.9],
      [51.49, -0.05, 0.2]
    ];

    onMounted(() => {
      const map = L.map(mapContainer.value).setView([51.505, -0.09], 13);
      const heatmapLayer = L.heatLayer(heatmapData).addTo(map);
    });

    return { mapContainer };
  }
});

在上面的代码中，我们使用 `ref` 创建了一个地图容器的引用，并将其传递给 `L.map()` 方法创建了一个 Leaflet 地图。然后使用 `L.heatLayer()` 创建了一个 HeatmapOverlay 实例，并调用 `addTo()` 方法将其添加到地图上。

最后，我们在组件的模板中使用地图容器：

<template>
  <div ref="mapContainer" style="height: 500px;"></div>
</template>

在实际应用中，可以根据需要调整 HeatmapOverlay 的参数，如半径、最大值、透明度等，以达到更好的效果。