ts和vue3加载leaflet热力图

要在 TypeScript 和 Vue 3 中加载 Leaflet 热力图，你可以按照以下步骤操作：

1. 安装 Leaflet 和 leaflet.heat

通过 npm 安装 Leaflet 和 leaflet.heat：

npm install leaflet leaflet.heat

2. 引入 Leaflet 和 leaflet.heat

在 Vue 组件的 `setup()` 方法中引入 Leaflet 和 leaflet.heat：

import { ref, onMounted } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet.heat/dist/leaflet-heat.js';

export default {
  setup() {
    const map = ref(null);

    onMounted(() => {
      // 初始化地图
      map.value = L.map('map').setView([51.505, -0.09], 13);

      // 添加热力图层
      const heat = L.heatLayer(/* 热力图数据 */).addTo(map.value);
    });

    return {
      map,
    };
  },
};

3. 准备热力图数据

在 `L.heatLayer()` 方法中传入热力图数据，例如：

const heatData = [
  [51.5, -0.09, 0.5],
  [51.5, -0.1, 0.2],
  [51.5, -0.08, 0.8],
  // ...
];

const heat = L.heatLayer(heatData).addTo(map.value);

其中，`heatData` 数组中的每个元素表示一个数据点，前两个元素是经纬度坐标，第三个元素是该点的权重。

4. 在模板中使用地图容器

在 Vue 组件的模板中添加地图容器：

<template>
  <div id="map" style="height: 500px;"></div>
</template>

以上就是在 TypeScript 和 Vue 3 中加载 Leaflet 热力图的步骤。