当前位置：首页 > 行业动态 > 正文

heatmap.js使用方法

使用heatmap.js需先引入库文件，准备含经纬度和强度的数据数组，配置半径、最大值等参数，最后调用heatmap.create(element, data, options)

heatmap.js是一款轻量级的JavaScript库，用于在网页中生成可交互的热力图，它支持多种数据格式，兼容主流浏览器，且无需依赖其他第三方库，以下是其核心使用方法及注意事项：

基础环境搭建

  1. 引入方式

    • CDN引入： 
      <script src="https://cdn.jsdelivr.net/npm/heatmap.js@2.3.0/build/heatmap.min.js"></script>
    • npm安装： 
      npm install heatmap.js

      引入本地文件： 

      <script src="node_modules/heatmap.js/build/heatmap.min.js"></script>

  2. HTML结构
    需准备一个容器元素（如<div>或<canvas>）用于渲染热力图： 

    <div id="heatmap-container" style="width:600px;height:400px;"></div>

核心代码实现

初始化热力图

// 获取容器元素
const container = document.getElementById('heatmap-container');
// 准备数据（二维数组格式）
const data = [
  { latitude: 37.7749, longitude: -122.4194, value: 0.8 },
  { latitude: 34.0522, longitude: -118.2437, value: 0.6 },
  // 更多数据点...
];
// 创建热力图实例
const heatmap = h337.create({
  container: container, // 必填：容器元素
  radius: 50,          // 热力点半径（像素）
  maxOpacity: 0.8,     // 最大透明度
  minOpacity: 0.2,     // 最小透明度
  blur: 0.75,          // 模糊程度（0-1）
  gradient: {         // 自定义渐变色
    '0.4': 'blue',
    '0.6': 'red',
    '1.0': 'yellow'
  }
});
// 设置数据
heatmap.setData({
  max: 1,               // 数据最大值（用于归一化）
  min: 0,               // 数据最小值
  data: data            // 数据数组
});

配置参数说明

参数名 类型 默认值 作用描述
container DOM元素 必填 热力图渲染的父容器
radius Number 50 每个数据点的扩散半径
maxOpacity Number 0 热力点的最大透明度
minOpacity Number 0 热力点的最小透明度
blur Number 75 高斯模糊强度（控制边缘柔和度）
gradient Object 默认渐变色 自定义颜色渐变映射

高级功能扩展

动态更新数据

// 新数据（模拟实时更新）
const newData = [
  { latitude: 37.7749, longitude: -122.4194, value: 1.0 },
  { latitude: 34.0522, longitude: -118.2437, value: 0.9 }
];
// 更新热力图
heatmap.setData({
  max: 1,
  min: 0,
  data: newData
});

注意：若需频繁更新（如每秒多次），建议调用heatmap.update()而非重新创建实例。

自定义渐变色

通过gradient参数定义颜色映射规则： 

heatmap.setGradient({
  '0.2': 'lightblue',
  '0.5': 'orange',
  '0.8': 'darkred'
});

技巧：键值需为0-1之间的字符串，代表归一化后的数据阈值。

性能优化

  • 数据简化：对密集数据点进行聚合（如按区域统计平均值）。
  • Canvas模式：优先使用<canvas>容器，渲染性能优于DOM元素。
  • 懒加载：对非视口区域的数据延迟加载。

与其他库结合

结合地图（如Leaflet）

// 初始化地图
const map = L.map('map').setView([37.7749, -122.4194], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// 创建热力图层
const heat = L.heatLayer(data, { radius: 25 }).addTo(map);

关键点：需将经纬度坐标与地图投影匹配。

响应式布局

监听窗口尺寸变化,动态调整容器宽高： 

window.addEventListener('resize', () => {
  const { width, height } = container.getBoundingClientRect();
  heatmap.configure({ width, height });
});

常见问题与解决方案

FAQs

Q1：热力图不显示数据点？

  • 原因：
    1. 数据格式错误（如缺少latitude/longitude字段）。
    2. max/min值设置不当，导致归一化后数值超出范围。
    3. 容器宽高为0（需检查CSS样式）。
  • 解决：检查数据结构，确保max≥数据最大值，min≤数据最小值，并验证容器尺寸。

Q2：如何实现数据点的动态渐变效果？

  • 方法：调用heatmap.update()时，逐步调整max/min值或gradient配置。 
    heatmap.configure({ gradient: { '0.5': 'green' } });
heatmap.update();

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">Heatmap.js Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/heatmap.js@2.3.0/build/heatmap.min.js"></script>
</head>
<body>
  <div id="heatmap" style="width:600px;height:400px;"></div>
  <script>
    const data = [
      { latitude: 37.7749, longitude: -122.4194, value: 0.8 },
      { latitude: 34.0522, longitude: -118.2437, value: 0.6 }
    ];
    const heatmap = h337.create({
      container: document.getElementById('heatmap'),
      radius: 50,
      maxOpacity: 0.8,
      gradient: { '0.4': 'blue', '0.6': 'red' }
    });
    heatmap.setData({ max: 1, min: 0, data: data });
  </script>
</body>
</html>

通过以上步骤,可快速实现热力图的可视化与交互功能，如需进一步定制（如点击事件、数据筛选），可参考官方文档heatmap.js

js数据可视化
0

相关文章