HoneycombLayer

蜂窝图层，用于统计一定范围内点的数量分布，并以蜂窝结构展示其密集程度，由ShapeLayer与TextLayer组合而成。

示例

动手试试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var layer = new mapvgl.HoneycombLayer({
    size: 50,
    height: 0,
    maxZoom: 19,
    minZoom: 5,
    gradient: {
        0.0: 'rgb(50, 50, 256)',
        0.1: 'rgb(50, 250, 56)',
        0.5: 'rgb(250, 250, 56)',
        1.0: 'rgb(250, 50, 56)'
    },
    enableCluster: false,
    showText: true,
    textOptions: {
        fontSize: 13,
        color: 'white',
        format: function (count) {
                return count;
        }
    },
    data: [{
        geometry: {
            type: 'Point',
            coordinates: [116.403748, 39.915055]
        }
    }]
});

options属性

size

解释：单个蜂窝图的横向宽度

类型：number

默认值：100

height

解释：蜂窝图最大值的高度，设置为0时显示为平面

类型：number

默认值：0

enableCluster

解释：是否开启点聚合，开启后会根据地图级别提前对距离较近的点进行聚合，牺牲精确度提高展示时的性能，建议数据量较大时打开

类型：boolean

默认值：false

showText

解释：是否显示文字

类型：boolean

默认值：true

maxZoom

解释：最大地图级别，当地图级别高于此值时不再更新图层数据

类型：number

默认值：19

minZoom

解释：最小地图级别，当地图级别低于此值时不再更新图层数据

类型：number

默认值：5

gradient

解释：蜂窝图的颜色梯度，属性名0~1之间，属性值同css颜色值，通过Intensity拾取。

类型：object

默认值：

1
2
3
4
5
6
{
    0.0: 'rgb(50, 50, 256)',
    0.1: 'rgb(50, 250, 56)',
    0.5: 'rgb(250, 250, 56)',
    1.0: 'rgb(250, 50, 56)'
}

textOptions

解释：设置文字属性，支持文字图层所有参数

类型：object

额外参数：

  • format

    解释：支持格式化显示的数字，传入参数为单个蜂窝的数量值，不配置此属性则显示原值。

    类型：function

    默认值：无

data内容

数据格式内容：

1
2
3
4
5
6
[{
    geometry: {
        type: 'Point',
        coordinates: [116.403748, 39.915055]
    }
}]