1.下载插件
npm install heatmap.js
2.引入heatmap.js插件
import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'
3.添加配置
let cfg = {
radius: 0.05,
maxOpacity: 0.8,
minOpacity: 0.3,
scaleRadius: true,
useLocalExtrema: true,
blur: 0.95,
latField: "lat",
lngField: "lng",
valueField: "count",
gradient: {
0.99: "rgba(255,0,0,1)",
0.9: "rgba(255,255,0,1)",
0.8: "rgba(0,255,0,1 )",
0.5: "rgba(0,255,255,1)",
0: "rgba(0,0,255,1)",
},
};
4.添加数据
this.testData = {
max: 8,
data: that.pointData,
};
5.实例化热力图层
this.heatmapLayer = new HeatmapOverlay(cfg);
6.添加热力图数据
this.heatmapLayer.setData(that.testData);
7.将热力图层添加到地图
map.addLayer(this.heatmapLayer);