fix: canvas layer issues fixed (#1080)

* chore: update version 2.8.30 -> 2.8.31

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

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

* style: lint style

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;
 }

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;
     }

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();
       }

stories/Object/components/canvas.tsx

@@ -132,39 +132,35 @@ export default class Demo extends React.Component {
     this.scene = scene;
 
     scene.on('loaded', () => {
-      fetch(
+      const layer = new CanvasLayer({})
-        'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
+        .style({
-      )
+          zIndex: 10,
-        .then((res) => res.json())
+          update: 'always',
-        .then((data) => {
+          // update: 'dragend',
-          const layer = new CanvasLayer({})
+          drawingOnCanvas: this.draw,
-            .style({
+        })
-              zIndex: 10,
+        .animate({
-              update: 'always',
+          enable: true,
-              // 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);
         });
+      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)
     });
   }