vue3和ts加载leaflet热力图leaflet.heat版本选择

如果你想在 Vue 3 项目中使用 TypeScript 加载 Leaflet 热力图，可以选择使用 `leaflet.heat` 的最新版本。

首先，在 Vue 3 项目中安装 Leaflet 和 `leaflet.heat` 库：

npm install leaflet leaflet.heat

然后，在 Vue 组件中引入库，并创建地图和热力图：

<template>
  <div id="map"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import * as L from 'leaflet';
import 'leaflet.heat';

export default defineComponent({
  mounted() {
    const map = L.map('map').setView([51.505, -0.09], 13);

    const heatData = [
      [51.5, -0.09, 0.5],
      [51.5, -0.08, 0.2],
      [51.5, -0.07, 0.3],
      ...
    ];

    const heatLayer = L.heatLayer(heatData, {radius: 25}).addTo(map);
  }
});
</script>

在上面的代码中，我们在 Vue 组件中通过 `import` 引入了 `leaflet` 和 `leaflet.heat` 库，并在 `mounted` 钩子函数中创建了一个 Leaflet 地图，并定义了一些热力图数据 `heatData`，最后使用 `L.heatLayer` 创建了一个热力图图层，并将其添加到地图中。

需要注意的是，在 Vue 3 中，需要使用 `defineComponent` 函数来定义组件，并在 `script` 标签中使用 `lang="ts"` 来指定 TypeScript。

希望这个回答对你有所帮助！