feat: 复合图层新增获取带有交互图层方法

antvis · Nov 10, 2022 · cc050e1 · cc050e1
1 parent f1518f4
commit cc050e1
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 19 deletions.
diff --git a/packages/composite-layers/src/composite-layers/bubble-layer/index.ts b/packages/composite-layers/src/composite-layers/bubble-layer/index.ts
@@ -66,10 +66,6 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
    * 图层交互状态配置
    */
   private layerState = DEFAULT_STATE;
-  /**
-   * 图层是否具有交互属性
-   */
-  public interaction = true;
 
   constructor(options: BubbleLayerOptions) {
     super(options);
@@ -96,6 +92,7 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
       id: 'fillLayer',
       shape: 'circle',
       source,
+      interaction: true,
     });
 
     // 高亮描边图层

diff --git a/packages/composite-layers/src/composite-layers/choropleth-layer/index.ts b/packages/composite-layers/src/composite-layers/choropleth-layer/index.ts
@@ -73,10 +73,6 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
    * 图层交互状态配置
    */
   private layerState = DEFAULT_STATE;
-  /**
-   * 图层是否具有交互属性
-   */
-  public interaction = true;
 
   constructor(options: ChoroplethLayerOptions) {
     super(options);
@@ -103,6 +99,7 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
       id: 'fillLayer',
       shape: 'fill',
       source,
+      interaction: true,
     });
     const fillBottomColor = this.options.fillBottomColor;
     fillBottomColor && fillLayer.layer.setBottomColor(fillBottomColor);

diff --git a/packages/composite-layers/src/composite-layers/icon-layer/icon.ts b/packages/composite-layers/src/composite-layers/icon-layer/icon.ts
@@ -52,11 +52,6 @@ export abstract class IconLayer<T extends IconLayerOptions> extends CompositeLay
     return this.subLayers.getLayer('selectIconLayer') as ICoreLayer;
   }
 
-  /**
-   * 图层是否具有交互属性
-   */
-  public interaction = true;
-
   constructor(options: T) {
     super(options);
     this.initSubLayersEvent();
@@ -187,6 +182,7 @@ export abstract class IconLayer<T extends IconLayerOptions> extends CompositeLay
       ...this.getIconLayerOptions(),
       id: 'iconLayer',
       source,
+      interaction: true,
     });
     // 选中效果
     const selectLayer = new PointLayer({

diff --git a/packages/composite-layers/src/core/composite-layer.ts b/packages/composite-layers/src/core/composite-layer.ts
@@ -89,15 +89,10 @@ export abstract class CompositeLayer<O extends CompositeLayerOptions> extends Ev
    * 主子图层实例
    */
   protected abstract readonly layer: ICoreLayer;
-  /**
-   * 图层是否具有交互效果，用于 tooltip
-   */
-  public abstract readonly interaction: boolean;
   /**
    * 图层间共享 source 实例
    */
   public source!: ISource;
-
   /**
    * 子图层组
    */
@@ -325,6 +320,16 @@ export abstract class CompositeLayer<O extends CompositeLayerOptions> extends Ev
     return [];
   }
 
+  /**
+   * 获取带有交互的子图层
+   * 一般用于是否启用 tooltip，图层事件绑定
+   */
+  public getInteractionSubLayers(): ICoreLayer[] {
+    const layers = this.subLayers.getLayers().filter((layer) => layer.interaction === true);
+
+    return layers;
+  }
+
   /**
    * 摧毁
    */

diff --git a/packages/composite-layers/src/core/core-layer.ts b/packages/composite-layers/src/core/core-layer.ts
@@ -66,6 +66,10 @@ export interface CoreLayerOptions extends Partial<LayerBaseConfig> {
    * 交互反馈
    */
   state?: StateAttribute;
+  /**
+   * 图层是否具有交互效果，用于复合图层 tooltip 是否启用
+   */
+  interaction?: boolean;
 }
 
 export abstract class CoreLayer<O extends CoreLayerOptions> extends EventEmitter implements ICoreLayer {
@@ -89,6 +93,10 @@ export abstract class CoreLayer<O extends CoreLayerOptions> extends EventEmitter
    * 图层类型
    */
   public abstract readonly type: string;
+  /**
+   * 图层是否具有交互效果，用于复合图层 tooltip 是否启用
+   */
+  public interaction: boolean;
   /**
    * 图层 schema 配置
    */
@@ -120,9 +128,10 @@ export abstract class CoreLayer<O extends CoreLayerOptions> extends EventEmitter
 
   constructor(options: O) {
     super();
-    const { id, name, source } = options;
+    const { id, name, source, interaction = false } = options;
     this.id = id ? id : uniqueId('core-layer');
     this.name = name ? name : this.id;
+    this.interaction = interaction;
     this.options = deepMergeLayerOptions<O>(this.getDefaultOptions() as O, options);
     this.lastOptions = this.options;
     this.layer = this.createLayer();

diff --git a/packages/composite-layers/src/types/interface.ts b/packages/composite-layers/src/types/interface.ts
@@ -33,6 +33,7 @@ export interface ICoreLayer {
   name: string;
   id: string;
   type: string;
+  interaction: boolean;
   layer: ILayer;
   inited: boolean;
   source: ISource;
@@ -106,6 +107,8 @@ export interface ICompositeLayer {
   getLegendItems(type: string): Record<string, any>[];
   getColorLegendItems(): Record<string, any>[];
 
+  getInteractionSubLayers(): ICoreLayer[];
+
   destroy(): void;
 
   on(name: string, callback: (...args: any[]) => void): this;