vue3和ts加载leaflet热力图@type

在 Vue3 中使用 TypeScript 加载 Leaflet 和 Leaflet.heat 热力图插件，可以按照以下步骤操作：

1. 创建 Vue3 项目，并安装 Leaflet 和 Leaflet.heat：

   vue create my-project
   cd my-project
   npm install leaflet leaflet.heat

2. 安装对应的 @type 类型声明文件：

   npm install @types/leaflet @types/leaflet.heat

3. 在 `main.ts` 中引入 Leaflet 和 Leaflet.heat：

   import { createApp } from 'vue';
   import * as L from 'leaflet';
   import 'leaflet.heat';
   import App from './App.vue';

   const app = createApp(App);
   app.config.globalProperties.$L = L;
   app.mount('#app');

这里将 Leaflet 和 Leaflet.heat 模块都导入，并将 `L` 对象挂载到 Vue 的全局属性 `$L` 上，以便在组件中使用。

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

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

   <script lang="ts">
   import { defineComponent, onMounted } from 'vue';

   export default defineComponent({
     name: 'Map',
     mounted() {
       onMounted(() => {
         // 创建地图
         const map = this.$L.map('map');

         // 创建热力图层
         const heatLayer = this.$L.heatLayer(data).addTo(map);
       });
     },
   });
   </script>

这里使用 `this.$L` 来访问全局的 `L` 对象，并创建 Leaflet 地图和热力图层。注意，在 Vue3 中，使用 `onMounted` 来代替 Vue2 中的 `mounted` 钩子函数。