8295648217

Committed 15 Mar 2024 11:43AM UTC coverage: 59.55% (-0.02%) from 59.572%

Build # 8295648217

Build Type

push

github

Committed by

web-flow

Commit Message

fix: 修复 Choropleth 下钻 Legend 更新不同步 (#350)

* fix: 临时修复 legend 异步数据获取情况

* fix: legend event

Run Details

1035 of 2471 branches covered (41.89%)

Branch coverage included in aggregate %.

4 of 12 new or added lines in 3 files covered. (33.33%)

71 existing lines in 2 files now uncovered.

3592 of 5299 relevant lines covered (67.79%)

138.55 hits per line

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

39.84

/packages/l7plot/src/layers/area-layer/index.ts

import { uniqueId, clone, isEqual, isUndefined } from '@antv/util';
import { PolygonLayer, LineLayer } from '@antv/l7';
import { PlotLayer } from '../../core/layer/plot-layer';
import { getDefaultState, mappingLayer } from './adaptor';
import { AreaLayerOptions, AreaLayerSourceOptions } from './types';
import { ILayer, MouseEvent, Scene, Source } from '../../types';
import { getColorLegendItems } from '../dot-layer/helper';

export type { AreaLayerOptions };

const DEFAULT_OPTIONS = {
  visible: true,
  state: {
    active: false,
    select: false,
  },
  enabledMultiSelect: false,
};
const LAYER_OPTIONS_KEYS = ['color', 'style', 'state', 'enabledMultiSelect'];

export class AreaLayer extends PlotLayer<AreaLayerOptions> {
  /**
   * 默认配置项
   */
  static DefaultOptions = DEFAULT_OPTIONS;
  /**
   * 图层配置项 Keys
   */
  static LayerOptionsKeys = PlotLayer.LayerConfigkeys.concat(LAYER_OPTIONS_KEYS);
  /**
   * 图层名称
   */
  public name: string;
  /**
   * 填充面图层实例
   */
  public layer: ILayer;
  /**
   * 描边图层
   */
  public strokeLayer: ILayer;
  /**
   * 高亮描边图层
   */
  public highlightLayer: ILayer;
  /**
   * 高亮描边数据
   */
  private highlightLayerData: any;
  /**
   * 选中填充面图层
   */
  public selectFillLayer: ILayer;
  /**
   * 选中描边图层
   */
  public selectStrokeLayer: ILayer;
  /**
   * 选中数据
   */
  private selectData: { feature: any; featureId: number }[] = [];
  /**
   * 图层类型
   */
  public type = PlotLayer.LayerType.AreaLayer;
  /**
   * 图层是否具有交互属性
   */
  public interaction = true;

  constructor(options: AreaLayerOptions) {
    super(options);
    const { name, source, visible, minZoom, maxZoom, zIndex = 0 } = this.options;
    const config = this.pickLayerConfig(this.options);
    const defaultState = getDefaultState(this.options.state);

    this.name = name ? name : uniqueId(this.type);
    this.layer = new PolygonLayer({ ...config, name: this.name });
    this.strokeLayer = new LineLayer({ name: 'strokeLayer', visible, zIndex, minZoom, maxZoom });

    this.highlightLayer = new LineLayer({
      name: 'highlightLayer',
      visible: visible && Boolean(defaultState.active.stroke),
      zIndex: zIndex + 0.1,
      minZoom,
      maxZoom,
    });
    this.selectFillLayer = new PolygonLayer({
      name: 'selectFillLayer',
      visible: visible && Boolean(defaultState.select.fill),
      zIndex: zIndex + 0.1,
      minZoom,
      maxZoom,
    });
    this.selectStrokeLayer = new LineLayer({
      name: 'selectStrokeLayer',
      visible: visible && Boolean(defaultState.select.stroke),
      zIndex: zIndex + 0.1,
      minZoom,
      maxZoom,
    });

    this.mappingLayer(this.options);
    this.setSource(source);
    this.initEvent();
  }

  /**
   * 获取默认配置
   */
  public getDefaultOptions(): Partial<AreaLayerOptions> {
    return DEFAULT_OPTIONS;
  }

  private mappingLayer(options: AreaLayerOptions) {
    mappingLayer(
      this.layer,
      this.strokeLayer,
      this.highlightLayer,
      this.selectFillLayer,
      this.selectStrokeLayer,
      options,
    );
  }

  protected setSource(source: AreaLayerSourceOptions | Source) {
    super.setSource(source);
    this.setStrokeLayerSource();
    this.setHighlightLayerSource();
    this.selectFillLayer.source({ type: 'FeatureCollection', features: [] }, { parser: { type: 'geojson' } });
    this.selectStrokeLayer.source({ type: 'FeatureCollection', features: [] }, { parser: { type: 'geojson' } });
  }

  protected setStrokeLayerSource() {
    const layerSource = this.layer.getSource();
    if (layerSource) {
      this.strokeLayer.setSource(layerSource);
    } else {
      const { data, options } = this.layer.sourceOption;
      this.strokeLayer.source(data, options);
    }
  }

  protected setHighlightLayerSource(feature?: any, featureId = -999) {
    if (this.highlightLayerData === featureId) {
      return;
    }
    const features = feature ? [feature] : [];
    if (this.highlightLayer.getSource()) {
      this.highlightLayer.setData({ type: 'FeatureCollection', features }, { parser: { type: 'geojson' } });
    } else {
      this.highlightLayer.source({ type: 'FeatureCollection', features: [] }, { parser: { type: 'geojson' } });
    }
    this.highlightLayerData = featureId;
  }

  protected setSelectLayerSource(selectData: any[] = []) {
    if (
      this.selectData.length === selectData.length &&
      isEqual(
        this.selectData.map(({ featureId }) => featureId),
        selectData.map(({ featureId }) => featureId),
      )
    ) {
      return;
    }
    const features = selectData.map(({ feature }) => feature);
    this.selectFillLayer.setData({ type: 'FeatureCollection', features }, { parser: { type: 'geojson' } });
    this.selectStrokeLayer.setData({ type: 'FeatureCollection', features }, { parser: { type: 'geojson' } });
    this.selectData = selectData;
  }

  private initEvent() {
    this.layer.off('mousemove', this.onHighlighHandle);
    this.layer.off('unmousemove', this.onHighlighHandle);
    this.layer.off('click', this.onSelectHandle);
    this.selectData = [];
    this.highlightLayerData = null;
    if (!this.options.state) return;
    // active
    if (this.options.state.active) {
      this.layer.on('mousemove', this.onHighlighHandle);
      this.layer.on('unmousemove', this.onUnhighlighHandle);
    }
    // select
    if (this.options.state.select) {
      this.layer.on('click', this.onSelectHandle);
    }
  }

  private onHighlighHandle = (event: MouseEvent) => {
    const { feature, featureId } = event;
    this.setHighlightLayerSource(feature, featureId);
  };

  private onUnhighlighHandle = () => {
    this.setHighlightLayerSource();
  };

  private onSelectHandle = (event: MouseEvent) => {
    const enabledMultiSelect = this.options.enabledMultiSelect;
    const { feature, featureId } = event;
    let selectData = clone(this.selectData);
    const index = selectData.findIndex((item) => item.featureId === featureId);

    if (index === -1) {
      if (enabledMultiSelect) {
        selectData.push({ feature, featureId });
      } else {
        selectData = [{ feature, featureId }];
      }
      this.emit('select', feature, clone(selectData));
    } else {
      const unselectFeature = selectData[index];
      if (enabledMultiSelect) {
        selectData.splice(index, 1);
      } else {
        selectData = [];
      }
      this.emit('unselect', unselectFeature, clone(selectData));
    }

    this.setSelectLayerSource(selectData);
  };

  public addTo(scene: Scene) {
    scene.addLayer(this.layer);
    scene.addLayer(this.strokeLayer);
    scene.addLayer(this.highlightLayer);
    scene.addLayer(this.selectFillLayer);
    scene.addLayer(this.selectStrokeLayer);
  }

  public remove(scene: Scene) {
    scene.removeLayer(this.layer);
    scene.removeLayer(this.strokeLayer);
    scene.removeLayer(this.highlightLayer);
    scene.removeLayer(this.selectFillLayer);
    scene.removeLayer(this.selectStrokeLayer);
  }

  public update(options: Partial<AreaLayerOptions>) {
    super.update(options);
    this.mappingLayer(this.options);

    if (this.options.visible) {
      if (!isUndefined(options.state) && !isEqual(this.lastOptions.state, this.options.state)) {
        this.updateHighlightLayer();
      }
      const defaultState = getDefaultState(this.options.state);
      if (defaultState.active.stroke) {
        this.setHighlightLayerSource();
      }
      if (defaultState.select.fill || defaultState.select.stroke) {
        this.setSelectLayerSource();
      }
    }

    this.initEvent();
  }

  private updateHighlightLayer() {
    const defaultState = getDefaultState(this.options.state);
    const lasetDefaultState = getDefaultState(this.lastOptions.state);

    if (lasetDefaultState.active.stroke !== defaultState.active.stroke) {
      defaultState.active.stroke ? this.highlightLayer.show() : this.highlightLayer.hide();
    }

    if (lasetDefaultState.select.fill !== defaultState.select.fill) {
      defaultState.select.fill ? this.selectFillLayer.show() : this.selectFillLayer.hide();
    }

    if (lasetDefaultState.select.stroke !== defaultState.select.stroke) {
      defaultState.select.stroke ? this.selectStrokeLayer.show() : this.selectStrokeLayer.hide();
    }
  }

  public setIndex(zIndex: number) {
    this.layer.setIndex(zIndex);
    this.strokeLayer.setIndex(zIndex);
    this.highlightLayer.setIndex(zIndex + 0.1);
    this.selectFillLayer.setIndex(zIndex + 0.1);
    this.selectStrokeLayer.setIndex(zIndex + 0.1);
  }

  public setMinZoom(minZoom: number) {
    this.layer.setMinZoom(minZoom);
    this.strokeLayer.setMinZoom(minZoom);
    this.highlightLayer.setMinZoom(minZoom);
    this.selectFillLayer.setMinZoom(minZoom);
    this.selectStrokeLayer.setMinZoom(minZoom);
  }

  public setMaxZoom(maxZoom: number) {
    this.layer.setMaxZoom(maxZoom);
    this.strokeLayer.setMaxZoom(maxZoom);
    this.highlightLayer.setMaxZoom(maxZoom);
    this.selectFillLayer.setMaxZoom(maxZoom);
    this.selectStrokeLayer.setMaxZoom(maxZoom);
  }

  public show() {
    if (!this.layer.inited) return;
    this.layer.show();
    this.strokeLayer.show();
    this.selectFillLayer.show();
    this.selectStrokeLayer.show();
  }

  public hide() {
    if (!this.layer.inited) return;
    this.layer.hide();
    this.strokeLayer.hide();
    this.selectFillLayer.hide();
    this.selectStrokeLayer.hide();
  }

  public getColorLegendItems() {
    const colorLegendItems = this.layer.getLegendItems('color');
    if (Array.isArray(colorLegendItems) && colorLegendItems.length !== 0) {
      const items = getColorLegendItems(colorLegendItems);
      return items;
    }

    return [];
  }

  public setActive(id: number) {
    // TODO: L7 method pickFeature(id|{x,y})
  }

  public setSelect(id: number) {
    // TODO: L7 method pickFeature(id|{x,y})
  }
}

1	import { uniqueId, clone, isEqual, isUndefined } from '@antv/util';
2	import { PolygonLayer, LineLayer } from '@antv/l7';	98✔
3	import { PlotLayer } from '../../core/layer/plot-layer';	98✔
4	import { getDefaultState, mappingLayer } from './adaptor';	98✔
5	import { AreaLayerOptions, AreaLayerSourceOptions } from './types';	98✔
6	import { ILayer, MouseEvent, Scene, Source } from '../../types';	98✔
7	import { getColorLegendItems } from '../dot-layer/helper';	98✔
8		98✔
9	export type { AreaLayerOptions };	98✔
10		98✔
11	const DEFAULT_OPTIONS = {
12	visible: true,
13	state: {
14	active: false,
15	select: false,
16	},
17	enabledMultiSelect: false,
18	};	98✔
19	const LAYER_OPTIONS_KEYS = ['color', 'style', 'state', 'enabledMultiSelect'];	98✔
20		98✔
21	export class AreaLayer extends PlotLayer<AreaLayerOptions> {
22	/**	16!
23	* 默认配置项
24	*/
25	static DefaultOptions = DEFAULT_OPTIONS;
26	/**	16✔
27	* 图层配置项 Keys
28	*/
29	static LayerOptionsKeys = PlotLayer.LayerConfigkeys.concat(LAYER_OPTIONS_KEYS);
30	/**	16✔
31	* 图层名称
32	*/
33	public name: string;
34	/**	16✔
35	* 填充面图层实例	16✔
36	*/	×
37	public layer: ILayer;	×
38	/**
39	* 描边图层	16✔
40	*/	×
41	public strokeLayer: ILayer;
42	/**	16✔
43	* 高亮描边图层	×
44	*/	×
45	public highlightLayer: ILayer;	×
46	/**	×
47	* 高亮描边数据	×
48	*/	×
49	private highlightLayerData: any;	×
50	/**
51	* 选中填充面图层
52	*/	×
53	public selectFillLayer: ILayer;
54	/**	×
55	* 选中描边图层
56	*/
57	public selectStrokeLayer: ILayer;	×
58	/**	×
59	* 选中数据	×
60	*/
61	private selectData: { feature: any; featureId: number }[] = [];
62	/**	×
63	* 图层类型
64	*/	×
65	public type = PlotLayer.LayerType.AreaLayer;
66	/**	×
67	* 图层是否具有交互属性
68	*/	16!
69	public interaction = true;	16✔
70		16✔
71	constructor(options: AreaLayerOptions) {	16!
72	super(options);	16✔
73	const { name, source, visible, minZoom, maxZoom, zIndex = 0 } = this.options;	16✔
74	const config = this.pickLayerConfig(this.options);	16✔
75	const defaultState = getDefaultState(this.options.state);
76		32✔
77	this.name = name ? name : uniqueId(this.type);
78	this.layer = new PolygonLayer({ ...config, name: this.name });
79	this.strokeLayer = new LineLayer({ name: 'strokeLayer', visible, zIndex, minZoom, maxZoom });
80
81	this.highlightLayer = new LineLayer({	16✔
82	name: 'highlightLayer',
83	visible: visible && Boolean(defaultState.active.stroke),	32✔
84	zIndex: zIndex + 0.1,
85	minZoom,
86	maxZoom,
87	});
88	this.selectFillLayer = new PolygonLayer({	16✔
89	name: 'selectFillLayer',
90	visible: visible && Boolean(defaultState.select.fill),	32✔
91	zIndex: zIndex + 0.1,
92	minZoom,
93	maxZoom,
94	});
95	this.selectStrokeLayer = new LineLayer({	16✔
96	name: 'selectStrokeLayer',	16✔
97	visible: visible && Boolean(defaultState.select.stroke),	16✔
98	zIndex: zIndex + 0.1,	16✔
99	minZoom,
100	maxZoom,
101	});
102
103	this.mappingLayer(this.options);	98✔
104	this.setSource(source);	16✔
105	this.initEvent();
106	}	98✔
107		16✔
108	/**
109	* 获取默认配置	98✔
110	*/	16✔
111	public getDefaultOptions(): Partial<AreaLayerOptions> {	16✔
112	return DEFAULT_OPTIONS;	16✔
113	}	16✔
114		16✔
115	private mappingLayer(options: AreaLayerOptions) {
116	mappingLayer(	98✔
117	this.layer,	16✔
118	this.strokeLayer,	16!
119	this.highlightLayer,	×
120	this.selectFillLayer,
121	this.selectStrokeLayer,
122	options,	16✔
123	);	16✔
124	}
125
126	protected setSource(source: AreaLayerSourceOptions \| Source) {	98✔
127	super.setSource(source);	16!
128	this.setStrokeLayerSource();	16!
129	this.setHighlightLayerSource();	×
130	this.selectFillLayer.source({ type: 'FeatureCollection', features: [] }, { parser: { type: 'geojson' } });
131	this.selectStrokeLayer.source({ type: 'FeatureCollection', features: [] }, { parser: { type: 'geojson' } });	16!
132	}	16!
UNCOV 133		×
134	protected setStrokeLayerSource() {
135	const layerSource = this.layer.getSource();
136	if (layerSource) {	16✔
137	this.strokeLayer.setSource(layerSource);
138	} else {	16✔
139	const { data, options } = this.layer.sourceOption;
140	this.strokeLayer.source(data, options);	98✔
UNCOV 141	}	×
142	}	×
143
UNCOV 144	protected setHighlightLayerSource(feature?: any, featureId = -999) {	×
145	if (this.highlightLayerData === featureId) {	×
146	return;
147	}	×
148	const features = feature ? [feature] : [];	×
149	if (this.highlightLayer.getSource()) {
NEW 150	this.highlightLayer.setData({ type: 'FeatureCollection', features }, { parser: { type: 'geojson' } });	×
151	} else {
NEW 152	this.highlightLayer.source({ type: 'FeatureCollection', features: [] }, { parser: { type: 'geojson' } });	×
NEW 153	}	×
154	this.highlightLayerData = featureId;	×
155	}
156		×
157	protected setSelectLayerSource(selectData: any[] = []) {	×
UNCOV 158	if (	×
159	this.selectData.length === selectData.length &&
160	isEqual(	98✔
161	this.selectData.map(({ featureId }) => featureId),	16✔
162	selectData.map(({ featureId }) => featureId),	16✔
163	)	16✔
164	) {	16✔
165	return;	16✔
166	}	16!
UNCOV 167	const features = selectData.map(({ feature }) => feature);	×
168	this.selectFillLayer.setData({ type: 'FeatureCollection', features }, { parser: { type: 'geojson' } });
169	this.selectStrokeLayer.setData({ type: 'FeatureCollection', features }, { parser: { type: 'geojson' } });	16!
170	this.selectData = selectData;	16✔
171	}	16✔
172
173	private initEvent() {
174	this.layer.off('mousemove', this.onHighlighHandle);	16!
175	this.layer.off('unmousemove', this.onHighlighHandle);	16✔
176	this.layer.off('click', this.onSelectHandle);
177	this.selectData = [];
178	this.highlightLayerData = null;	98✔
179	if (!this.options.state) return;	×
180	// active	×
181	if (this.options.state.active) {	×
182	this.layer.on('mousemove', this.onHighlighHandle);	×
UNCOV 183	this.layer.on('unmousemove', this.onUnhighlighHandle);	×
184	}
185	// select	98✔
186	if (this.options.state.select) {	×
187	this.layer.on('click', this.onSelectHandle);	×
188	}	×
189	}	×
UNCOV 190		×
191	private onHighlighHandle = (event: MouseEvent) => {
192	const { feature, featureId } = event;	98✔
193	this.setHighlightLayerSource(feature, featureId);	×
194	};	×
195		×
196	private onUnhighlighHandle = () => {	×
UNCOV 197	this.setHighlightLayerSource();	×
198	};
199		×
200	private onSelectHandle = (event: MouseEvent) => {	×
UNCOV 201	const enabledMultiSelect = this.options.enabledMultiSelect;	×
202	const { feature, featureId } = event;
203	let selectData = clone(this.selectData);	×
UNCOV 204	const index = selectData.findIndex((item) => item.featureId === featureId);	×
205
206	if (index === -1) {
UNCOV 207	if (enabledMultiSelect) {	×
208	selectData.push({ feature, featureId });
209	} else {	98✔
210	selectData = [{ feature, featureId }];	×
211	}	×
212	this.emit('select', feature, clone(selectData));	×
UNCOV 213	} else {	×
214	const unselectFeature = selectData[index];
215	if (enabledMultiSelect) {	×
UNCOV 216	selectData.splice(index, 1);	×
217	} else {
218	selectData = [];	×
UNCOV 219	}	×
220	this.emit('unselect', unselectFeature, clone(selectData));
221	}
222		98✔
223	this.setSelectLayerSource(selectData);	×
224	};	×
225		×
226	public addTo(scene: Scene) {	×
UNCOV 227	scene.addLayer(this.layer);	×
228	scene.addLayer(this.strokeLayer);
229	scene.addLayer(this.highlightLayer);	98✔
230	scene.addLayer(this.selectFillLayer);	×
231	scene.addLayer(this.selectStrokeLayer);	×
232	}	×
233		×
UNCOV 234	public remove(scene: Scene) {	×
235	scene.removeLayer(this.layer);
236	scene.removeLayer(this.strokeLayer);	98✔
237	scene.removeLayer(this.highlightLayer);	×
238	scene.removeLayer(this.selectFillLayer);	×
239	scene.removeLayer(this.selectStrokeLayer);	×
240	}	×
UNCOV 241		×
242	public update(options: Partial<AreaLayerOptions>) {
243	super.update(options);	98✔
244	this.mappingLayer(this.options);	×
245		×
246	if (this.options.visible) {	×
247	if (!isUndefined(options.state) && !isEqual(this.lastOptions.state, this.options.state)) {	×
248	this.updateHighlightLayer();	×
UNCOV 249	}	×
250	const defaultState = getDefaultState(this.options.state);
251	if (defaultState.active.stroke) {	98✔
252	this.setHighlightLayerSource();	×
253	}	×
254	if (defaultState.select.fill \|\| defaultState.select.stroke) {	×
255	this.setSelectLayerSource();	×
256	}	×
UNCOV 257	}	×
258
259	this.initEvent();	98✔
260	}	×
261		×
262	private updateHighlightLayer() {	×
UNCOV 263	const defaultState = getDefaultState(this.options.state);	×
264	const lasetDefaultState = getDefaultState(this.lastOptions.state);
UNCOV 265		×
266	if (lasetDefaultState.active.stroke !== defaultState.active.stroke) {
267	defaultState.active.stroke ? this.highlightLayer.show() : this.highlightLayer.hide();	98✔
268	}
269
270	if (lasetDefaultState.select.fill !== defaultState.select.fill) {	98✔
271	defaultState.select.fill ? this.selectFillLayer.show() : this.selectFillLayer.hide();
272	}
273
274	if (lasetDefaultState.select.stroke !== defaultState.select.stroke) {
275	defaultState.select.stroke ? this.selectStrokeLayer.show() : this.selectStrokeLayer.hide();
276	}	98✔
277	}
278
279	public setIndex(zIndex: number) {
280	this.layer.setIndex(zIndex);	98✔
281	this.strokeLayer.setIndex(zIndex);	98✔
282	this.highlightLayer.setIndex(zIndex + 0.1);
283	this.selectFillLayer.setIndex(zIndex + 0.1);	98✔
284	this.selectStrokeLayer.setIndex(zIndex + 0.1);
285	}
286
287	public setMinZoom(minZoom: number) {
288	this.layer.setMinZoom(minZoom);
289	this.strokeLayer.setMinZoom(minZoom);
290	this.highlightLayer.setMinZoom(minZoom);
291	this.selectFillLayer.setMinZoom(minZoom);
292	this.selectStrokeLayer.setMinZoom(minZoom);
293	}
294
295	public setMaxZoom(maxZoom: number) {
296	this.layer.setMaxZoom(maxZoom);
297	this.strokeLayer.setMaxZoom(maxZoom);
298	this.highlightLayer.setMaxZoom(maxZoom);
299	this.selectFillLayer.setMaxZoom(maxZoom);
300	this.selectStrokeLayer.setMaxZoom(maxZoom);
301	}
302
303	public show() {
304	if (!this.layer.inited) return;
305	this.layer.show();
306	this.strokeLayer.show();
307	this.selectFillLayer.show();
308	this.selectStrokeLayer.show();
309	}
310
311	public hide() {
312	if (!this.layer.inited) return;
313	this.layer.hide();
314	this.strokeLayer.hide();
315	this.selectFillLayer.hide();
316	this.selectStrokeLayer.hide();
317	}
318
319	public getColorLegendItems() {
320	const colorLegendItems = this.layer.getLegendItems('color');
321	if (Array.isArray(colorLegendItems) && colorLegendItems.length !== 0) {
322	const items = getColorLegendItems(colorLegendItems);
323	return items;
324	}
325
326	return [];
327	}
328
329	public setActive(id: number) {
330	// TODO: L7 method pickFeature(id\|{x,y})
331	}
332
333	public setSelect(id: number) {
334	// TODO: L7 method pickFeature(id\|{x,y})
335	}
336	}

antvis / L7Plot / 8295648217

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