refactor: add source to common

antvis · May 22, 2022 · b80e9cf · b80e9cf
1 parent 6b3c96f
commit b80e9cf
Show file tree

Hide file tree

Showing 18 changed files with 191 additions and 100 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "test": "jest",
     "test-live": "DEBUG_MODE=1 jest --watch __tests__/unit",
     "test-cover": "jest --coverage",
-    "build": "lerna run build --stream --scope=@antv/l7plot*",
+    "build": "lerna run build --stream --scope=@antv/l7*",
     "build-l7lot": "lerna run build --stream --scope=@antv/l7plot",
     "build-composite-layers": "lerna run build --stream --scope=@antv/l7-composite-layers",
     "build-component": "lerna run build --stream --scope=@antv/l7plot-component",

diff --git a/packages/composite-layers/package.json b/packages/composite-layers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-composite-layers",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.3",
   "description": "Composite layer for @antv/l7",
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.ts",

diff --git a/packages/composite-layers/src/adaptor/source/index.ts b/packages/composite-layers/src/adaptor/source/index.ts
diff --git a/packages/composite-layers/src/composite-layers/bubble-layer/constants.ts b/packages/composite-layers/src/composite-layers/bubble-layer/constants.ts
@@ -37,6 +37,7 @@ export const DEFAULT_OPTIONS: Partial<BubbleLayerOptions> = {
   },
   radius: 12,
   fillColor: '#5FD3A6',
+  lineWidth: 1,
   state: {
     active: false,
     select: false,

diff --git a/packages/composite-layers/src/composite-layers/bubble-layer/index.ts b/packages/composite-layers/src/composite-layers/bubble-layer/index.ts
@@ -1,5 +1,4 @@
 import { clone, isEqual, isUndefined } from '@antv/util';
-import Source from '@antv/l7-source';
 import { CompositeLayer } from '../../core/composite-layer';
 import { PointLayer } from '../../core-layers/point-layer';
 import { TextLayer } from '../../core-layers/text-layer';
@@ -25,6 +24,10 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
   protected get layer() {
     return this.fillLayer;
   }
+  /**
+   * 图层间共享 source 实例
+   */
+  public source!: ISource;
   /**
    * 填充图层
    */
@@ -61,7 +64,7 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
    * 标注文本图层
    */
   public get labelLayer() {
-    return this.subLayers.getLayer('labelLayer') as ICoreLayer;
+    return this.subLayers.getLayer('labelLayer') as TextLayer;
   }
   /**
    * 图层交互状态配置
@@ -88,42 +91,43 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
    * 创建子图层
    */
   protected createSubLayers() {
-    this.layerState = getDefaultState(this.options.state);
     const sourceOptions = this.options.source;
-    const source = sourceOptions instanceof Source ? sourceOptions : this.createSource(sourceOptions);
+    const source = this.isSourceInstance(sourceOptions) ? sourceOptions : this.createSource(sourceOptions);
+    this.source = source;
+    this.layerState = getDefaultState(this.options.state);
 
     // 映射填充图层
     const fillLayer = new PointLayer({
-      name: 'fillLayer',
+      id: 'fillLayer',
       shape: 'circle',
       ...this.getFillLayerOptions(),
       source,
     });
 
     // 高亮描边图层
     const highlightStrokeLayer = new PointLayer({
-      name: 'highlightStrokeLayer',
+      id: 'highlightStrokeLayer',
       shape: 'circle',
       ...this.gethigHlightStrokeLayerOptions(),
     });
 
     // 选中填充图层
     const selectFillLayer = new PointLayer({
-      name: 'selectFillLayer',
+      id: 'selectFillLayer',
       shape: 'circle',
       ...this.getSelectFillLayerOptions(),
     });
 
     // 选中描边图层
     const selectStrokeLayer = new PointLayer({
-      name: 'selectStrokeLayer',
+      id: 'selectStrokeLayer',
       shape: 'circle',
       ...this.getSelectStrokeLayerOptions(),
     });
 
     // 标注图层
     const labelLayer = new TextLayer({
-      name: 'labelLayer',
+      id: 'labelLayer',
       ...this.getTextLayerOptions(),
       source,
     });
@@ -133,6 +137,9 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
     return subLayers;
   }
 
+  /**
+   * 获取填充图层配置项
+   */
   private getFillLayerOptions() {
     const {
       visible,
@@ -259,15 +266,15 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
    * 设置子图层数据
    */
   protected setSubLayersSource(source: SourceOptions | ISource) {
-    if (source instanceof Source) {
+    if (this.isSourceInstance(source)) {
+      this.source = source;
       this.fillLayer.setSource(source);
       this.labelLayer.setSource(source);
     } else {
-      const layerSource = this.fillLayer.source;
       const { data, ...option } = source;
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      layerSource.setData(data, option);
+      this.source.setData(data, option);
     }
 
     this.highlightStrokeLayer.changeData(EMPTY_SOURCE);
@@ -285,7 +292,7 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
     const features = feature ? [feature] : [];
     this.highlightStrokeLayer.changeData({
       data: features,
-      parser: this.fillLayer.source['parser'],
+      parser: this.source['parser'],
     });
     this.highlightData = featureId;
   }
@@ -304,8 +311,8 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
       return;
     }
     const features = selectData.map(({ feature }) => feature);
-    this.selectFillLayer.changeData({ data: features, parser: this.fillLayer.source['parser'] });
-    this.selectStrokeLayer.changeData({ data: features, parser: this.fillLayer.source['parser'] });
+    this.selectFillLayer.changeData({ data: features, parser: this.source['parser'] });
+    this.selectStrokeLayer.changeData({ data: features, parser: this.source['parser'] });
     this.selectData = selectData;
   }
 
@@ -447,6 +454,9 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
     }
   }
 
+  /**
+   * 设置图层 zIndex
+   */
   public setIndex(zIndex: number) {
     this.fillLayer.setIndex(zIndex);
     this.highlightStrokeLayer.setIndex(zIndex + 0.1);
@@ -455,6 +465,9 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
     this.labelLayer.setIndex(zIndex + 0.1);
   }
 
+  /**
+   * 设置图层高亮状态
+   */
   public setActive(field: string, value: number | string) {
     const source = this.fillLayer.source;
     const featureId = source.getFeatureId(field, value);
@@ -472,6 +485,9 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
     }
   }
 
+  /**
+   * 设置图层选中状态
+   */
   public setSelect(field: string, value: number | string) {
     const source = this.fillLayer.source;
     const featureId = source.getFeatureId(field, value);
@@ -487,6 +503,9 @@ export class BubbleLayer extends CompositeLayer<BubbleLayerOptions> {
     this.handleSelectData(featureId, feature);
   }
 
+  /**
+   * 图层框选数据
+   */
   public boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void) {
     this.fillLayer.boxSelect(bounds, callback);
   }

diff --git a/packages/composite-layers/src/composite-layers/choropleth-layer/constants.ts b/packages/composite-layers/src/composite-layers/choropleth-layer/constants.ts
@@ -34,6 +34,7 @@ export const DEFAULT_STATE: {
 export const DEFAULT_OPTIONS: Partial<ChoroplethLayerOptions> = {
   visible: true,
   source: EMPTY_SOURCE,
+  lineWidth: 1,
   state: {
     active: false,
     select: 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
@@ -1,5 +1,4 @@
 import { clone, isEqual, isUndefined } from '@antv/util';
-import Source from '@antv/l7-source';
 import { CompositeLayer } from '../../core/composite-layer';
 import { LineLayer } from '../../core-layers/line-layer';
 import { PolygonLayer } from '../../core-layers/polygon-layer';
@@ -26,6 +25,10 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
   protected get layer() {
     return this.fillLayer;
   }
+  /**
+   * 图层间共享 source 实例
+   */
+  public source!: ISource;
   /**
    * 填充面图层
    */
@@ -68,7 +71,7 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
    * 标注文本图层
    */
   public get labelLayer() {
-    return this.subLayers.getLayer('labelLayer') as ICoreLayer;
+    return this.subLayers.getLayer('labelLayer') as TextLayer;
   }
   /**
    * 图层交互状态配置
@@ -95,13 +98,14 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
    * 创建子图层
    */
   protected createSubLayers() {
-    this.layerState = getDefaultState(this.options.state);
     const sourceOptions = this.options.source;
-    const source = sourceOptions instanceof Source ? sourceOptions : this.createSource(sourceOptions);
+    const source = this.isSourceInstance(sourceOptions) ? sourceOptions : this.createSource(sourceOptions);
+    this.source = source;
+    this.layerState = getDefaultState(this.options.state);
 
     // 映射填充面图层
     const fillLayer = new PolygonLayer({
-      name: 'fillLayer',
+      id: 'fillLayer',
       shape: 'fill',
       ...this.getFillLayerOptions(),
       source,
@@ -111,33 +115,33 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
 
     // 描边图层
     const strokeLayer = new LineLayer({
-      name: 'strokeLayer',
+      id: 'strokeLayer',
       shape: 'line',
       ...this.getStrokeLayerOptions(),
       source,
     });
 
     // 高亮描边图层
     const highlightStrokeLayer = new LineLayer({
-      name: 'highlightStrokeLayer',
+      id: 'highlightStrokeLayer',
       ...this.gethigHlightStrokeLayerOptions(),
     });
 
     // 选中填充图层
     const selectFillLayer = new PolygonLayer({
-      name: 'selectFillLayer',
+      id: 'selectFillLayer',
       ...this.getSelectFillLayerOptions(),
     });
 
     // 选中描边图层
     const selectStrokeLayer = new LineLayer({
-      name: 'selectStrokeLayer',
+      id: 'selectStrokeLayer',
       ...this.getSelectStrokeLayerOptions(),
     });
 
     // 标注图层
     const labelLayer = new TextLayer({
-      name: 'labelLayer',
+      id: 'labelLayer',
       ...this.getTextLayerOptions(),
       source,
     });
@@ -147,6 +151,9 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
     return subLayers;
   }
 
+  /**
+   * 获取填充图层配置项
+   */
   private getFillLayerOptions() {
     const { visible, minZoom, maxZoom, zIndex = 0, fillColor, opacity, ...baseConfig } = this.options;
     const defaultState = this.layerState;
@@ -282,16 +289,16 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
    * 设置子图层数据
    */
   protected setSubLayersSource(source: ChoroplethLayerSourceOptions | ISource) {
-    if (source instanceof Source) {
+    if (this.isSourceInstance(source)) {
+      this.source = source;
       this.fillLayer.setSource(source);
       this.strokeLayer.setSource(source);
       this.labelLayer.setSource(source);
     } else {
-      const layerSource = this.fillLayer.source;
       const { data, ...option } = source;
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      layerSource.setData(data, option);
+      this.source.setData(data, option);
     }
 
     this.highlightStrokeLayer.changeData(EMPTY_SOURCE);
@@ -309,7 +316,7 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
     const features = feature ? [feature] : [];
     this.highlightStrokeLayer.changeData({
       data: { type: 'FeatureCollection', features },
-      parser: { type: 'geojson' },
+      parser: this.source['parser'],
     });
     this.highlightData = featureId;
   }
@@ -328,8 +335,8 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
       return;
     }
     const features = selectData.map(({ feature }) => feature);
-    this.selectFillLayer.changeData({ data: { type: 'FeatureCollection', features }, parser: { type: 'geojson' } });
-    this.selectStrokeLayer.changeData({ data: { type: 'FeatureCollection', features }, parser: { type: 'geojson' } });
+    this.selectFillLayer.changeData({ data: { type: 'FeatureCollection', features }, parser: this.source['parser'] });
+    this.selectStrokeLayer.changeData({ data: { type: 'FeatureCollection', features }, parser: this.source['parser'] });
     this.selectData = selectData;
   }
 
@@ -378,6 +385,9 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
     this.handleSelectData(featureId, feature);
   };
 
+  /**
+   * 处理选择数据私有方法
+   */
   private handleSelectData(featureId: number, feature: any) {
     const enabledMultiSelect = this.options.enabledMultiSelect;
     let selectData = clone(this.selectData);
@@ -474,6 +484,9 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
     }
   }
 
+  /**
+   * 设置图层 zIndex
+   */
   public setIndex(zIndex: number) {
     this.fillLayer.setIndex(zIndex);
     this.strokeLayer.setIndex(zIndex);
@@ -483,6 +496,9 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
     this.labelLayer.setIndex(zIndex + 0.1);
   }
 
+  /**
+   * 设置图层高亮状态
+   */
   public setActive(field: string, value: number | string) {
     const source = this.fillLayer.source;
     const featureId = source.getFeatureId(field, value);
@@ -500,6 +516,9 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
     }
   }
 
+  /**
+   * 设置图层选中状态
+   */
   public setSelect(field: string, value: number | string) {
     const source = this.fillLayer.source;
     const featureId = source.getFeatureId(field, value);
@@ -516,6 +535,9 @@ export class ChoroplethLayer extends CompositeLayer<ChoroplethLayerOptions> {
     // TODO: L7 method pickFeature(id|{x,y})
   }
 
+  /**
+   * 图层框选数据
+   */
   public boxSelect(bounds: [number, number, number, number], callback: (...args: any[]) => void) {
     this.fillLayer.boxSelect(bounds, callback);
   }