ts和vue3加载leaflet热力图

要在ts和vue3项目中加载leaflet热力图，你可以按照以下步骤进行：

1. 安装leaflet和leaflet.heat库

npm install leaflet leaflet.heat --save

2. 在vue组件中引入leaflet和leaflet.heat

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

3. 在组件中创建地图容器并初始化地图

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

<script>
export default {
  mounted() {
    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 &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      tileSize: 512,
      zoomOffset: -1,
    }).addTo(map);
  },
};
</script>

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

4. 加载热力图数据并使用leaflet.heat添加热力图层

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

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

export default {
  mounted() {
    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 &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18,
      tileSize: 512,
      zoomOffset: -1,
    }).addTo(map);

    // 加载热力图数据
    const heatMapData = [
      [51.5, -0.09, 0.5],
      [51.5, -0.1, 0.2],
      [51.49, -0.1, 0.3],
      [51.51, -0.12, 0.7],
    ];

    // 将数据格式转换为leaflet.heat需要的格式
    const heatData = heatMapData.map(item => [item[0], item[1], item[2]]);

    // 添加热力图层
    L.heatLayer(heatData).addTo(map);
  },
};
</script>

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

这样就可以在ts和vue3项目中加载leaflet热力图了。