vue3和ts加载leaflet热力图

你可以按照以下步骤加载Leaflet热力图：

1. 安装所需的依赖项：

npm install leaflet leaflet.heat --save
npm install @types/leaflet --save-dev
npm install @types/leaflet.heat --save-dev

2. 在Vue组件中引入和初始化Leaflet地图和热力图：

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

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

@Component
export default class Heatmap extends Vue {
  private map: any;

  mounted() {
    this.initMap();
    this.initHeatMap();
  }

  private initMap() {
    this.map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; OpenStreetMap contributors',
    }).addTo(this.map);
  }

  private initHeatMap() {
    const testData = {
      max: 8,
      data: [
        { lat: 51.5, lng: -0.09, value: 3 },
        { lat: 51.51, lng: -0.1, value: 5 },
        { lat: 51.49, lng: -0.05, value: 2 },
      ],
    };
    const heat = L.heatLayer(testData.data, { maxZoom: 18 }).addTo(this.map);
  }
}
</script>

这里我们使用了Vue 3和TypeScript，首先引入Leaflet和热力图的依赖项，然后在`mounted()`钩子中初始化地图和热力图。`initMap()`方法用于初始化Leaflet地图，`initHeatMap()`方法用于初始化热力图。在`initHeatMap()`方法中，我们使用了一个测试数据来展示热力图。

注意，如果你在使用TypeScript时遇到无法找到`leaflet`和`leaflet.heat`模块的问题，可以在`tsconfig.json`文件中的`compilerOptions`中添加以下内容：

"typeRoots": [
  "node_modules/@types",
  "node_modules/leaflet",
  "node_modules/leaflet.heat"
],

希望这可以帮助你加载Leaflet热力图。