cluster

View MarkdownEdit this page

Aggregation graphs are usually used to describe the aggregation of data geographically. Similar to heat maps, they can be used to represent the concentration of data points.

🌟 CurrentlyL7Only point data supports aggregated graphs. The clustering method mainly aggregates data from the data layer. InSourceMethod configurationclusterparameter.

accomplish

Let’s introduce how to draw a common aggregation chart.

you canL7Found on the official websiteOnline case

import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    center: [120.19382669582967, 30.258134],
    style: 'dark',
    zoom: 3,
  }),
});
scene.on('loaded', () => {
  fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
    .then((res) => res.json())
    .then((data) => {
      const pointLayer = new PointLayer({})
        .source(data, { cluster: true })
        .shape('circle')
        .scale('point_count', {
          type: 'quantile',
        })
        .size('point_count', [5, 10, 15, 20, 25])
        .active(true)
        .color('yellow')
        .style({
          opacity: 0.5,
          strokeWidth: 1,
        });
      scene.addLayer(pointLayer);
    });
});

source

After accepting ordinary point data, the aggregation chart also needs to configure aggregation parameters.

const source = new Source(data, {
  cluster: true,
  clusterOption: {
    radius: 40,
    minZoom: 0,
    maxZoom: 16,
  },
});

cluster: booleanIndicates whether to perform aggregation operations on data. Currently only point layers support it. The default value isfalse。
clusterOption: IClusterOptionSpecific aggregation parameters
- radius: numberAggregation radius, default value is40。
- minZoom: numberMinimum aggregate zoom level, default value is0。
- maxZoom: numberMaximum aggregate zoom level, default value is16。

interface IClusterOption {
  radius,
  minZoom
  maxZoom
}

Online case

shape

Aggregation graphs use common aggregation styles,shapeJust use the point layer typeshapeThat’s it.

FAQ

PointLayerThe aggregation graph usesWebGLDrawing does not support customizing specific aggregation styles. You can use it if you have customized requirements.MarkerLayerThe aggregation function, you can passDOMFully customizable styling.

MarkerLayer Aggregation