leaflet+heatmap.js加载热力图(vue)

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, //系数越高，渐变越平滑，默认是0.85
        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);