leaflet热力图 heatmap.js使用笔记

热力图的使用

此文章默认你已经创建leaflet地图，以此为前提

引入文件

import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'

配置热力图参数

cfg: {
    "radius": 0.2,        // 半径
    "maxOpacity": 1,      // 最大透明度
    "scaleRadius": true,  // 是否基于地图的缩放半径
    "useLocalExtrema": true,
    latField: 'lat',        // 热力图数据对应的纬度字段
    lngField: 'lng',        // 热力图数据对应的经度字段
    valueField: 'count',    // 热力图数据的值的字段
    gradient: {             // 自定义渐变颜色，区间为0~1之间
        '0.3': 'blue',
        '0.6': 'red',
        '1': 'green'
    }
},

实例化引入的热力图对象

let heatmaplayer = new HeatmapOverlay(this.cfg); // 实例化热力图对象，this.cfg为热力图配置的参数
heatmaplayer.addTo(this.map); // 将热力图对象添加到已经初始化的地图中

给热力图对象添加数据

let dataArr = {            // 数据变量
    max : 15,
    data: [
        {
            lat: '39.924004',        // 纬度
            lng: '116.403369',       // 经度
            count: 3                 // 值
        },
        {
            lat: '39.624004',//经纬度
            lng: '116.703369',
            count: 4//值
        },
        {
            lat: '39.424004',//经纬度
            lng: '116.903369',
            count: 9//值
        },
        // ...后面的数据省略
    ],
}
heatmaplayer.setData(dataArr);  // 将数据添加给热力图

效果预览