关注公众号[seeling_gis]领取学习视频资料

leaflet heatmap

插件

• 下载地址
• 引入

  // 通过npm 安装 heatmap.js
  npm install --save heatmap.js 
  import "heatmap.js";
  import HeatmapOverlay from "@/assets/Leaflet/leaflet-heatmap.js";
  

最终实现效果

Lheatmap.png

options 设置说明

{
        //热力图的配置项
        radius: 0.5, //设置每一个热力点的半径
        maxOpacity: 0.9, //设置最大的不透明度
        // minOpacity: 0.3,     //设置最小的不透明度
        scaleRadius: true, //设置热力点是否平滑过渡
        blur: 0.95, //系数越高，渐变越平滑，默认是0.85,
        //滤镜系数将应用于所有热点数据。
        useLocalExtrema: true, //使用局部极值
        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)"
        } 
      };

数据格式

{
    max: 15,
    data: [
        { lng: 104.044449, lat: 31.662711, count: 3 },
        ... 
    ],
};

代码实现

 let option = this.getConfig();
      this.heatmapLayer = new HeatmapOverlay(option);
      this.heatmapLayer.addTo(map);
      this.heatmapLayer.setData(this.points);

---

更多内容，欢迎关注公众号

seeling_GIS