4.5 KiB

Raw Blame History

title	order
HeatmapLayer	0

heatmapLayer

简介

热力图图层，包含三种类型的，

方格热力图

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

六边形热力图

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

经典热力图

⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在 source 方法设置数据聚合方法

source

热力图只支持点数据作为数据源

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

type 数据聚合类型 grid、hexagon
size 网格半径单位米
field 聚合字段
method 聚合方法 count,max,min,sum,mean5 个统计维度


layer.source(data, {
      parser: {
        type: 'csv',
        x: 'lng',
        y: 'lat'
      },
      transforms:[
        {
        type: 'grid',
        size: 15000,
        field:'v',
        method:'sum'
        }
      ],
  }

shape

不同类型热力图 shape 支持

	2D	3d
网格格热力图	circle,triangle,square,heaxgon	cylinder,triangleColumn,hexagonColum,squareColumn
蜂窝热力图	circle,triangle,square,heaxgon	circle,triangle,square,heaxgon
普通热力图	heatmap	heatmap

热力图布局下只 shape 方法只支持常量的可视化。

HeatmapLayer.shape('square');
HeatmapLayer.shape('hexagon');
// 默认类型可以不设置

size

当前版本 shape 为 grid，hexagon 不需要设置 size 映射

default 类型需要设置 size 映射详细参数见Size

**size(field,values) **

field: 热力图权重字段
values: 数据映射区间热力图显示 [0, 1] 效果最佳

HeatmapLayer.size('field', [0, 1]);

color

default heatMap 类型不需设置 color 映射

color 配置项同 color

style

grid hexagon 可以通过 style 设置透明度

default 热力图需要通过 style 配置参数热力图参数

intensity 全局热力权重推荐权重范围 1-5
radius 热力半径，单位像素
rampColors 色带参数
- colors 颜色数组
- positions 数据区间

HeatmapLayer.style({
  intensity: 3,
  radius: 20,
  rampColors: {
    colors: [
      'rgba(33,102,172,0.0)',
      'rgb(103,169,207)',
      'rgb(209,229,240)',
      'rgb(253,219,199)',
      'rgb(239,138,98)',
      'rgb(178,24,43,1.0)',
    ],
    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
  },
});

完整代码示例

普通热力图

// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json

HeatmapLayer({
  zIndex: 2,
})
  .source(data)
  .size('mag', [0, 1]) // weight映射通道
  .style({
    intensity: 3,
    radius: 20,
    rampColors: {
      colors: [
        'rgba(33,102,172,0.0)',
        'rgb(103,169,207)',
        'rgb(209,229,240)',
        'rgb(253,219,199)',
        'rgb(239,138,98)',
        'rgb(178,24,43,1.0)',
      ],
      positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
    },
  });

网格热力图

var layer = scene
  .HeatmapLayer({
    zIndex: 2,
  })
  .source(data, {
    parser: {
      type: 'csv',
      x: 'lng',
      y: 'lat',
    },
    transforms: [
      {
        type: 'grid',
        size: 15000,
        field: 'v',
        method: 'sum',
      },
    ],
  })
  .shape('grid')
  .style({
    coverage: 0.8,
  })
  .color('count', [
    '#002466',
    '#105CB3',
    '#2894E0',
    '#CFF6FF',
    '#FFF5B8',
    '#FFAB5C',
    '#F27049',
    '#730D1C',
  ]);

六边形热力图

var layer = scene
  .HeatmapLayer({
    zIndex: 2,
  })
  .souce(data, {
    parser: {
      type: 'csv',
      x: lng,
      y: lat,
    },
    transforms: [
      {
        type: 'hexgon',
        size: 1500,
        field: 'count',
        operation: 'sum',
      },
    ],
  })
  .shape('hexgon')
  .size(1000)
  .color('sum')
  .style({
    coverage: 0.8,
  });
render();

4.5 KiB Raw Blame History Unescape Escape