当前位置: 代码迷 >> 综合 >> 【vue@leaflet】热力图
  详细解决方案

【vue@leaflet】热力图

热度:51   发布时间:2024-01-17 08:58:10.0

插件

  • 下载地址
  • 引入
  // 通过npm 安装 heatmap.js
  npm install --save heatmap.js 
  import "heatmap.js";
  import HeatmapOverlay from "@/assets/Leaflet/leaflet-heatmap.js";

最终实现效果

 

options 设置说明

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