5285254265

import { debounce } from 'lodash-es';
import { LineLayer } from '../../core-layers/line-layer';
import { LineLayerOptions } from '../../core-layers/line-layer/types';
import { PointLayer } from '../../core-layers/point-layer';
import { PointLayerOptions } from '../../core-layers/point-layer/types';
import { CompositeLayer } from '../../core/composite-layer';
import { ICoreLayer, Scene } from '../../types';
import { DEFAULT_OPTIONS } from './constants';
import { DataProvider } from './data';
import { FlowDataProviderState, FlowLayerOptions, MapStatus } from './types';
import { getColorAttribute, getOpacityColorAttribute, getSizeAttribute } from './utils';

export class FlowLayer extends CompositeLayer<FlowLayerOptions> {
  /**
   * 默认配置项
   */
  public static DefaultOptions = DEFAULT_OPTIONS;
  /**
   * 复合图层类型
   */
  public type = CompositeLayer.LayerType.FlowLayer;

  /**
   * 数据计算中心
   */
  public dataProvider = new DataProvider();

  /**
   * 数据计算中心状态管理
   */
  public dataProviderState!: FlowDataProviderState;

  protected get layer() {
    return this.lineLayer;
  }

  public get circleLayer() {
    return this.subLayers.getLayer('circleLayer')!;
  }

  public get lineLayer() {
    return this.subLayers.getLayer('lineLayer')!;
  }

  /**
   * 获取默认配置
   */
  public getDefaultOptions(): Partial<FlowLayerOptions> {
    return FlowLayer.DefaultOptions;
  }

  protected createSubLayers(): ICoreLayer[] {
    const locationLayer = new PointLayer({
      ...this.getCircleLayerOptions(),
      id: 'circleLayer',
      name: 'circleLayer',
    });

    const flowLayer = new LineLayer({
      ...this.getLineLayerOptions(),
      id: 'lineLayer',
      name: 'lineLayer',
    });

    return [flowLayer, locationLayer];
  }

  public addTo(scene: Scene) {
    this.scene = scene;
    this.updateSubLayers();
    super.addTo(scene);
    this.scene?.on('zoomchange', this.onMapChange);
    this.scene?.on('mapmove', this.onMapChange);
  }

  public remove() {
    super.remove();
    this.scene?.off('zoomchange', this.onMapChange);
    this.scene?.off('mapmove', this.onMapChange);
  }

  protected updateSubLayers() {
    this.updateClusterState();
    this.circleLayer.update(this.getCircleLayerOptions());
    this.lineLayer.update(this.getLineLayerOptions());
  }

  protected onMapChange = debounce(
    () => {
      this.updateSubLayers();
    },
    100,
    {
      maxWait: 500,
    }
  );

  protected updateClusterState() {
    const scene = this.scene;
    if (!scene) {
      return;
    }
    const maxZoom = scene.getMaxZoom();
    const minZoom = scene.getMinZoom();

    this.dataProviderState = {
      ...(this.options as Required<FlowLayerOptions>),
      mapStatus: {
        zoom: scene.getZoom(),
        bounds: scene.getBounds().flat() as MapStatus['bounds'],
      },
      maxZoom,
      minZoom,
    };
  }

  protected getCircleLayerOptions(): PointLayerOptions {
    const {
      minZoom,
      maxZoom,
      zIndex,
      visible,
      blend,
      pickingBuffer,
      circleStrokeColor: stroke,
      circleStrokeWidth: strokeWidth,
      circleOpacity: opacity,
    } = this.options;
    const options: PointLayerOptions = {
      source: {
        data: [],
        parser: {
          type: 'json',
          x: 'lng',
          y: 'lat',
        },
      },
      shape: 'circle',
      minZoom,
      maxZoom,
      zIndex,
      visible,
      blend,
      pickingBuffer,
      style: {
        stroke,
        strokeWidth,
        opacity,
      },
    };
    if (this.dataProvider && this.scene) {
      const locationWeightRange = this.dataProvider.getLocationWeightRange(this.options.source, this.dataProviderState);
      options.source.data = this.dataProvider.getFilterLocations(this.options.source, this.dataProviderState);
      options.size = getSizeAttribute(this.options.circleRadius!, locationWeightRange);
      options.color = getColorAttribute(this.options.circleColor!, locationWeightRange);
    }

    return options;
  }

  protected getLineLayerOptions(): LineLayerOptions {
    const { minZoom, maxZoom, zIndex, visible, blend, pickingBuffer, lineOpacity: opacity } = this.options;
    const options: LineLayerOptions = {
      source: {
        data: [],
        parser: {
          type: 'json',
          x: 'fromLng',
          y: 'fromLat',
          x1: 'toLng',
          y1: 'toLat',
        },
      },
      shape: 'halfLine',
      minZoom,
      maxZoom,
      zIndex,
      visible,
      blend,
      pickingBuffer,
      style: {
        borderColor: '#000',
        borderWidth: 1,
        opacity,
      },
    };
    if (this.dataProvider && this.scene) {
      const flowWeightRange = this.dataProvider.getFlowWeightRange(this.options.source, this.dataProviderState);
      const filterFlowWeightRange = this.dataProvider.getFilterFlowWeightRange(
        this.options.source,
        this.dataProviderState
      );
      if (this.options.fadeOpacityEnabled && options.style) {
        options.style.opacity = getOpacityColorAttribute(filterFlowWeightRange, this.options.fadeOpacityAmount!);
      }
      options.source.data = this.dataProvider.getFilterFlows(this.options.source, this.dataProviderState);
      options.size = getSizeAttribute(this.options.lineWidth!, flowWeightRange);
      options.color = getColorAttribute(this.options.lineColor!, flowWeightRange);
    }
    return options;
  }
}

1	import { debounce } from 'lodash-es';
2	import { LineLayer } from '../../core-layers/line-layer';	24✔
3	import { LineLayerOptions } from '../../core-layers/line-layer/types';	24✔
4	import { PointLayer } from '../../core-layers/point-layer';	24✔
5	import { PointLayerOptions } from '../../core-layers/point-layer/types';	24✔
6	import { CompositeLayer } from '../../core/composite-layer';	24✔
7	import { ICoreLayer, Scene } from '../../types';	24✔
8	import { DEFAULT_OPTIONS } from './constants';	24✔
9	import { DataProvider } from './data';	24✔
10	import { FlowDataProviderState, FlowLayerOptions, MapStatus } from './types';	24✔
11	import { getColorAttribute, getOpacityColorAttribute, getSizeAttribute } from './utils';	24✔
12		24✔
13	export class FlowLayer extends CompositeLayer<FlowLayerOptions> {	24✔
14	/**
15	* 默认配置项	23!
16	*/
17	public static DefaultOptions = DEFAULT_OPTIONS;
18	/**
19	* 复合图层类型	23✔
20	*/
21	public type = CompositeLayer.LayerType.FlowLayer;
22
23	/**	23✔
24	* 数据计算中心	23✔
25	*/	×
26	public dataProvider = new DataProvider();
27
28	/**
29	* 数据计算中心状态管理	23✔
30	*/
31	public dataProviderState!: FlowDataProviderState;	24✔
32
33	protected get layer() {	×
34	return this.lineLayer;
35	}
36
37	public get circleLayer() {
38	return this.subLayers.getLayer('circleLayer')!;	24✔
39	}
40		92✔
41	public get lineLayer() {
42	return this.subLayers.getLayer('lineLayer')!;
43	}
44
45	/**	24✔
46	* 获取默认配置
47	*/	46✔
48	public getDefaultOptions(): Partial<FlowLayerOptions> {
49	return FlowLayer.DefaultOptions;
50	}
51
52	protected createSubLayers(): ICoreLayer[] {
53	const locationLayer = new PointLayer({
54	...this.getCircleLayerOptions(),
55	id: 'circleLayer',	24✔
56	name: 'circleLayer',	23✔
57	});
58		24✔
59	const flowLayer = new LineLayer({	23✔
60	...this.getLineLayerOptions(),	23✔
61	id: 'lineLayer',	23✔
62	name: 'lineLayer',
63	});	24✔
64
65	return [flowLayer, locationLayer];	×
66	}	×
67		×
68	public addTo(scene: Scene) {	×
69	this.scene = scene;	×
70	this.updateSubLayers();
71	super.addTo(scene);	24✔
72	this.scene?.on('zoomchange', this.onMapChange);
73	this.scene?.on('mapmove', this.onMapChange);	×
74	}	×
75		×
76	public remove() {
77	super.remove();	24✔
78	this.scene?.off('zoomchange', this.onMapChange);	×
79	this.scene?.off('mapmove', this.onMapChange);	×
80	}	×
81
82	protected updateSubLayers() {	24✔
83	this.updateClusterState();	×
84	this.circleLayer.update(this.getCircleLayerOptions());	×
85	this.lineLayer.update(this.getLineLayerOptions());	×
86	}
87		×
88	protected onMapChange = debounce(	×
89	() => {	×
90	this.updateSubLayers();
91	},
92	100,
93	{
94	maxWait: 500,	24✔
95	}	23✔
96	);	23✔
97
98	protected updateClusterState() {
99	const scene = this.scene;
100	if (!scene) {
101	return;
102	}
103	const maxZoom = scene.getMaxZoom();
104	const minZoom = scene.getMinZoom();
105
106	this.dataProviderState = {
107	...(this.options as Required<FlowLayerOptions>),
108	mapStatus: {
109	zoom: scene.getZoom(),
110	bounds: scene.getBounds().flat() as MapStatus['bounds'],
111	},
112	maxZoom,
113	minZoom,
114	};
115	}
116
117	protected getCircleLayerOptions(): PointLayerOptions {
118	const {	23!
119	minZoom,	×
120	maxZoom,	×
121	zIndex,	×
122	visible,	×
123	blend,
124	pickingBuffer,	23✔
125	circleStrokeColor: stroke,
126	circleStrokeWidth: strokeWidth,	24✔
127	circleOpacity: opacity,	23✔
128	} = this.options;	23✔
129	const options: PointLayerOptions = {
130	source: {
131	data: [],
132	parser: {
133	type: 'json',
134	x: 'lng',
135	y: 'lat',
136	},
137	},
138	shape: 'circle',
139	minZoom,
140	maxZoom,
141	zIndex,
142	visible,
143	blend,
144	pickingBuffer,
145	style: {
146	stroke,
147	strokeWidth,
148	opacity,
149	},
150	};
151	if (this.dataProvider && this.scene) {
152	const locationWeightRange = this.dataProvider.getLocationWeightRange(this.options.source, this.dataProviderState);	23!
153	options.source.data = this.dataProvider.getFilterLocations(this.options.source, this.dataProviderState);	×
154	options.size = getSizeAttribute(this.options.circleRadius!, locationWeightRange);	×
155	options.color = getColorAttribute(this.options.circleColor!, locationWeightRange);	×
156	}	×
157
158	return options;	×
159	}	×
160		×
161	protected getLineLayerOptions(): LineLayerOptions {
162	const { minZoom, maxZoom, zIndex, visible, blend, pickingBuffer, lineOpacity: opacity } = this.options;	23✔
163	const options: LineLayerOptions = {
164	source: {
165	data: [],
166	parser: {
167	type: 'json',	24✔
168	x: 'fromLng',	24✔
169	y: 'fromLat',
170	x1: 'toLng',	24✔
171	y1: 'toLat',
172	},
173	},
174	shape: 'halfLine',
175	minZoom,
176	maxZoom,
177	zIndex,
178	visible,
179	blend,
180	pickingBuffer,
181	style: {
182	borderColor: '#000',
183	borderWidth: 1,
184	opacity,
185	},
186	};
187	if (this.dataProvider && this.scene) {
188	const flowWeightRange = this.dataProvider.getFlowWeightRange(this.options.source, this.dataProviderState);
189	const filterFlowWeightRange = this.dataProvider.getFilterFlowWeightRange(
190	this.options.source,
191	this.dataProviderState
192	);
193	if (this.options.fadeOpacityEnabled && options.style) {
194	options.style.opacity = getOpacityColorAttribute(filterFlowWeightRange, this.options.fadeOpacityAmount!);
195	}
196	options.source.data = this.dataProvider.getFilterFlows(this.options.source, this.dataProviderState);
197	options.size = getSizeAttribute(this.options.lineWidth!, flowWeightRange);
198	options.color = getColorAttribute(this.options.lineColor!, flowWeightRange);
199	}
200	return options;
201	}
202	}

antvis / L7Plot / 5285254265

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