vue3中leaflet加载热力图

在 Vue3 中使用 Leaflet 加载热力图，可以按照以下步骤进行：

1. 安装依赖

npm install leaflet leaflet.heat

2. 引入 Leaflet 和 Leaflet.heat

在 Vue 的 main.js 中，引入 Leaflet 和 Leaflet.heat：

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet.heat/dist/leaflet-heat.js';

Vue.prototype.$L = L;

3. 创建地图并加载热力图

在 Vue 的组件中，可以通过以下代码创建地图：

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

<script>
export default {
  mounted() {
    this.map = this.$L.map('map').setView([51.505, -0.09], 13);

    const heat = this.$L.heatLayer(this.data, {
      radius: 25,
      blur: 15,
    }).addTo(this.map);
  },
};
</script>

<style>
#map {
  height: 500px;
}
</style>

其中，`this.data` 是一个包含热力图数据的数组，例如：

[
  [51.5, -0.09, 1],
  [51.5, -0.08, 0.5],
  [51.5, -0.07, 2],
  // ...
]

其中，每个数组元素表示一个点的位置和权重。

4. 设置地图样式

可以在组件的样式中设置地图的大小和位置，例如：

#map {
  height: 500px;
  width: 100%;
}

这样就可以在 Vue3 中使用 Leaflet 加载热力图了。