From 90f92f069b06c33694e7eff0c6a9dc2ab389a0f4 Mon Sep 17 00:00:00 2001
From: YiQianYao <42212176+2912401452@users.noreply.github.com>
Date: Mon, 25 Apr 2022 15:11:34 +0800
Subject: [PATCH] fix: canvas layer issues fixed (#1080)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: update version 2.8.30 -> 2.8.31

* feat: 修复 canvasLayer hide/show 方法的失效

* fix: 修复 canvasLayer 在销毁时候的问题

* style: lint style
---
 .../core/src/services/layer/ILayerService.ts  |  3 +
 packages/layers/src/canvas/models/canvas.ts   |  2 +-
 packages/layers/src/core/BaseLayer.ts         |  5 +-
 stories/Object/components/canvas.tsx          | 60 +++++++++----------
 4 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts
index f07fd20980..c26e111d08 100644
--- a/packages/core/src/services/layer/ILayerService.ts
+++ b/packages/core/src/services/layer/ILayerService.ts
@@ -73,6 +73,9 @@ export interface ILayerModel {
   needUpdate(): boolean;
   clearModels(): void;
 
+  // canvasLayer
+  clearCanvas?(): void;
+
   // earth mode
   setEarthTime?(time: number): void;
 }
diff --git a/packages/layers/src/canvas/models/canvas.ts b/packages/layers/src/canvas/models/canvas.ts
index 67869ea179..a517b54f91 100644
--- a/packages/layers/src/canvas/models/canvas.ts
+++ b/packages/layers/src/canvas/models/canvas.ts
@@ -54,7 +54,7 @@ export default class CanvaModel extends BaseModel {
 
   public clearModels(): void {
     if (this.canvas) {
-      document.removeChild(this.canvas);
+      this.mapService.getContainer()?.removeChild(this.canvas);
       // @ts-ignore
       this.canvas = null;
     }
diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts
index 833ff05631..e809cbef1b 100644
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@@ -761,6 +761,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   }
 
   public hide(): ILayer {
+    if (this.type === 'CanvasLayer' && this.layerModel.clearCanvas) {
+      // 对 canvasLayer 的 hide 操作做特殊处理
+      this.layerModel.clearCanvas();
+    }
     this.updateLayerConfig({
       visible: false,
     });
@@ -1170,7 +1174,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
         this.hooks.beforeRender.call();
         this.layerModelNeedUpdate = false;
       }
-
       if (this.layerModel.renderUpdate) {
         this.layerModel.renderUpdate();
       }
diff --git a/stories/Object/components/canvas.tsx b/stories/Object/components/canvas.tsx
index 253cda9c9a..a1d1546194 100644
--- a/stories/Object/components/canvas.tsx
+++ b/stories/Object/components/canvas.tsx
@@ -132,39 +132,35 @@ export default class Demo extends React.Component {
     this.scene = scene;
 
     scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const layer = new CanvasLayer({})
-            .style({
-              zIndex: 10,
-              update: 'always',
-              // update: 'dragend',
-              drawingOnCanvas: this.draw,
-            })
-            .animate({
-              enable: true,
-            });
-          scene.addLayer(layer);
-
-          setInterval(() => {
-            x += 0.1;
-            layer.style({
-              drawingOnCanvas: this.draw,
-            });
-            scene.render();
-          }, 30);
-
-          // setTimeout(() => {
-          //   console.log('reSet');
-          //   layer.style({
-          //     update: 'dragend',
-          //   });
-          //   scene.render();
-          // }, 3000);
+      const layer = new CanvasLayer({})
+        .style({
+          zIndex: 10,
+          update: 'always',
+          // update: 'dragend',
+          drawingOnCanvas: this.draw,
+        })
+        .animate({
+          enable: true,
         });
+      scene.addLayer(layer);
+
+      setInterval(() => {
+        x += 0.1;
+      }, 30);
+
+      setTimeout(() => {
+        console.log('time out hide');
+        layer.hide();
+      }, 2000);
+
+      setTimeout(() => {
+        console.log('show');
+        layer.show();
+      }, 3000);
+
+      // setTimeout(() => {
+      //   scene.removeLayer(layer)
+      // }, 2000)
     });
   }