ClusterLayer

点聚合可视化图层,把密集点数据按屏幕距离逐级聚合,适合大量点位的展示。

渲染复用两个内部 PointLayer:聚合点走图标模式(canvas 画气泡数字), 单点走图元模式(圆点)。几何类型支持 Point / MultiPoint。

构造函数

  • 创建点聚合图层

    参数类型说明
    options 可选ClusterLayerOptions配置项
    属性类型说明
    clusterIconFunction聚合点图标,(properties) => 图标源,不设用内置气泡(按占比着色 + 数字)
    clusterIconSizeFunction聚合点图标尺寸,(properties) => [w, h] | number,不设与内置气泡一致
    clusterMaxZoomnumber聚合结束层级,大于该层级不再聚合
    clusterMinPointsnumber成簇最小点数
    clusterMinZoomnumber聚合起始层级
    clusterRadiusnumber聚合半径(px)
    dataany初始数据,同 ClusterLayer.setData 的入参
    enablePickedboolean是否开启鼠标交互。默认 true(点击聚合点 fitView 依赖它),与其他可视化图层不同
    fitViewMargin[number, number, number, number]调整视野的边距 [上, 右, 下, 左]
    fitViewOnClickboolean点击聚合点是否自动调整视野
    idKeystring取要素 id 的字段名
    maxZoomnumber最大显示缩放等级
    minZoomnumber最小显示缩放等级
    mouseStyleChangeboolean命中后是否更换鼠标光标
    opacitynumber图层级透明度 [0,1]
    pickTolerancenumber命中容差(css px)
    referCenterPoint图层参考中心点,规避大坐标浮点抖动
    renderStageRenderStage绘制阶段,取值见 RenderStage
    singleStylePointLayerOptions单点样式,透传给内部 PointLayer 的 options(shape / size / fillColor / icon …)
    tileSizenumber瓦片尺寸,参与半径归一化
    updateRealTimebooleantrue 拖动/缩放过程中实时刷新(按 waitTime 节流);false 仅在地图静止后刷新
    visibleboolean是否显示
    waitTimenumber实时刷新节流间隔(ms)
    zIndexnumber显示层级,小的先画

    返回值 ClusterLayer

    示例代码1

    const layer = new BMap.ClusterLayer({ clusterRadius: 60 });
    layer.setData({
    type: 'FeatureCollection',
    features: [
    { type: 'Feature', geometry: { type: 'Point', coordinates: [116.404, 39.915] }, properties: {} }
    ]
    });
    map.addLayer(layer);
    layer.addEventListener('click', (e) => console.log(e.value));

事件

  • 添加事件监听

    参数类型说明
    eventK事件名称
    handler(e: ClusterLayerEventMap[K]) => void事件处理函数

    返回值 void

  • 移除事件监听

    参数类型说明
    eventK事件名称
    handler(e: ClusterLayerEventMap[K]) => void事件处理函数

    返回值 void

拾取

  • 返回值 boolean

  • 开关鼠标交互(命中光标 + 事件派发)

    参数类型说明
    enableboolean

    返回值 ClusterLayer

数据

  • 返回原始数据

    返回值 any

  • 设置数据,支持 FeatureCollection / Feature / Feature[] / 裸 Geometry。 几何类型支持 Point / MultiPoint

    参数类型说明
    geojsonany

    返回值 ClusterLayer

显示属性

  • 返回值 number

  • 返回值 "building" | "poi"

  • 返回值 boolean

  • 返回值 number

  • 参数类型说明
    opacitynumber

    返回值 void

  • 参数类型说明
    centerPoint

    返回值 void

  • 参数类型说明
    stage"building" | "poi"

    返回值 void

  • 参数类型说明
    visibleboolean

    返回值 void

  • 参数类型说明
    zIndexnumber

    返回值 void

样式

  • 批量更新配置/样式。聚合参数变更会重算索引,样式变更只刷新

    参数类型说明
    optionsClusterLayerOptions
    属性类型说明
    clusterIconFunction聚合点图标,(properties) => 图标源,不设用内置气泡(按占比着色 + 数字)
    clusterIconSizeFunction聚合点图标尺寸,(properties) => [w, h] | number,不设与内置气泡一致
    clusterMaxZoomnumber聚合结束层级,大于该层级不再聚合
    clusterMinPointsnumber成簇最小点数
    clusterMinZoomnumber聚合起始层级
    clusterRadiusnumber聚合半径(px)
    dataany初始数据,同 ClusterLayer.setData 的入参
    enablePickedboolean是否开启鼠标交互。默认 true(点击聚合点 fitView 依赖它),与其他可视化图层不同
    fitViewMargin[number, number, number, number]调整视野的边距 [上, 右, 下, 左]
    fitViewOnClickboolean点击聚合点是否自动调整视野
    idKeystring取要素 id 的字段名
    maxZoomnumber最大显示缩放等级
    minZoomnumber最小显示缩放等级
    mouseStyleChangeboolean命中后是否更换鼠标光标
    opacitynumber图层级透明度 [0,1]
    pickTolerancenumber命中容差(css px)
    referCenterPoint图层参考中心点,规避大坐标浮点抖动
    renderStageRenderStage绘制阶段,取值见 RenderStage
    singleStylePointLayerOptions单点样式,透传给内部 PointLayer 的 options(shape / size / fillColor / icon …)
    tileSizenumber瓦片尺寸,参与半径归一化
    updateRealTimebooleantrue 拖动/缩放过程中实时刷新(按 waitTime 节流);false 仅在地图静止后刷新
    visibleboolean是否显示
    waitTimenumber实时刷新节流间隔(ms)
    zIndexnumber显示层级,小的先画

    返回值 ClusterLayer

聚合

  • 按当前视野与层级重新计算并渲染聚合结果

    返回值 void