使用的热力图是 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:此热力图无法与地图旋转插件一起使用,热力图不会跟随地图旋转。