Shihuidev (#941)

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

* style: lint style

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;

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,
+          }}
+        />
+      </>
+    );
+  }
+}

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/>)