Merge pull request #298 from antvis/cluster

fix(source): 聚合图支持其它数据格式

packages/source/src/source.ts

@@ -25,6 +25,7 @@ import { cloneDeep, isFunction, isString } from 'lodash';
 // tslint:disable-next-line:no-submodule-imports
 import Supercluster from 'supercluster/dist/supercluster';
 import { getParser, getTransform } from './';
+import { cluster } from './transform/cluster';
 import { statMap } from './utils/statistics';
 import { getColumn } from './utils/util';
 export default class Source extends EventEmitter {
@@ -100,7 +101,7 @@ export default class Source extends EventEmitter {
   }
   public updateClusterData(zoom: number): void {
     const { method = 'sum', field } = this.clusterOptions;
-    let data = this.clusterIndex.getClusters(this.extent, zoom);
+    let data = this.clusterIndex.getClusters(this.extent, Math.floor(zoom));
     this.clusterOptions.zoom = zoom;
     data.forEach((p: any) => {
       if (!p.id) {
@@ -177,13 +178,15 @@ export default class Source extends EventEmitter {
     if (!this.cluster) {
       return;
     }
-    const { radius, minZoom = 0, maxZoom } = this.clusterOptions;
-    this.clusterIndex = new Supercluster({
-      radius,
-      minZoom,
-      maxZoom,
-    });
-    this.clusterIndex.load(this.rawData.features);
+
+    const clusterOptions = this.clusterOptions || {};
+    this.clusterIndex = cluster(this.data, clusterOptions);
+    // this.clusterIndex = new Supercluster({
+    //   radius,
+    //   minZoom,
+    //   maxZoom,
+    // });
+    // this.clusterIndex.load(this.rawData.features);
   }
 
   private init() {

packages/source/src/transform/cluster.ts

@@ -1,9 +1,17 @@
-import { IParserCfg, IParserData, ISourceCFG, ITransform } from '@antv/l7-core';
+import {
+  IClusterOptions,
+  IParserData,
+  ISourceCFG,
+  ITransform,
+} from '@antv/l7-core';
 // @ts-ignore
 // tslint:disable-next-line:no-submodule-imports
 import Supercluster from 'supercluster/dist/supercluster';
-export function cluster(data: IParserData, option: ITransform): IParserData {
-  const { radius = 80, maxZoom = 18, minZoom = 0, field, zoom = 2 } = option;
+export function cluster(
+  data: IParserData,
+  option: Partial<IClusterOptions>,
+): IParserData {
+  const { radius = 40, maxZoom = 18, minZoom = 0, zoom = 2 } = option;
   if (data.pointIndex) {
     const clusterData = data.pointIndex.getClusters(
       data.extent,
@@ -16,10 +24,6 @@ export function cluster(data: IParserData, option: ITransform): IParserData {
     radius,
     minZoom,
     maxZoom,
-    map: (props: any) => ({ sum: props[field] }), // 根据指定字段求和
-    reduce: (accumulated: any, props: any) => {
-      accumulated.sum += props.sum;
-    },
   });
   const geojson: {
     type: string;
@@ -31,27 +35,15 @@ export function cluster(data: IParserData, option: ITransform): IParserData {
   geojson.features = data.dataArray.map((item) => {
     return {
       type: 'Feature',
-      properties: {
-        [field]: item[field],
-      },
       geometry: {
         type: 'Point',
         coordinates: item.coordinates,
       },
+      properties: {},
     };
   });
   pointIndex.load(geojson.features);
-  const clusterPoint = pointIndex.getClusters(data.extent, zoom);
-  const resultData = clusterPoint.map((point: any, index: number) => {
-    return {
-      coordinates: point.geometry.coordinates,
-      _id: index + 1,
-      ...point.properties,
-    };
-  });
-  data.dataArray = resultData;
-  data.pointIndex = pointIndex;
-  return data;
+  return pointIndex;
 }
 export function formatData(clusterPoint: any[]) {
   return clusterPoint.map((point, index) => {

stories/Layers/Layers.stories.tsx

@@ -4,6 +4,7 @@ import AnimatePoint from './components/AnimatePoint';
 import Arc2DLineDemo from './components/Arc2DLine';
 import ArcLineDemo from './components/Arcline';
 import CityBuildingLayerDemo from './components/citybuilding';
+import ClusterDemo from './components/cluster';
 import Column from './components/column';
 import DashLineDemo from './components/dash';
 import DataUpdate from './components/data_update';
@@ -27,6 +28,7 @@ import TextLayerDemo from './components/Text';
 // @ts-ignore
 storiesOf('图层', module)
   .add('点图层', () => <PointDemo />)
+  .add('聚合图', () => <ClusterDemo />)
   .add('数据更新', () => <DataUpdate />)
   .add('点动画', () => <AnimatePoint />)
   .add('3D点', () => <Point3D />)

stories/Layers/components/cluster.tsx

@@ -0,0 +1,83 @@
+import { PointLayer, Scene } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+// @ts-ignore
+import data from '../data/data.json';
+export default class Point3D extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      pickBufferScale: 3.0,
+      map: new GaodeMap({
+        style: 'light',
+        center: [-121.24357, 37.58264],
+        pitch: 0,
+        zoom: 10.45,
+      }),
+    });
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv',
+      )
+        .then((res) => res.text())
+        .then((data) => {
+          const pointLayer = new PointLayer({})
+            .source(data, {
+              parser: {
+                type: 'csv',
+                x: 'Longitude',
+                y: 'Latitude',
+              },
+              cluster: true,
+            })
+            .shape('circle')
+            .size(8)
+            .active({
+              color: 'red',
+            })
+            .color('point_count', [
+              '#0A3663',
+              '#1558AC',
+              '#3771D9',
+              '#4D89E5',
+              '#64A5D3',
+              '#72BED6',
+              '#83CED6',
+              '#A6E1E0',
+              '#B8EFE2',
+              '#D7F9F0',
+            ])
+            .style({
+              opacity: 1,
+              strokeWidth: 0,
+              stroke: '#fff',
+            });
+
+          scene.addLayer(pointLayer);
+          this.scene = scene;
+        });
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}