From 9a6450a9a9319cdbe27e18250ca9bcfdcdd8b555 Mon Sep 17 00:00:00 2001
From: yunji <yunji.me@outlook.com>
Date: Fri, 18 Jun 2021 11:29:50 +0800
Subject: [PATCH] feat(l7-layers): reuse source for multi layer

---
 packages/layers/src/core/BaseLayer.ts         | 11 ++-
 .../layers/src/plugins/DataSourcePlugin.ts    |  8 ++-
 stories/Source/Map.stories.tsx                |  8 ++-
 stories/Source/components/ReuseSource.tsx     | 71 +++++++++++++++++++
 4 files changed, 91 insertions(+), 7 deletions(-)
 create mode 100644 stories/Source/components/ReuseSource.tsx

diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts
index 7e75af7d49..e7874c734d 100644
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@@ -769,9 +769,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   }
 
   public setSource(source: Source) {
+    // 清除旧 sources 事件
+    if (this.layerSource) {
+      this.layerSource.off('update', this.sourceEvent);
+    }
+
     this.layerSource = source;
-    const zoom = this.mapService.getZoom();
-    if (this.layerSource.cluster) {
+
+    // 已 inited 且启用聚合进行更新聚合数据
+    if (this.inited && this.layerSource.cluster) {
+      const zoom = this.mapService.getZoom();
       this.layerSource.updateClusterData(zoom);
     }
     // source 可能会复用，会在其它layer被修改
diff --git a/packages/layers/src/plugins/DataSourcePlugin.ts b/packages/layers/src/plugins/DataSourcePlugin.ts
index 33cb76394f..660de81c89 100644
--- a/packages/layers/src/plugins/DataSourcePlugin.ts
+++ b/packages/layers/src/plugins/DataSourcePlugin.ts
@@ -15,8 +15,12 @@ export default class DataSourcePlugin implements ILayerPlugin {
   public apply(layer: ILayer) {
     this.mapService = layer.getContainer().get<IMapService>(TYPES.IMapService);
     layer.hooks.init.tap('DataSourcePlugin', () => {
-      const { data, options } = layer.sourceOption;
-      layer.setSource(new Source(data, options));
+      const source = layer.getSource();
+      if (!source) {
+        const { data, options } = layer.sourceOption;
+        layer.setSource(new Source(data, options));
+      }
+
       this.updateClusterData(layer);
     });
 
diff --git a/stories/Source/Map.stories.tsx b/stories/Source/Map.stories.tsx
index 28356d5246..dbc836addc 100644
--- a/stories/Source/Map.stories.tsx
+++ b/stories/Source/Map.stories.tsx
@@ -1,10 +1,11 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import HolePolygon from './components/hole'
+import HolePolygon from './components/hole';
 import Line from './components/line';
 import MultiLine from './components/multiLine';
 import MultiPolygon from './components/multiPolygon';
-import UpdatePolygon from './components/updatedata';
+import UpdatePolygon from './components/ReuseSource';
+import ReuseSource from './components/ReuseSource';
 // @ts-ignore
 import notes from './Map.md';
 // @ts-ignore
@@ -13,4 +14,5 @@ storiesOf('数据', module)
   .add('updatePolygon', () => <UpdatePolygon />, {})
   .add('MultiLine', () => <MultiLine />, {})
   .add('HolePolygon', () => <HolePolygon />, {})
-  .add('折线', () => <Line />, {});
+  .add('折线', () => <Line />, {})
+  .add('复用 Source', () => <ReuseSource />, {});
diff --git a/stories/Source/components/ReuseSource.tsx b/stories/Source/components/ReuseSource.tsx
new file mode 100644
index 0000000000..27e730a054
--- /dev/null
+++ b/stories/Source/components/ReuseSource.tsx
@@ -0,0 +1,71 @@
+import { LineLayer, PolygonLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import Source from '@antv/l7-source';
+import * as React from 'react';
+
+export default class ReuseSource extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        style: 'dark',
+        center: [104.288144, 31.239692],
+        zoom: 4.4,
+      }),
+    });
+
+    scene.on('loaded', async () => {
+      const response = await fetch(
+        'https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json',
+      );
+      const data = await response.json();
+
+      const source = new Source(data);
+
+      const polygonLayer = new PolygonLayer({})
+        .shape('fill')
+        .color('rgba(255,255,255,0.2)')
+        .select({
+          color: 'red',
+        })
+        .style({
+          opacity: 1,
+        });
+      polygonLayer.setSource(source);
+      polygonLayer.on('click', (e) => {
+        source.setData({
+          type: 'FeatureCollection',
+          features: [e.feature],
+        });
+      });
+
+      const lineLayer = new LineLayer({}).shape('line').color('#0ffbc4');
+      lineLayer.setSource(source);
+
+      scene.addLayer(polygonLayer);
+      scene.addLayer(lineLayer);
+      this.scene = scene;
+    });
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}