refactor(layer): 更新layer渲染流程

packages/component/src/control/BaseControl.ts

@@ -1,8 +1,10 @@
 import {
+  IControlOption,
   IControlService,
   ILayerService,
   IMapService,
   IRendererService,
+  PositionName,
   TYPES,
 } from '@antv/l7-core';
 import { DOM } from '@antv/l7-utils';
@@ -15,18 +17,12 @@ export enum PositionType {
   'BOTTOMRIGHT' = 'bottomright',
   'BOTTOMLEFT' = 'bottomleft',
 }
-export type PositionName =
-  | 'topright'
-  | 'topleft'
-  | 'bottomright'
-  | 'bottomleft';
-export interface IControlOption {
-  position: PositionName;
-  [key: string]: any;
-}
+
+let controlId = 0;
 export default class Control extends EventEmitter {
   public controlOption: IControlOption;
   protected container: HTMLElement;
+  protected sceneContainer: Container;
   protected mapsService: IMapService;
   protected renderService: IRendererService;
   protected layerService: ILayerService;
@@ -45,18 +41,19 @@ export default class Control extends EventEmitter {
   public getDefault() {
     return {
       position: PositionType.TOPRIGHT,
+      name: `${controlId++}`,
     };
   }
   public setPosition(position: PositionName) {
     // 考虑组件的自动布局，需要销毁重建
-    // const controlService = this.controlService;
-    // if (controlService) {
-    //   controlService.removeControl(this);
-    // }
-    // this.controlOption.position = position;
-    // if (controlService) {
-    //   controlService.addControl(this, this.mapsService);
-    // }
+    const controlService = this.controlService;
+    if (controlService) {
+      controlService.removeControl(this);
+    }
+    this.controlOption.position = position;
+    if (controlService) {
+      controlService.addControl(this, this.sceneContainer);
+    }
     return this;
   }
   public addTo(sceneContainer: Container) {
@@ -68,7 +65,7 @@ export default class Control extends EventEmitter {
     this.controlService = sceneContainer.get<IControlService>(
       TYPES.IControlService,
     );
-
+    this.sceneContainer = sceneContainer;
     this.isShow = true;
     this.container = this.onAdd();
     const container = this.container;

packages/component/src/control/layer.ts

@@ -1,10 +1,6 @@
-import { IMapService } from '@antv/l7-core';
+import { IControlOption, PositionName, PositionType } from '@antv/l7-core';
 import { bindAll, DOM, lnglatDistance } from '@antv/l7-utils';
-import Control, {
-  IControlOption,
-  PositionName,
-  PositionType,
-} from './BaseControl';
+import Control from './BaseControl';
 export interface ILayerControlOption extends IControlOption {
   collapsed: boolean;
   autoZIndex: boolean;
@@ -55,6 +51,7 @@ export default class Layers extends Control {
       autoZIndex: true,
       hideSingleBase: false,
       sortLayers: false,
+      name: 'layers',
     };
   }
   public onAdd() {

packages/component/src/control/logo.ts

@@ -1,9 +1,11 @@
+import { IControlOption } from '@antv/l7-core';
 import { DOM } from '@antv/l7-utils';
 import Control, { PositionType } from './BaseControl';
 export default class Logo extends Control {
-  public getDefault() {
+  public getDefault(): IControlOption {
     return {
       position: PositionType.BOTTOMLEFT,
+      name: 'logo',
     };
   }
   public onAdd() {

packages/component/src/control/scale.ts

@@ -1,6 +1,7 @@
-import { IMapService } from '@antv/l7-core';
+import { IControlOption } from '@antv/l7-core';
 import { bindAll, DOM, lnglatDistance } from '@antv/l7-utils';
-import Control, { IControlOption, PositionType } from './BaseControl';
+
+import Control, { PositionType } from './BaseControl';
 export interface IScaleControlOption extends IControlOption {
   maxWidth: number;
   metric: boolean;
@@ -22,6 +23,7 @@ export default class Scale extends Control {
       metric: true,
       updateWhenIdle: false,
       imperial: false,
+      name: 'scale',
     };
   }
 

packages/component/src/control/zoom.ts

@@ -1,5 +1,6 @@
+import { IControlOption } from '@antv/l7-core';
 import { bindAll, DOM } from '@antv/l7-utils';
-import Control, { IControlOption, PositionType } from './BaseControl';
+import Control, { PositionType } from './BaseControl';
 export interface IZoomControlOption extends IControlOption {
   zoomInText: string;
   zoomInTitle: string;
@@ -22,6 +23,7 @@ export default class Zoom extends Control {
       zoomInTitle: 'Zoom in',
       zoomOutText: '−',
       zoomOutTitle: 'Zoom out',
+      name: 'zoom',
     };
   }
 

packages/core/src/services/component/ControlService.ts

@@ -32,6 +32,11 @@ export default class ControlService implements IControlService {
       this.unAddControls.push(ctr);
     }
   }
+  public getControlByName(name: string | number): IControl | undefined {
+    return this.controls.find((ctr) => {
+      return ctr.controlOption.name === name;
+    });
+  }
   public removeControl(ctr: IControl): this {
     const index = this.controls.indexOf(ctr);
     if (index > -1) {

packages/core/src/services/component/IControlService.ts

@@ -5,8 +5,16 @@ export enum PositionType {
   'BOTTOMRIGHT' = 'bottomright',
   'BOTTOMLEFT' = 'bottomleft',
 }
+
+export type PositionName =
+  | 'topright'
+  | 'topleft'
+  | 'bottomright'
+  | 'bottomleft';
 export interface IControlOption {
-  position: PositionType;
+  name: string;
+  position: PositionName;
+  [key: string]: any;
 }
 export interface IControlServiceCfg {
   container: HTMLElement;
@@ -15,6 +23,7 @@ export interface IControlCorners {
   [key: string]: HTMLElement;
 }
 export interface IControl {
+  controlOption: IControlOption;
   setPosition(pos: PositionType): void;
   addTo(sceneContainer: Container): void;
   onAdd(): HTMLElement;
@@ -29,6 +38,7 @@ export interface IControlService {
   addControls(): void;
   init(cfg: IControlServiceCfg, sceneContainer: Container): void;
   addControl(ctr: IControl, sceneContainer: Container): void;
+  getControlByName(name: string | number): IControl | undefined;
   removeControl(ctr: IControl): void;
   destroy(): void;
 }

packages/core/src/services/layer/LayerService.ts

@@ -73,6 +73,7 @@ export default class LayerService implements ILayerService {
     this.alreadyInRendering = true;
     this.clear();
     this.layers
+      .filter((layer) => layer.inited)
       .filter((layer) => layer.isVisible())
       .forEach((layer) => {
         // trigger hooks

packages/core/src/services/renderer/IMultiPassRenderer.ts

@@ -58,4 +58,5 @@ export interface IMultiPassRenderer {
   getRenderFlag(): boolean;
   setRenderFlag(enabled: boolean): void;
   setLayer(layer: ILayer): void;
+  destroy(): void;
 }

packages/core/src/services/renderer/passes/MultiPassRenderer.ts

@@ -82,4 +82,8 @@ export default class MultiPassRenderer implements IMultiPassRenderer {
     pass.init(this.layer, config);
     this.passes.splice(index, 0, pass);
   }
+
+  public destroy() {
+    this.passes.length = 0;
+  }
 }

packages/core/src/services/renderer/passes/PixelPickingPass.ts

@@ -34,6 +34,10 @@ export default class PixelPickingPass<
    */
   private layer: ILayer;
 
+  private width: number = 0;
+
+  private height: number = 0;
+
   /**
    * 简单的 throttle，防止连续触发 hover 时导致频繁渲染到 picking framebuffer
    */
@@ -91,8 +95,11 @@ export default class PixelPickingPass<
     this.alreadyInRendering = true;
 
     // resize first, fbo can't be resized in use
-    this.pickingFBO.resize({ width, height });
-
+    if (this.width !== width || this.height !== height) {
+      this.pickingFBO.resize({ width, height });
+      this.width = width;
+      this.height = height;
+    }
     useFramebuffer(this.pickingFBO, () => {
       clear({
         framebuffer: this.pickingFBO,

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

@@ -207,15 +207,13 @@ export default class Scene extends EventEmitter implements ISceneService {
       // FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？
 
       this.logger.info(' render inited');
+      this.layerService.initLayers();
       this.controlService.addControls();
       this.emit('loaded');
       this.inited = true;
     }
 
     // 尝试初始化未初始化的图层
-    this.once('loaded', () => {
-      this.layerService.initLayers();
-    });
     this.layerService.renderLayers();
     // 组件需要等待layer 初始化完成之后添加
 

packages/layers/src/core/BaseLayer.ts

@@ -659,6 +659,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     // 清除sources事件
     this.layerSource.off('update', this.sourceEvent);
 
+    this.multiPassRenderer.destroy();
+
     // 清除所有属性以及关联的 vao
     this.styleAttributeService.clearAllAttributes();
     // 销毁所有 model

packages/layers/src/point/models/text.ts

@@ -92,6 +92,7 @@ export default class TextModel extends BaseModel {
       stroke = '#fff',
       strokeWidth = 0,
     } = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;
+    this.updateTexture();
     const { canvas } = this.fontService;
     return {
       u_opacity: 1.0,

packages/scene/src/index.ts

@@ -158,6 +158,10 @@ class Scene
     this.controlService.removeControl(ctr);
   }
 
+  public getControlByName(name: string) {
+    return this.controlService.getControlByName(name);
+  }
+
   // marker
   public addMarker(marker: IMarker) {
     this.markerService.addMarker(marker);