From c5c32b686f85e0703440500e0d6643e61dbb9c95 Mon Sep 17 00:00:00 2001
From: YiQianYao <42212176+2912401452@users.noreply.github.com>
Date: Tue, 18 Jan 2022 15:21:37 +0800
Subject: [PATCH] Shihuidev (#941)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复聚合图在放大、缩小时计算的 data 数量不同的问题

* style: lint style
---
 .../layers/src/plugins/DataSourcePlugin.ts    |  2 +-
 stories/Map/components/cluster.tsx            | 70 +++++++++++++++++++
 stories/Map/map.stories.tsx                   |  2 +
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 stories/Map/components/cluster.tsx

diff --git a/packages/layers/src/plugins/DataSourcePlugin.ts b/packages/layers/src/plugins/DataSourcePlugin.ts
index 77d97be588..c02a99911e 100644
--- a/packages/layers/src/plugins/DataSourcePlugin.ts
+++ b/packages/layers/src/plugins/DataSourcePlugin.ts
@@ -49,7 +49,7 @@ export default class DataSourcePlugin implements ILayerPlugin {
       (dataSourceNeedUpdate || Math.abs(zoom - newZoom) > 1) &&
       maxZoom > zoom
     ) {
-      source.updateClusterData(Math.floor(newZoom));
+      source.updateClusterData(Math.round(newZoom));
       return true;
     }
     return false;
diff --git a/stories/Map/components/cluster.tsx b/stories/Map/components/cluster.tsx
new file mode 100644
index 0000000000..3909bdc832
--- /dev/null
+++ b/stories/Map/components/cluster.tsx
@@ -0,0 +1,70 @@
+import { PointLayer, Marker, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+export default class Cluster extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    // this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        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);
+
+          scene.on('zoomchange', () => {
+            const d = pointLayer.getSource();
+            // console.log('ddd', d.data.dataArray)
+          });
+        });
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}
diff --git a/stories/Map/map.stories.tsx b/stories/Map/map.stories.tsx
index 6cff7420af..7cca30b3b7 100644
--- a/stories/Map/map.stories.tsx
+++ b/stories/Map/map.stories.tsx
@@ -74,6 +74,7 @@ import SimplePoint from './components/simplePoint';
 import LineWall from './components/linewall'
 import GridTile from './components/gridTile'
 import GridTile2 from './components/gridTile2'
+import Cluster from './components/cluster'
 
 // @ts-ignore
 storiesOf('地图方法', module)
@@ -152,3 +153,4 @@ storiesOf('地图方法', module)
         .add('BusLine', () => <BusLine/>)
         .add('GridTile', () => <GridTile/>)
         .add('GridTile2', () => <GridTile2/>)
+        .add('Cluster', () => <Cluster/>)