Leaflet-vue 热力图 （设置热力图颜色）

使用的热力图是 heatmap.js

因为是Leaflet，所以还要引入一个对应的插件 leaflet-heatmap.js，这个插件就在heatmap目录下的plugins里面。

代码如下：

import "heatmap.js";
import HeatmapOverlay from "@/utils/leaflet-heatmap.js";

let cfg = {
  radius: 0.5, //半径
  maxOpacity: 0.8, //最大透明度
  scaleRadius: true,//设置热力点是否平滑过渡
  useLocalExtrema: false,//使用局部极值
  latField: "lat",//纬度
  lngField: "lng",//经度
  valueField: "count" ,
  gradient: { 0.25: "rgb(0,255,128)", 0.55: "rgb(0,255,255)", 0.85: "rgb(0,128,255)", 1.0: "blue"} //此处为设置颜色
};
this.heatmapLayer = new HeatmapOverlay(cfg);
this.heatmapLayer.addTo(this.heatMapLayerGroup);

//处理数据，此处代码部分省略
this.mapData.data.push({
  lat: data.at, 
  lng: data.ng, 
  count: data.value
})

this.heatmapLayer.setData(this.mapData);

 

坑1：官方文档中并没有提示如何修改颜色，我胡乱试出来才发现可以。

坑2：此热力图无法与地图旋转插件一起使用，热力图不会跟随地图旋转。