feat: 修复 scene.destroy 方法有残留 dom 的问题

packages/core/src/services/scene/SceneService.ts

@@ -333,6 +333,10 @@ export default class Scene extends EventEmitter implements ISceneService {
     this.interactionService.destroy();
     this.controlService.destroy();
     this.markerService.destroy();
+
+    // TODO: 销毁 container 容器
+    this.$container?.parentNode?.removeChild(this.$container)
+
     this.removeAllListeners();
     this.inited = false;
     unbind(this.$container as HTMLDivElement, this.handleWindowResized);

packages/maps/src/amap/map.ts

@@ -417,6 +417,10 @@ export default class AMapService
 
   public destroy() {
     this.map.destroy();
+    
+    // TODO: 销毁地图可视化层的容器
+    this.$mapContainer?.parentNode?.removeChild(this.$mapContainer)
+
     // @ts-ignore
     delete window.initAMap;
     const $jsapi = document.getElementById(AMAP_SCRIPT_ID);

packages/maps/src/amap2/map.ts

@@ -509,6 +509,10 @@ export default class AMapService
 
   public destroy() {
     this.map.destroy();
+
+    // TODO: 销毁地图可视化层的容器
+    this.$mapContainer?.parentNode?.removeChild(this.$mapContainer)
+    
     // @ts-ignore
     delete window.initAMap;
     const $jsapi = document.getElementById(AMAP_SCRIPT_ID);

packages/maps/src/map/map.ts

@@ -279,6 +279,10 @@ export default class L7MapService implements IMapService<Map> {
   }
 
   public destroy() {
+
+    // TODO: 销毁地图可视化层的容器
+    this.$mapContainer?.parentNode?.removeChild(this.$mapContainer)
+    
     this.eventEmitter.removeAllListeners();
     if (this.map) {
       this.map.remove();

packages/maps/src/mapbox/map.ts

@@ -362,6 +362,10 @@ export default class MapboxService
   }
 
   public destroy() {
+
+    // TODO: 销毁地图可视化层的容器
+    this.$mapContainer?.parentNode?.removeChild(this.$mapContainer)
+    
     this.eventEmitter.removeAllListeners();
     if (this.map) {
       this.map.remove();

stories/Map/components/amap2demo_destroy.tsx

@@ -0,0 +1,104 @@
+import { PointLayer, Scene } from '@antv/l7';
+import { GaodeMapV2 } from '@antv/l7-maps';
+import * as React from 'react';
+export default class Amap2demo_destroy extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMapV2({
+        center: [121.107846, 30.267069],
+        pitch: 0,
+        style: 'normal',
+        zoom: 20,
+        animateEnable: false,
+      }),
+    });
+    let originData = [
+      {
+        lng: 121.107846,
+        lat: 30.267069,
+        opacity2: 0.2,
+        strokeOpacity2: 0.4,
+        strokeColor: '#000',
+        strokeWidth: 0.5,
+        // offsets2: [0, 0]
+        offsets2: [100, 100],
+      },
+      {
+        lng: 121.107,
+        lat: 30.267069,
+        opacity2: 0.4,
+        strokeOpacity2: 0.6,
+        strokeColor: '#0f0',
+        strokeWidth: 2,
+        offsets2: [100, 100],
+      },
+      {
+        lng: 121.107846,
+        lat: 30.26718,
+        opacity2: 0.6,
+        strokeOpacity2: 0.8,
+        strokeColor: '#f00',
+        strokeWidth: 4,
+        // offsets2: [200, 200]
+        offsets2: [100, 100],
+      },
+      // {
+      //   lng: 38.54,
+      //   lat: 77.02,
+      //   opacity: 0.5
+      //   strokeColor: "#ff0"
+      // },
+    ];
+    this.scene = scene;
+    scene.on('loaded', () => {
+      let layer = new PointLayer()
+        .source(originData, {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        })
+        .shape('circle')
+        .color('rgba(255, 0, 0, 1.0)')
+        .size([10, 10, 100])
+        .style({
+          strokeWidth: 4,
+          opacity: 'opacity2',
+        })
+        .active(true);
+      scene.addLayer(layer);
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+        <button style={{
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          zIndex: 10
+        }} onClick={() => this.scene.destroy()}>destroy</button>
+      </>
+    );
+  }
+}

stories/Map/map.stories.tsx

@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import MapCenter from './components/mapCenter';
 import Amap2demo from './components/amap2demo'
+import Amap2demo_destroy from './components/amap2demo_destroy';
 import Amap2demo_extrude from './components/amap2demo_extrude'
 import Amapdemo_extrude from './components/amapdemo_extrude'
 import Amap2demo_text from './components/amap2demo_text'
@@ -118,3 +119,5 @@ storiesOf('地图方法', module)
 
         .add('高德地图 样式数据映射', () => <Amap2demo_styleMap/>)
         .add('高德地图 样式映射 文字偏移', () => <Amap2demo_textOffset/>)
+
+        .add('测试销毁', () => <Amap2demo_destroy/>)