经典热力图

使用

  1. import { HeatMapLayer] } from '@antv/l7';

shape

常量 heatmap

  1. layer.shape('heatmap');

size

  • field: 热力图权重字段
  • values: 数据映射区间 热力图显示 [0, 1] 效果最佳
  1. layer.size('weight', [0, 1]);

color

heatmap 需要设置color 方法，样式通过style 设置

style

  • intensity 全局热力权重 推荐权重范围 1-5
  • radius 热力半径，单位像素

  • rampColors 色带参数

    • colors 颜色数组
    • positions 数据区间 :warning: color, position 的长度要相同

完整代码

  1. heatmapLayer({
  2.   zIndex: 2,
  3. })
  4.   .source(data)
  5.   .size('mag', [0, 1]) // weight映射通道
  6.   .style({
  7.     intensity: 3,
  8.     radius: 20,
  9.     rampColors: {
  10.       colors: [
  11.         'rgba(33,102,172,0.0)',
  12.         'rgb(103,169,207)',
  13.         'rgb(209,229,240)',
  14.         'rgb(253,219,199)',
  15.         'rgb(239,138,98)',
  16.         'rgb(178,24,43,1.0)',
  17.       ],
  18.       positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
  19.     },
  20.   });