3763448570

Build Type

github

Committed by GitHub

Commit Message

Merge 3128c703f into da129e8ec

Pull Request Pull Request #262: refactor: 图层属性更新逻辑性能优化

Run Details

723 of 1953 branches covered (37.02%)

Branch coverage included in aggregate %.

8 of 8 new or added lines in 1 file covered. (100.0%)

3049 of 4601 relevant lines covered (66.27%)

177.64 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

21.78

/packages/l7plot/src/plots/flow/index.ts

import { pick } from '@antv/util';
import { Plot } from '../../core/plot';
import { FlowOptions } from './types';
import { DEFAULT_OPTIONS } from './constants';
import { ArcLayer } from '../../layers/arc-layer';
import { DotLayer } from '../../layers/dot-layer';
import { TextLayer } from '../../layers/text-layer';
import { LabelOptions, LegendOptions, Source } from '../../types';
import { LayerGroup } from '../../core/layer/layer-group';

export type { FlowOptions };

export class Flow extends Plot<FlowOptions> {
  /**
   * 默认配置项
   */
  static DefaultOptions = DEFAULT_OPTIONS;

  /**
   * 图表类型
   */
  public type = Plot.PlotType.Flow;

  /**
   * 流向图层
   */
  public flowLayer!: ArcLayer;

  /**
   * 辐射圈图层
   */
  public radiationLayer: DotLayer | undefined;

  /**
   * 落地点标注图层
   */
  public labelLayer: TextLayer | undefined;

  /**
   * 获取默认配置
   */
  protected getDefaultOptions(): Partial<FlowOptions> {
    return Flow.DefaultOptions;
  }

  /**
   * 创建图层
   */
  protected createLayers(source: Source): LayerGroup {
    this.flowLayer = new ArcLayer({
      name: 'flowLayer',
      source,
      ...pick<any>(this.options, ArcLayer.LayerOptionsKeys),
    });
    const layerGroup = new LayerGroup([this.flowLayer]);

    if (this.options.radiation) {
      this.radiationLayer = this.createRadiationLayer(source);
      layerGroup.addLayer(this.radiationLayer);
    }

    if (this.options.label) {
      this.labelLayer = this.createLabelLayer(source, this.options.label);
      layerGroup.addLayer(this.labelLayer);
    }

    return layerGroup;
  }

  /**
   * 解析流向图起终点数据
   */
  private parserPointData(source: Source) {
    // const pointMap = {};
    const data: any[] = [];
    source.data.dataArray.forEach((item) => {
      const { coordinates } = item;
      // [startPoint, endPoint]
      const [, endPoint] = coordinates;
      // if (isUndefined(pointMap[startPoint.toString()])) {
      //   data.push({ ...item, coordinates: startPoint });
      //   pointMap[startPoint.toString()] = true;
      // }
      data.push({ ...item, coordinates: endPoint });
    });

    return data;
  }

  /**
   * 创建辐射圈图层
   */
  protected createRadiationLayer(source: Source): DotLayer {
    const data = this.parserPointData(source);
    const { enabled = true, color, size = 20, shape = 'circle', animate = true } = this.options.radiation || {};
    const radiationLayer = new DotLayer({
      name: 'radiationLayer',
      source: {
        data,
        parser: { type: 'json', coordinates: 'coordinates' },
      },
      visible: enabled,
      color,
      size,
      shape,
      animate,
    });

    const updateCallback = () => {
      const data = this.parserPointData(this.source);
      radiationLayer.layer.setData(data);
    };

    source.on('update', updateCallback);
    radiationLayer.on('remove', () => {
      source.off('update', updateCallback);
    });

    return radiationLayer;
  }

  /**
   * 创建数据标签图层
   */
  protected createLabelLayer(source: Source, label: LabelOptions): TextLayer {
    const data = this.parserPointData(source);
    const { visible, minZoom, maxZoom, zIndex = 0 } = this.options;
    const labelLayer = new TextLayer({
      name: 'labelLayer',
      source: {
        data,
        parser: { type: 'json', coordinates: 'coordinates' },
      },
      visible,
      minZoom,
      maxZoom,
      zIndex: zIndex + 0.1,
      ...label,
    });

    const updateCallback = () => {
      const data = this.parserPointData(this.source);
      labelLayer.layer.setData(data);
    };

    source.on('update', updateCallback);
    labelLayer.on('remove', () => {
      source.off('update', updateCallback);
    });

    return labelLayer;
  }

  /**
   * 更新图层
   */
  protected updateLayers(options: FlowOptions) {
    const flowLayerConfig = pick<any>(options, ArcLayer.LayerOptionsKeys);
    this.flowLayer.update(flowLayerConfig);

    if (options.radiation) {
      if (this.radiationLayer) {
        const radiation = { ...options.radiation, visible: options.radiation.enabled };
        this.radiationLayer.update(radiation);
      } else {
        this.radiationLayer = this.createRadiationLayer(this.source);
        this.layerGroup.addLayer(this.radiationLayer);
      }
    }

    this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
  }

  /**
   * 实现 legend 配置项
   */
  public getLegendOptions(): LegendOptions {
    const colorLegendItems = this.flowLayer.getColorLegendItems();
    if (colorLegendItems.length !== 0) {
      return { type: 'category', items: colorLegendItems };
    }

    return {};
  }
}

1	import { pick } from '@antv/util';
2	import { Plot } from '../../core/plot';	127✔
3	import { FlowOptions } from './types';	127✔
4	import { DEFAULT_OPTIONS } from './constants';	127✔
5	import { ArcLayer } from '../../layers/arc-layer';	127✔
6	import { DotLayer } from '../../layers/dot-layer';	127✔
7	import { TextLayer } from '../../layers/text-layer';	127✔
8	import { LabelOptions, LegendOptions, Source } from '../../types';	127✔
9	import { LayerGroup } from '../../core/layer/layer-group';	127✔
10		127✔
11	export type { FlowOptions };	127✔
12		127✔
13	export class Flow extends Plot<FlowOptions> {	127✔
14	/**
15	* 默认配置项	×
16	*/
17	static DefaultOptions = DEFAULT_OPTIONS;
18
19	/**	×
20	* 图表类型	×
21	*/
22	public type = Plot.PlotType.Flow;
23
24	/**
25	* 流向图层	127✔
26	*/	×
27	public flowLayer!: ArcLayer;
28
29	/**
30	* 辐射圈图层
31	*/	127✔
32	public radiationLayer: DotLayer \| undefined;	×
33		×
34	/**	×
35	* 落地点标注图层	×
36	*/	×
37	public labelLayer: TextLayer \| undefined;
38		×
39	/**	×
40	* 获取默认配置	×
41	*/
42	protected getDefaultOptions(): Partial<FlowOptions> {	×
43	return Flow.DefaultOptions;
44	}
45
46	/**
47	* 创建图层	127✔
48	*/
49	protected createLayers(source: Source): LayerGroup {	×
50	this.flowLayer = new ArcLayer({	×
51	name: 'flowLayer',	×
52	source,
53	...pick<any>(this.options, ArcLayer.LayerOptionsKeys),	×
54	});
55	const layerGroup = new LayerGroup([this.flowLayer]);
56
57	if (this.options.radiation) {
58	this.radiationLayer = this.createRadiationLayer(source);	×
59	layerGroup.addLayer(this.radiationLayer);
60	}	×
61
62	if (this.options.label) {
63	this.labelLayer = this.createLabelLayer(source, this.options.label);
64	layerGroup.addLayer(this.labelLayer);
65	}	127✔
66		×
67	return layerGroup;	×
68	}	×
69		×
70	/**
71	* 解析流向图起终点数据
72	*/
73	private parserPointData(source: Source) {
74	// const pointMap = {};
75	const data: any[] = [];
76	source.data.dataArray.forEach((item) => {
77	const { coordinates } = item;
78	// [startPoint, endPoint]
79	const [, endPoint] = coordinates;
80	// if (isUndefined(pointMap[startPoint.toString()])) {
81	// data.push({ ...item, coordinates: startPoint });	×
82	// pointMap[startPoint.toString()] = true;	×
83	// }	×
84	data.push({ ...item, coordinates: endPoint });
85	});	×
86		×
87	return data;	×
88	}
89		×
90	/**
91	* 创建辐射圈图层
92	*/
93	protected createRadiationLayer(source: Source): DotLayer {
94	const data = this.parserPointData(source);	127✔
95	const { enabled = true, color, size = 20, shape = 'circle', animate = true } = this.options.radiation \|\| {};	×
96	const radiationLayer = new DotLayer({	×
97	name: 'radiationLayer',	×
98	source: {	×
99	data,
100	parser: { type: 'json', coordinates: 'coordinates' },
101	},
102	visible: enabled,	×
103	color,	×
104	size,	×
105	shape,
106	animate,	×
107	});	×
108		×
109	const updateCallback = () => {
110	const data = this.parserPointData(this.source);	×
111	radiationLayer.layer.setData(data);
112	};
113
114	source.on('update', updateCallback);
115	radiationLayer.on('remove', () => {	127✔
116	source.off('update', updateCallback);	×
117	});	×
118		×
119	return radiationLayer;	×
120	}	×
121		×
122	/**
123	* 创建数据标签图层
124	*/	×
125	protected createLabelLayer(source: Source, label: LabelOptions): TextLayer {	×
126	const data = this.parserPointData(source);
127	const { visible, minZoom, maxZoom, zIndex = 0 } = this.options;
128	const labelLayer = new TextLayer({	×
129	name: 'labelLayer',
130	source: {
131	data,
132	parser: { type: 'json', coordinates: 'coordinates' },
133	},	127✔
134	visible,	×
135	minZoom,	×
136	maxZoom,	×
137	zIndex: zIndex + 0.1,
138	...label,	×
139	});
140
141	const updateCallback = () => {
142	const data = this.parserPointData(this.source);
143	labelLayer.layer.setData(data);	127✔
144	};	127✔
145
146	source.on('update', updateCallback);	127✔
147	labelLayer.on('remove', () => {
148	source.off('update', updateCallback);
149	});
150
151	return labelLayer;
152	}
153
154	/**
155	* 更新图层
156	*/
157	protected updateLayers(options: FlowOptions) {
158	const flowLayerConfig = pick<any>(options, ArcLayer.LayerOptionsKeys);
159	this.flowLayer.update(flowLayerConfig);
160
161	if (options.radiation) {
162	if (this.radiationLayer) {
163	const radiation = { ...options.radiation, visible: options.radiation.enabled };
164	this.radiationLayer.update(radiation);
165	} else {
166	this.radiationLayer = this.createRadiationLayer(this.source);
167	this.layerGroup.addLayer(this.radiationLayer);
168	}
169	}
170
171	this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
172	}
173
174	/**
175	* 实现 legend 配置项
176	*/
177	public getLegendOptions(): LegendOptions {
178	const colorLegendItems = this.flowLayer.getColorLegendItems();
179	if (colorLegendItems.length !== 0) {
180	return { type: 'category', items: colorLegendItems };
181	}
182
183	return {};
184	}
185	}

antvis / L7Plot / 3763448570

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous