From 469a43f94b9b36daba5afc013dde26a3edb25fe4 Mon Sep 17 00:00:00 2001
From: YiQianYao <42212176+2912401452@users.noreply.github.com>
Date: Tue, 7 Dec 2021 14:12:49 +0800
Subject: [PATCH] Shihuidev (#868)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat: 图层销毁时的内存泄漏
---
 packages/layers/src/core/BaseLayer.ts   |   5 +
 stories/Map/components/destroyClear.tsx | 119 ++++++++++++++++++++++++
 stories/Map/map.stories.tsx             |   2 +
 3 files changed, 126 insertions(+)
 create mode 100644 stories/Map/components/destroyClear.tsx

diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts
index 03ea58e77d..d8976237fa 100644
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@@ -773,6 +773,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
 
     this.hooks.afterDestroy.call();
 
+    // TODO: 清除各个图层自定义的 models 资源
+    this.layerModel?.clearModels();
+    // @ts-ignore
+    this.encodedData = null;
+
     this.emit('remove', {
       target: this,
       type: 'remove',
diff --git a/stories/Map/components/destroyClear.tsx b/stories/Map/components/destroyClear.tsx
new file mode 100644
index 0000000000..85eb704b43
--- /dev/null
+++ b/stories/Map/components/destroyClear.tsx
@@ -0,0 +1,119 @@
+import { LineLayer, Scene, PolygonLayer } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class DestroyClear 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({
+        pitch: 40,
+        center: [107.77791556935472, 35.443286920228644],
+        zoom: 2.9142882493605033,
+        viewMode: '3D',
+      }),
+    });
+    this.scene = scene;
+    let layer: any = null;
+
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          let count = 1;
+          let timer = setInterval(() => {
+            layer = new PolygonLayer({ blend: 'normal' })
+              .source(data)
+              .size('name', [0, 10000, 50000, 30000, 100000])
+              .color('name', [
+                '#2E8AE6',
+                '#69D1AB',
+                '#DAF291',
+                '#FFD591',
+                '#FF7A45',
+                '#CF1D49',
+              ])
+              .shape('fill')
+              .select(true)
+              .style({
+                opacity: 0.8,
+                opacityLinear: {
+                  enable: true,
+                  dir: 'in', // in - out
+                },
+              });
+            scene.addLayer(layer);
+            count++;
+            setTimeout(() => {
+              if (count > 10) {
+                clearInterval(timer);
+              }
+              scene.removeLayer(layer);
+              console.log(scene.getLayers());
+            }, 3500);
+          }, 4000);
+        });
+      fetch(
+        'https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt',
+      )
+        .then((res) => res.text())
+        .then((data) => {
+          // let count = 1
+          // let timer = setInterval(() => {
+          //   layer = new LineLayer({})
+          //   .source(data, {
+          //     parser: {
+          //       type: 'csv',
+          //       x: 'lng1',
+          //       y: 'lat1',
+          //       x1: 'lng2',
+          //       y1: 'lat2',
+          //     },
+          //   })
+          //   .size(1)
+          //   .shape('arc')
+          //   .color('#8C1EB2')
+          //   .style({
+          //     opacity: 0.8,
+          //     blur: 0.99,
+          //   });
+          //   scene.addLayer(layer);
+          //   count++
+          //   setTimeout(() => {
+          //     if(count > 10) {
+          //       clearInterval(timer)
+          //     }
+          //     scene.removeLayer(layer)
+          //     console.log(scene.getLayers())
+          //   }, 3500 )
+          // }, 4000)
+        });
+    });
+  }
+
+  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 248a66714e..4f7d3abf59 100644
--- a/stories/Map/map.stories.tsx
+++ b/stories/Map/map.stories.tsx
@@ -65,6 +65,7 @@ import Amap2demo_textOffset from "./components/amap2demo_textOffset"
 import ShapeUpdate from './components/shapeUpdate'
 import AmapPlugin from './components/plugin'
 import PointUV from './components/pointUV'
+import DestroyClear from './components/destroyClear'
 
 // @ts-ignore
 storiesOf('地图方法', module)
@@ -133,3 +134,4 @@ storiesOf('地图方法', module)
         .add('ShapeUpdate', () => <ShapeUpdate/>)
         .add('AmapPlugin', () => <AmapPlugin/>)
         .add('PointUV', () => <PointUV/>)
+        .add('DestroyClear', () => <DestroyClear/>)