使用AMap（高德地图）实现热力图（2D和3D）

首先在入口文件index.html中引入两个js文件

<script src="https://a.amap.com/jsapi_demos/static/bezier/bezier.js"></script>

<script src="https://webapi.amap.com/maps?v=1.4.14&key=秘钥&plugin=AMap.CustomLayer,AMap.ControlBar,AMap.Heatmap,AMap.MapType,AMap.OverView,AMap.Scale,AMap.ToolBar"></script>

在webpack.base.con.js里配置AMap

    'AMap': 'AMap'
    },

在vue页面里引用

import AMap from "AMap";

2D地图的config

          resizeEnable: true,
          layers: [new AMap.TileLayer.RoadNet()],
          center: [yaxis,xaxis],
          zoom: zoom,
          mapStyle:'amap://styles/grey'
        };

3D地图的config

          viewMode: '3D',
          pitch: 70,
          resizeEnable: true,
          center: [yaxis, xaxis],
          zoom: zoom,
          mapStyle:'amap://styles/grey'
        }

绘制2D地图

     this.map = new AMap.Map("heatMaps", config);
     // this.map.addControl(new AMap.ControlBar({})); // 组合了旋转、倾斜、复位、缩放在内的地图控件，在3D地图模式下会显示
     this.map.addControl(new AMap.MapType({})); // 卫星和标准切换，可加路况显示
     // this.map.addControl(new AMap.OverView({})); // 地图鹰眼插件，默认在地图右下角显示缩略图
     // this.map.addControl(new AMap.Scale({})); // 左下角地图比例尺插件
     this.map.addControl(new AMap.ToolBar({})); // 地图工具条插件，可以用来控制地图的缩放和平移
     this.trafficLayer = new AMap.TileLayer.Traffic({zIndex: 10});
     this.trafficLayer.setMap(this.map);
   },

绘制3D地图

    this.threemap = new AMap.Map("heatMaps", config);
    this.threemap.addControl(new AMap.MapType({})); // 卫星和标准切换，可加路况显示
    this.threemap.addControl(new AMap.ToolBar({"position": "LB"})); // 地图工具条插件，可以用来控制地图的缩放和平移
    this.heatmapOpts = {//3d 相关的参数
      '3d': {//热度转高度的曲线控制参数，可以利用左侧的控制面板获取
          heightBezier: [0.4, 0.2, 0.4, 0.8], //取样精度，值越小，曲面效果越精细，但同时性能消耗越大
          gridSize: 2,
          heightScale: 1
      }
  };
    this.threemapLayer = new AMap.Heatmap(this.threemap, this.heatmapOpts)
    this.threemapLayer.setMap(this.threemap);
  },

最后 绘制热力图

drwaHeatmap(heatMapData) {
      var that = this;
      if(that.switchvalue == false){
        that.map.plugin(["AMap.Heatmap"], function() {// 初始化heatmap对象
        that.heatmap = new AMap.Heatmap(that.map, {
          radius: 20, // 给定半径
          opacity: [0, 0.8],
          gradient: {
            0.5: "blue",
            0.65: "rgb(117,211,248)",
            0.7: "rgb(0, 255, 0)",
            0.9: "#ffea00",
            1.0: "red"
          }
        });
        that.heatmap.setDataSet(heatMapData);
      });
      }else{
        that.threeheatmap = new AMap.Heatmap(that.threemap, that.heatmapOpts)
        that.threeheatmap.setDataSet(heatMapData)
      }
    },