vue3和 ts加载lealfet热力图

可以通过以下步骤使用 Vue3 和 TypeScript 加载 Leaflet 热力图：

1. 安装 Leaflet 和 Leaflet.heat 插件：

npm install leaflet leaflet.heat

2. 在 Vue3 项目中引入 Leaflet 和 Leaflet.heat：

import { createApp } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet.heat/dist/leaflet-heat.js';
import App from './App.vue';

const app = createApp(App);

// 让 Leaflet 的默认图标加载正确
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png').default,
  iconUrl: require('leaflet/dist/images/marker-icon.png').default,
  shadowUrl: require('leaflet/dist/images/marker-shadow.png').default,
});

app.mount('#app');

3. 在组件中使用 Leaflet 和 Leaflet.heat：

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

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet.heat/dist/leaflet-heat.js';

export default defineComponent({
  name: 'HeatMap',
  setup() {
    onMounted(() => {
      const map = L.map('map').setView([51.505, -0.09], 13);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
      }).addTo(map);

      const heat = L.heatLayer([[51.5, -0.09, 1]], { radius: 25 }).addTo(map);
    });

    return {};
  },
});
</script>

以上代码中的 `L.heatLayer` 就是 Leaflet.heat 插件提供的热力图图层类，接受一个坐标数组和一些可选的配置项，如 `radius` 等。

希望这能帮助到你！