vue3-baidu-map 热力图

Vue3-Baidu-Map是一个基于Vue.js 3.x和百度地图API的封装库，它提供了一个易用的热力图组件，用于在Web应用中展示地理区域的热度分布。热力图通常用于统计地理位置相关的数据，比如用户访问频率、事件发生地点等，通过颜色深浅表示密度。

使用这个库创建热力图的基本步骤包括：
1. 安装依赖：`npm install vue3-baidu-map bmap-gl`
2. 在Vue组件中引入并配置Baidu Map API，以及初始化热力图组件。
3. 集成地理位置数据，并通过`addHeatMap`方法添加到热力图上。
4. 调整热力图样式，如颜色范围、半径等。

例如：

<template>
  <baidu-map :center="center" :zoom="zoom">
    <bm-heatmap :data="heatmapData"></bm-heatmap>
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue3-baidu-map';
import { BmHeatmap } from 'bmap-gl';

export default {
  components: {
    BaiduMap,
    BmHeatmap,
  },
  data() {
    return {
      center: [116.404, 39.915], // 北京坐标
      zoom: 12,
      heatmapData: [], // 根据实际数据填充
    };
  },
  methods: {
    addHeatmap(pointList) {
      this.heatmapData = pointList.map(p => ({ lng: p.lng, lat: p.lat }));
      // 添加到热力图组件
      this.$refs.heatmap.addPoints(this.heatmapData);
    },
  },
};
</script>