chore: layer source (#175)

Co-authored-by: 象数 <zhengxue.lzx@antgroup.com> Co-authored-by: yunji <yunji.me@outlook.com>
antvis · Jul 13, 2022 · a6ab0c4 · a6ab0c4
1 parent 3d64017
commit a6ab0c4
Show file tree

Hide file tree

Showing 23 changed files with 686 additions and 93 deletions.
diff --git a/packages/composite-layers/src/composite-layers/bubble-layer/constants.ts b/packages/composite-layers/src/composite-layers/bubble-layer/constants.ts
@@ -1,26 +1,20 @@
+import { DEFAULT_HIGHLIGHT_COLOR, EMPTY_JSON_SOURCE } from '../common/constants';
 import { BubbleLayerActiveOptions, BubbleLayerOptions } from './types';
 
-/**
- * 空值 source
- */
-export const EMPTY_SOURCE = { data: [], parser: { type: 'json', x: 'x', y: 'y' } };
-
-const defaultHighlightColor = '#2f54eb';
-
 /**
  * 默认的全部交互状态配置
  */
 export const DEFAULT_STATE: { active: Required<BubbleLayerActiveOptions>; select: Required<BubbleLayerActiveOptions> } =
   {
     active: {
       fillColor: false,
-      strokeColor: defaultHighlightColor,
+      strokeColor: DEFAULT_HIGHLIGHT_COLOR,
       lineWidth: 1.5,
       lineOpacity: 1,
     },
     select: {
       fillColor: false,
-      strokeColor: defaultHighlightColor,
+      strokeColor: DEFAULT_HIGHLIGHT_COLOR,
       lineWidth: 1.5,
       lineOpacity: 1,
     },
@@ -31,10 +25,7 @@ export const DEFAULT_STATE: { active: Required<BubbleLayerActiveOptions>; select
  */
 export const DEFAULT_OPTIONS: Partial<BubbleLayerOptions> = {
   visible: true,
-  source: {
-    data: [],
-    parser: { type: 'json', x: 'x', y: 'y' },
-  },
+  source: EMPTY_JSON_SOURCE,
   radius: 12,
   fillColor: '#5FD3A6',
   lineWidth: 1,

diff --git a/packages/composite-layers/src/composite-layers/bubble-layer/index.ts b/packages/composite-layers/src/composite-layers/bubble-layer/index.ts
@@ -4,8 +4,10 @@ import { PointLayer } from '../../core-layers/point-layer';
 import { TextLayer } from '../../core-layers/text-layer';
 import { ICoreLayer, ISource, SourceOptions, MouseEvent } from '../../types';
 import { getDefaultState } from './adaptor';
-import { DEFAULT_OPTIONS, DEFAULT_STATE, EMPTY_SOURCE } from './constants';
+import { EMPTY_JSON_SOURCE } from '../common/constants';
+import { DEFAULT_OPTIONS, DEFAULT_STATE } from './constants';
 import { BubbleLayerOptions } from './types';
+import { getLabelLayerOptions } from '../common/label-layer';
 
 export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
   /**
@@ -22,10 +24,6 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
   protected get layer() {
     return this.fillLayer;
   }
-  /**
-   * 图层间共享 source 实例
-   */
-  public source!: ISource;
   /**
    * 填充图层
    */
@@ -89,9 +87,7 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
    * 创建子图层
    */
   protected createSubLayers() {
-    const sourceOptions = this.options.source;
-    const source = this.isSourceInstance(sourceOptions) ? sourceOptions : this.createSource(sourceOptions);
-    this.source = source;
+    const source = this.source;
     this.layerState = getDefaultState(this.options.state);
 
     // 映射填充图层
@@ -125,7 +121,7 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
 
     // 标注图层
     const labelLayer = new TextLayer({
-      ...this.getLabelLayerOptions(),
+      ...getLabelLayerOptions<BubbleLayerOptions>(this.options),
       id: 'labelLayer',
       source,
     });
@@ -195,7 +191,7 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
       zIndex: zIndex + 0.1,
       minZoom,
       maxZoom,
-      source: EMPTY_SOURCE,
+      source: EMPTY_JSON_SOURCE,
       size: radius,
       style: strokeStyle,
     };
@@ -214,7 +210,7 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
       zIndex: zIndex + 0.1,
       minZoom,
       maxZoom,
-      source: EMPTY_SOURCE,
+      source: EMPTY_JSON_SOURCE,
       color,
       size: radius,
       style: fillStyle,
@@ -239,28 +235,14 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
       zIndex: zIndex + 0.1,
       minZoom,
       maxZoom,
-      source: EMPTY_SOURCE,
+      source: EMPTY_JSON_SOURCE,
       size: radius,
       style: strokeStyle,
     };
 
     return option;
   }
 
-  private getLabelLayerOptions() {
-    const { visible, minZoom, maxZoom, zIndex = 0, label } = this.options;
-    const labelVisible = visible && Boolean(label) && (isUndefined(label?.visible) || label?.visible);
-    const options = {
-      zIndex: zIndex + 0.1,
-      minZoom,
-      maxZoom,
-      ...label,
-      visible: labelVisible,
-    };
-
-    return options;
-  }
-
   /**
    * 设置子图层数据
    */
@@ -274,9 +256,9 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
       this.source.setData(data, option);
     }
 
-    this.highlightStrokeLayer.changeData(EMPTY_SOURCE);
-    this.selectFillLayer.changeData(EMPTY_SOURCE);
-    this.selectStrokeLayer.changeData(EMPTY_SOURCE);
+    this.highlightStrokeLayer.changeData(EMPTY_JSON_SOURCE);
+    this.selectFillLayer.changeData(EMPTY_JSON_SOURCE);
+    this.selectStrokeLayer.changeData(EMPTY_JSON_SOURCE);
   }
 
   /**
@@ -418,7 +400,7 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
     this.selectStrokeLayer.update(this.getSelectStrokeLayerOptions());
 
     // 标注图层
-    this.labelLayer.update(this.getLabelLayerOptions());
+    this.labelLayer.update(getLabelLayerOptions<BubbleLayerOptions>(this.options));
 
     // 重置高亮/选中状态
     if (this.options.visible) {

diff --git a/packages/composite-layers/src/composite-layers/bubble-layer/types.ts b/packages/composite-layers/src/composite-layers/bubble-layer/types.ts
@@ -1,7 +1,7 @@
 import { PointLayerOptions } from '../../core-layers/point-layer/types';
-import { TextLayerOptions } from '../../core-layers/text-layer/types';
 import { CompositeLayerOptions } from '../../core/composite-layer';
 import { ISource, SourceOptions } from '../../types';
+import { LabelOptions } from '../common/types';
 
 export type BubbleLayerActiveOptions = {
   /** 填充颜色 */
@@ -46,7 +46,7 @@ export interface BubbleLayerOptions extends CompositeLayerOptions {
   /**
    * 文本标注
    */
-  label?: Omit<TextLayerOptions, 'source'>;
+  label?: LabelOptions;
   /**
    * 交互反馈
    */

diff --git a/packages/composite-layers/src/composite-layers/choropleth-layer/constants.ts b/packages/composite-layers/src/composite-layers/choropleth-layer/constants.ts
@@ -1,12 +1,6 @@
+import { DEFAULT_HIGHLIGHT_COLOR, EMPTY_GEOJSON_SOURCE } from '../common/constants';
 import { ChoroplethLayerActiveOptions, ChoroplethLayerOptions } from './types';
 
-/**
- * 空值 source
- */
-export const EMPTY_SOURCE = { data: { type: 'FeatureCollection', features: [] }, parser: { type: 'geojson' } };
-
-const defaultHighlightColor = '#2f54eb';
-
 /**
  * 默认的全部交互状态配置
  */
@@ -16,13 +10,13 @@ export const DEFAULT_STATE: {
 } = {
   active: {
     fillColor: false,
-    strokeColor: defaultHighlightColor,
+    strokeColor: DEFAULT_HIGHLIGHT_COLOR,
     lineWidth: 1,
     lineOpacity: 1,
   },
   select: {
     fillColor: false,
-    strokeColor: defaultHighlightColor,
+    strokeColor: DEFAULT_HIGHLIGHT_COLOR,
     lineWidth: 1,
     lineOpacity: 1,
   },
@@ -33,7 +27,7 @@ export const DEFAULT_STATE: {
  */
 export const DEFAULT_OPTIONS: Partial<ChoroplethLayerOptions> = {
   visible: true,
-  source: EMPTY_SOURCE,
+  source: EMPTY_GEOJSON_SOURCE,
   lineWidth: 1,
   state: {
     active: false,

diff --git a/packages/composite-layers/src/composite-layers/choropleth-layer/index.ts b/packages/composite-layers/src/composite-layers/choropleth-layer/index.ts
@@ -6,7 +6,9 @@ import { TextLayer } from '../../core-layers/text-layer';
 import { getDefaultState } from './adaptor';
 import { ChoroplethLayerOptions, ChoroplethLayerSourceOptions } from './types';
 import { ICoreLayer, ISource, MouseEvent } from '../../types';
-import { DEFAULT_OPTIONS, DEFAULT_STATE, EMPTY_SOURCE } from './constants';
+import { EMPTY_GEOJSON_SOURCE } from '../common/constants';
+import { DEFAULT_OPTIONS, DEFAULT_STATE } from './constants';
+import { getLabelLayerOptions } from '../common/label-layer';
 
 export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
   /**
@@ -23,10 +25,6 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
   protected get layer() {
     return this.fillLayer;
   }
-  /**
-   * 图层间共享 source 实例
-   */
-  public source!: ISource;
   /**
    * 填充面图层
    */
@@ -96,9 +94,7 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
    * 创建子图层
    */
   protected createSubLayers() {
-    const sourceOptions = this.options.source;
-    const source = this.isSourceInstance(sourceOptions) ? sourceOptions : this.createSource(sourceOptions);
-    this.source = source;
+    const source = this.source;
     this.layerState = getDefaultState(this.options.state);
 
     // 映射填充面图层
@@ -139,7 +135,7 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
 
     // 标注图层
     const labelLayer = new TextLayer({
-      ...this.getLabelLayerOptions(),
+      ...getLabelLayerOptions<ChoroplethLayerOptions>(this.options),
       id: 'labelLayer',
       source,
     });
@@ -221,7 +217,7 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
       zIndex: zIndex + 0.1,
       minZoom,
       maxZoom,
-      source: EMPTY_SOURCE,
+      source: EMPTY_GEOJSON_SOURCE,
       size: size,
       color: color,
       style: { opacity: defaultState.active.lineOpacity },
@@ -241,7 +237,7 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
       zIndex: zIndex + 0.1,
       minZoom,
       maxZoom,
-      source: EMPTY_SOURCE,
+      source: EMPTY_GEOJSON_SOURCE,
       color,
       style: fillStyle,
       state: { select: false, active: false },
@@ -261,7 +257,7 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
       zIndex: zIndex + 0.1,
       minZoom,
       maxZoom,
-      source: EMPTY_SOURCE,
+      source: EMPTY_GEOJSON_SOURCE,
       size,
       color,
       style: { opacity: defaultState.select.lineOpacity },
@@ -270,20 +266,6 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
     return option;
   }
 
-  private getLabelLayerOptions() {
-    const { visible, minZoom, maxZoom, zIndex = 0, label } = this.options;
-    const labelVisible = visible && Boolean(label) && (isUndefined(label?.visible) || label?.visible);
-    const options = {
-      zIndex: zIndex + 0.1,
-      minZoom,
-      maxZoom,
-      ...label,
-      visible: labelVisible,
-    };
-
-    return options;
-  }
-
   /**
    * 设置子图层数据
    */
@@ -298,9 +280,9 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
       this.source.setData(data, option);
     }
 
-    this.highlightStrokeLayer.changeData(EMPTY_SOURCE);
-    this.selectFillLayer.changeData(EMPTY_SOURCE);
-    this.selectStrokeLayer.changeData(EMPTY_SOURCE);
+    this.highlightStrokeLayer.changeData(EMPTY_GEOJSON_SOURCE);
+    this.selectFillLayer.changeData(EMPTY_GEOJSON_SOURCE);
+    this.selectStrokeLayer.changeData(EMPTY_GEOJSON_SOURCE);
   }
 
   /**
@@ -448,7 +430,7 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
     this.selectStrokeLayer.update(this.getSelectStrokeLayerOptions());
 
     // 标注图层
-    this.labelLayer.update(this.getLabelLayerOptions());
+    this.labelLayer.update(getLabelLayerOptions<ChoroplethLayerOptions>(this.options));
 
     // 重置高亮/选中状态
     if (this.options.visible) {

diff --git a/packages/composite-layers/src/composite-layers/choropleth-layer/types.ts b/packages/composite-layers/src/composite-layers/choropleth-layer/types.ts
@@ -1,7 +1,7 @@
 import { PolygonLayerOptions } from '../../core-layers/polygon-layer/types';
-import { TextLayerOptions } from '../../core-layers/text-layer/types';
 import { CompositeLayerOptions } from '../../core/composite-layer';
 import { ISourceCFG, ISource } from '../../types';
+import { LabelOptions } from '../common/types';
 
 /**
  * 数据配置
@@ -63,7 +63,7 @@ export interface ChoroplethLayerOptions extends CompositeLayerOptions {
   /**
    * 文本标注
    */
-  label?: Omit<TextLayerOptions, 'source'>;
+  label?: LabelOptions;
   /**
    * 交互反馈
    */

diff --git a/packages/composite-layers/src/composite-layers/common/constants.ts b/packages/composite-layers/src/composite-layers/common/constants.ts
@@ -0,0 +1,17 @@
+/**
+ * 空值 JSON source
+ */
+export const EMPTY_JSON_SOURCE = { data: [], parser: { type: 'json', x: 'x', y: 'y' } };
+
+/**
+ * 空值 GEOJSON source
+ */
+export const EMPTY_GEOJSON_SOURCE = {
+  data: {
+    type: 'FeatureCollection',
+    features: [],
+  },
+  parser: { type: 'geojson' },
+};
+
+export const DEFAULT_HIGHLIGHT_COLOR = '#2f54eb';
diff --git a/packages/composite-layers/src/composite-layers/common/label-layer.ts b/packages/composite-layers/src/composite-layers/common/label-layer.ts
@@ -0,0 +1,24 @@
+import { isUndefined } from '@antv/util';
+import { CompositeLayerOptions } from '../../core/composite-layer';
+import { LabelOptions } from './types';
+
+interface WrapLayerOptions extends CompositeLayerOptions {
+  label?: LabelOptions;
+}
+
+/**
+ * 获取标注图层配置项
+ */
+export const getLabelLayerOptions = <T extends WrapLayerOptions>(options: T) => {
+  const { visible, minZoom, maxZoom, zIndex = 0, label } = options;
+  const labelVisible = visible && Boolean(label) && (isUndefined(label?.visible) || label?.visible);
+  const labelLayerOptions = {
+    zIndex: zIndex + 0.1,
+    minZoom,
+    maxZoom,
+    ...label,
+    visible: labelVisible,
+  };
+
+  return labelLayerOptions;
+};
diff --git a/packages/composite-layers/src/composite-layers/common/types.ts b/packages/composite-layers/src/composite-layers/common/types.ts
@@ -0,0 +1,6 @@
+import { TextLayerOptions } from '../../core-layers/text-layer/types';
+
+/**
+ * 文本标注
+ */
+export type LabelOptions = Omit<TextLayerOptions, 'source'>;
diff --git a/packages/composite-layers/src/composite-layers/icon-layer/adaptor.ts b/packages/composite-layers/src/composite-layers/icon-layer/adaptor.ts
@@ -0,0 +1,7 @@
+import { isUndefined } from '@antv/util';
+import { DEFAULT_STATE } from './constants';
+import { IconLayerOptions, IconLayerActiveOptions } from './types';
+
+export const getDefaultState = (state?: IconLayerOptions['state']) => {
+  return DEFAULT_STATE;
+};