使用百度地图绘制热力图（BMapGL）

首先要引入百度地图的js、api；

<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"></script>

（小萌新使用百度地图的时候记得要先申请密钥哦）

然后在public下面的index中要先引入相关的js；

<script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>

<!-- 如果使用到Three.js相关的图层需要引用 -->
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>

接下来就可以开始绘制地图啦

<template>
  <div>
    <div id="map" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
//import BMapGL from "BMapGL";
import * as mapvgl from "mapvgl";
export default {
  data() {
    return {
      //模拟的经纬度及热力值数据；lng：经度 lat: 纬度 count：热力值
      pointList: [
        { lng: 113.532669, lat: 22.291358, count: 5 },
        { lng: 113.53063, lat: 22.281342, count: 28 },
        { lng: 113.531493, lat: 22.27278, count: 15 },
        { lng: 113.533388, lat: 22.289686, count: 9 },
        { lng: 113.537341, lat: 22.240986, count: 8 },
        { lng: 113.554157, lat: 22.242994, count: 20 },
        { lng: 113.56005, lat: 22.244599, count: 25 },
        { lng: 113.590664, lat: 22.255036, count: 7 },
        { lng: 113.594976, lat: 22.254367, count: 32 },
        { lng: 113.597994, lat: 22.250085, count: 5 },

        { lng: 113.51123, lat: 22.24123, count: 10 },
        { lng: 113.511, lat: 22.264123, count: 20 },
        { lng: 113.512, lat: 22.245123, count: 30 },
        { lng: 113.511233, lat: 22.271238, count: 20 },
        { lng: 113.54123, lat: 22.281235, count: 45 },
        { lng: 113.551231, lat: 22.212365, count: 20 },
        { lng: 113.574, lat: 22.281238, count: 25 },
        { lng: 113.543, lat: 22.261201, count: 7 },
        { lng: 113.58123, lat: 22.2123641, count: 32 },
        { lng: 113.566, lat: 22.24268, count: 5 },
        { lng: 113.575, lat: 22.23235, count: 10 },
        { lng: 113.57787, lat: 22.242364, count: 30 },
        { lng: 113.571567, lat: 22.21265, count: 10 },
        { lng: 113.52134, lat: 22.261238, count: 20 },
      ],
      map: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      /* 绘制地图 */
      this.map = new BMapGL.Map("map"); // 创建Map实例1
      //设置中心点
      let point = new BMapGL.Point(113.575090079605, 22.2768535765393);
      //设置地图显示级别
      this.map.centerAndZoom(point, 12);
      //设置地图能够缩放
      this.map.enableScrollWheelZoom();
      //这个是百度地图开发平台中的个性化地图，可以使用id来设置地图底层的样式
      this.map.setMapStyleV2({
        styleId: "c4dbdfcb92a3751ea489c3d98deaa878",
      });
    },
    /* 绘制热力图 方法一*/  
    drawHeatMap() {
      let view = new mapvgl.View({
        map: this.map,
      });
      let pointData = [];
      for (let i = 0; i < this.pointList.length; i++) {
        let item = this.pointList[i];
        pointData.push({
          geometry: {
            type: "Point",
            coordinates: [item.lng, item.lat],
          },
          properties: {
            count: item.count,
          },
        });
      }
      let heatmap = new mapvgl.HeatmapLayer({
        size: 400, // 单个点绘制大小
        max: 40, // 最大阈值
        height: 0, // 最大高度，默认为0
        unit: "m", // 单位，m:米，px: 像素
        gradient: {
          // 对应比例渐变色
          0.25: "rgba(0, 0, 255, 1)",
          0.55: "rgba(0, 255, 0, 1)",
          0.85: "rgba(255, 255, 0, 1)",
          1: "rgba(255, 0, 0, 1)",
        },
      });
      view.addLayer(heatmap);
      heatmap.setData(pointData);
    },
    /* 方法二 */
    drawHeatMap() {
      let view = new mapvgl.View({
        map: this.map,
      });
        
      fetch('./util/beijing.json').then(rs => {
        return rs.json();
      }).then(rs => {
          rs = rs.result.data[0].bound;
          let data = [];
          for (let i = 0; i < rs.length; i++) {
              let item = rs[i];
              data.push({
                  geometry: {
                      type: 'Point',
                      coordinates: [item[0], item[1]]
                  },
                  properties: {
                      count: item[2]
                  }
              });
          }
          let heatmap = new mapvgl.HeatmapLayer({
            size: 500, // 单个点绘制大小
            max: 40, // 最大阈值
            height: 0, // 最大高度，默认为0
            unit: "m", // 单位，m:米，px: 像素
            gradient: {
              // 对应比例渐变色
              0.25: "rgba(0, 0, 255, 1)",
              0.55: "rgba(0, 255, 0, 1)",
              0.85: "rgba(255, 255, 0, 1)",
              1: "rgba(255, 0, 0, 1)",
            },
          });
          view.addLayer(heatmap);
          heatmap.setData(data);
      });
    },
  },
};
</script>

方法二中的json格式可参考https://mapv.baidu.com/gl/examples/static/beijing.07102610.json

效果图：