蜂窝热力图

将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局

使用

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

source

网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.

设置网格聚合参数

布局方法 通过 source 的 tansforms 属性配置

  • type 数据聚合类型 hexagon
  • size 网格半径 单位 米
  • field 聚合字段
  • method 聚合方法 count,max,min,sum,mean5 个统计维度
  1. layer.source(data, {
  2.       parser: {
  3.         type: 'csv',
  4.         x: 'lng',
  5.         y: 'lat'
  6.       },
  7.       transforms:[
  8.         {
  9.         type: 'hexagon',
  10.         size: 15000,
  11.         field:'v',
  12.         method:'sum'
  13.         }
  14.       ],
  15.   }

shape

网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量

2d

  • circle,
  • triangle
  • square
  • heaxgon 
  1. layer.shape(circle);

3d

  • cylinder
  • triangleColumn
  • hexagonColumn
  • squareColumn,
  1. layer.shape(cylinder);

size

2D shape

不需要设置size方法

3D 图形

size 表示高度, 支持常量和数据映射

  1. layer.size(10); // 常量
  2. layer.size('value', [10, 50]); // 根据value 字段映射大小
  3. layer.size('value', value => {}); // 回调函数设置高度

color

同layer color方法

style

  • coverage 网格覆盖度 0 - 1
  • angle 网格旋转角度 0 - 360
  • opacity 透明度 0 - 1.0
  1. layer.style({
  2.   coverage: 0.9,
  3.   angle: 0,
  4.   opacity: 1.0,
  5. });

完整代码

  1. const layer = new HeatmapLayer({
  2.   zIndex: 2,
  3. })
  4.   .souce(data, {
  5.     parser: {
  6.       type: 'csv',
  7.       x: lng,
  8.       y: lat,
  9.     },
  10.     transforms: [
  11.       {
  12.         type: 'hexagon',
  13.         size: 1500,
  14.         field: 'count',
  15.         operation: 'sum',
  16.       },
  17.     ],
  18.   })
  19.   .shape('hexagon')
  20.   .color('sum')
  21.   .style({
  22.     coverage: 0.8,
  23.   });