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