1615191438

Build # 1615191438

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/antvis/L7Plot/commit/<a class=hub.com/antvis/L7Plot/commit/76338e20f7f0bfe2929cb155306db82ed170031b">76338e20f<a href="https://github.com/antvis/L7Plot/commit/76338e20f7f0bfe2929cb155306db82ed170031b">">Merge </a><a class="double-link" href="https://github.com/antvis/L7Plot/commit/<a class="double-link" href="https://github.com/antvis/L7Plot/commit/f3b76c7d63994e30d85547d414aff22a6442abbb">f3b76c7d6</a>">f3b76c7d6</a><a href="https://github.com/antvis/L7Plot/commit/76338e20f7f0bfe2929cb155306db82ed170031b"> into 456f46a45">456f46a45</a>

Pull Request Pull Request #115: perf: reduce rendering times

Run Details

541 of 1272 branches covered (42.53%)

Branch coverage included in aggregate %.

89 of 89 new or added lines in 8 files covered. (100.0%)

2190 of 3151 relevant lines covered (69.5%)

182.98 hits per line

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

9.07

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

import { pick, isEqual } from '@antv/util';
import { Plot } from '../../core/plot';
import { deepAssign } from '../../utils';
import {
  ChoroplethOptions,
  DrillStep,
  ChoroplethSourceOptions,
  Drill,
  DrillStack,
  ViewLevel,
  DrillStepConfig,
  FeatureCollection,
} from './types';
import { GEO_DATA_URL, GEO_AREA_URL, DEFAULT_AREA_GRANULARITY, DEFAULT_OPTIONS } from './constants';
import { AreaLayer } from '../../layers/area-layer';
import { PathLayer } from '../../layers/path-layer';
import { TextLayer } from '../../layers/text-layer';
import { LabelOptions, LegendOptions, MouseEvent, Source } from '../../types';
import { LayerGroup } from '../../core/layer/layer-group';
import { createCountryBoundaryLayer } from './layer';
import { getCacheArea, registerCacheArea } from './cache';
import { getDrillStepDefaultConfig, getGeoAreaConfig, isEqualDrillSteps, topojson2geojson } from './helper';

export type { ChoroplethOptions };

export class Choropleth extends Plot<ChoroplethOptions> {
  /**
   * 默认配置项
   */
  static DefaultOptions = DEFAULT_OPTIONS;
  /**
   * 地理数据地址
   */
  static GeoDataUrl = GEO_DATA_URL;
  /**
   * 行政数据地址
   */
  static GeoAreaUrl = GEO_AREA_URL;
  /**
   * 图表类型
   */
  public type = Plot.PlotType.Choropleth;
  /**
   * 国界数据
   */
  private chinaBoundaryData: FeatureCollection = { type: 'FeatureCollection', features: [] };
  /**
   * 当前行政数据数据
   */
  private currentDistrictData: FeatureCollection = { type: 'FeatureCollection', features: [] };
  /**
   * 国界图层
   */
  public chinaBoundaryLayer: PathLayer | undefined;
  /**
   * 国界争议图层
   */
  public chinaDisputeBoundaryLayer: PathLayer | undefined;
  /**
   * 填充面图层
   */
  public fillAreaLayer!: AreaLayer;
  /**
   * 标注图层
   */
  public labelLayer: TextLayer | undefined;
  /**
   * 数据钻取路径
   */
  private drillSteps: DrillStep[] = [];
  /**
   * 钻取行政栈数据
   */
  private drillStacks: DrillStack[] = [];

  /**
   * 初始化图层
   */
  protected initLayers() {
    this.getInitDistrictData().then(() => {
      this.source = this.createSource();
      this.render();
      this.inited = true;
    });
  }

  /**
   * 渲染
   */
  public render() {
    console.time('l7plot choropleth render time');
    if (this.inited) {
      this.scene.setEnableRender(true);
      this.scene.render();
    } else {
      const layerGroup = this.createLayers(this.source);
      this.layerGroup = layerGroup;
      this.onLayersLoaded();
      layerGroup.addTo(this.scene);
      this.initLayersEvent();
    }
    console.timeEnd('l7plot choropleth render time');
  }

  /**
   * 更新: 更新配置且重新渲染
   */
  public update(options: Partial<ChoroplethOptions>) {
    this.updateOption(options);
    if (options.map && !isEqual(this.lastOptions.map, this.options.map)) {
      this.updateMap(options.map);
    }

    // 下钻路径发生更新
    if (
      options.drill &&
      options.drill.enabled !== false &&
      !isEqual(this.lastOptions.drill?.steps, this.options.drill?.steps)
    ) {
      this.drillReset();
    }

    this.scene.setEnableRender(false);

    // 行政级别及范围发生更新
    if (options.viewLevel && !isEqual(this.lastOptions.viewLevel, this.options.viewLevel)) {
      const geoData = options.source?.joinBy.geoData;
      console.time('l7plot choropleth update viewLevel time');
      this.getDistrictData(geoData).then(() => {
        const { data, ...sourceConfig } = this.options.source;
        this.changeData(data, sourceConfig);
        this.updateLayers(options);
        this.render();
        this.updateComponents();
        console.timeEnd('l7plot choropleth update viewLevel time');
        this.emit('update');
      });
    } else {
      if (options.source && !isEqual(this.lastOptions.source, this.options.source)) {
        const { data, ...sourceConfig } = this.options.source;
        this.changeData(data, sourceConfig);
      }
      this.updateLayers(options);
      this.render();
      this.updateComponents();
      this.emit('update');
    }
  }

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

  /**
   * 解析 source 配置
   */
  protected parserSourceConfig(source: ChoroplethSourceOptions) {
    const { data: joinData, joinBy, ...sourceCFG } = source;
    const { sourceField, geoField: targetField, geoData } = joinBy;
    const data = geoData;
    const config = { type: 'join', sourceField, targetField, data: joinData };
    if (sourceCFG.transforms) {
      sourceCFG.transforms.push(config);
    } else {
      sourceCFG.transforms = [config];
    }
    if (sourceCFG['parser']) {
      delete sourceCFG['parser'];
    }
    return { data, sourceCFG };
  }

  /**
   * 创建 source 实例
   */
  protected createSource() {
    const { data, sourceCFG } = this.parserSourceConfig(this.options.source);
    const source = new Source(data, sourceCFG);
    return source;
  }

  /**
   * 更新: 更新数据
   */
  public changeData(data: any[], cfg?: Partial<Omit<ChoroplethSourceOptions, 'data'>>) {
    console.time('l7plot choropleth update data time');
    this.options.source = deepAssign({}, this.options.source, { data, ...cfg });
    const { data: geoData, sourceCFG } = this.parserSourceConfig(this.options.source);
    this.source.setData(geoData, sourceCFG);
    console.timeEnd('l7plot choropleth update data time');

    // 更新 legend
    if (this.options.legend) {
      this.updateLegendControl(this.options.legend);
    }

    this.emit('change-data');
  }

  /**
   * 创建图层
   */
  protected createLayers(source: Source): LayerGroup {
    this.fillAreaLayer = new AreaLayer({
      name: 'fillAreaLayer',
      source,
      ...pick<any>(this.options, AreaLayer.LayerOptionsKeys),
    });

    const layerGroup = new LayerGroup([this.fillAreaLayer]);

    if (this.options.chinaBorder) {
      const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(
        this.chinaBoundaryData,
        this.options
      );
      this.chinaBoundaryLayer = chinaBoundaryLayer;
      this.chinaDisputeBoundaryLayer = chinaDisputeBoundaryLayer;
      layerGroup.addLayer(this.chinaBoundaryLayer);
      layerGroup.addLayer(this.chinaDisputeBoundaryLayer);
    }

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

    return layerGroup;
  }

  /**
   * 创建数据标签图层
   */
  protected createLabelLayer(source: Source, label: LabelOptions): TextLayer {
    const data = source['originData'].features
      .map(({ properties }) =>
        Object.assign({}, properties, { centroid: properties['centroid'] || properties['center'] })
      )
      .filter(({ centroid }) => centroid);
    const { visible, minZoom, maxZoom, zIndex = 0 } = this.options;
    const textLayer = new TextLayer({
      name: 'labelLayer',
      source: {
        data,
        parser: { type: 'json', coordinates: 'centroid' },
        transforms: source.transforms,
      },
      visible,
      minZoom,
      maxZoom,
      zIndex: zIndex + 0.1,
      ...label,
    });

    source.on('update', () => {
      const data = this.source['originData'].features
        .map(({ properties }) => properties)
        .filter(({ centroid }) => centroid);
      textLayer.layer.setData(data);
    });

    return textLayer;
  }

  /**
   * 更新图层
   */
  protected updateLayers(options: Partial<ChoroplethOptions>) {
    const fillAreaLayerConfig = pick<any>(options, AreaLayer.LayerOptionsKeys);
    this.fillAreaLayer.update(fillAreaLayerConfig);

    if (options.chinaBorder) {
      if (!this.chinaBoundaryLayer) {
        const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(
          this.chinaBoundaryData,
          this.options
        );
        this.chinaBoundaryLayer = chinaBoundaryLayer;
        this.chinaDisputeBoundaryLayer = chinaDisputeBoundaryLayer;
        this.layerGroup.addLayer(this.chinaBoundaryLayer);
        this.layerGroup.addLayer(this.chinaDisputeBoundaryLayer);
      }
    } else {
      if (this.chinaBoundaryLayer) {
        this.layerGroup.removeLayer(this.chinaBoundaryLayer);
      }
      if (this.chinaDisputeBoundaryLayer) {
        this.layerGroup.removeLayer(this.chinaDisputeBoundaryLayer);
      }
    }

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

  /**
   * 初始化图层事件
   */
  protected initLayersEvent() {
    this.initDrillEvent();
  }

  /**
   * 初始化钻取事件
   */
  private initDrillEvent() {
    // 更新：取消上次绑定事件
    if (this.lastOptions.drill) {
      const { triggerUp = 'unclick', triggerDown = 'click' } = this.lastOptions.drill;
      this.fillAreaLayer.off(triggerUp, this.onDrillUpHander);
      this.fillAreaLayer.off(triggerDown, this.onDrillDownHander);
    }
    // 没有下钻
    if (!this.options.drill || this.options.drill.enabled === false) {
      return;
    }

    const { steps, triggerUp = 'unclick', triggerDown = 'click' } = this.options.drill;
    const dillSteps = steps.map((step: DrillStep | DrillStep['level']) => {
      if (typeof step === 'string') {
        return {
          level: step,
          granularity: DEFAULT_AREA_GRANULARITY[step] as DrillStep['granularity'],
        };
      }
      if (!step.granularity) {
        step.granularity = DEFAULT_AREA_GRANULARITY[step.level] as DrillStep['granularity'];
      }
      return step;
    });
    // 初始化或钻取路径更新时
    if (!isEqualDrillSteps(dillSteps, this.drillSteps)) {
      this.drillSteps = dillSteps;
      this.drillStacks = [];
    }

    // 上卷事件
    this.fillAreaLayer.on(triggerUp, this.onDrillUpHander);
    // 下钻事件
    this.fillAreaLayer.on(triggerDown, this.onDrillDownHander);
  }

  /**
   * 重置钻取缓存数据
   */
  private drillReset() {
    this.drillStacks = [];
  }

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

    return {};
  }

  /**
   * 请求数据
   */
  private async fetchData(level: string, adcode: string | number, granularity: string) {
    const fileName = `${adcode}_${level}_${granularity}`;
    const cacheArea = getCacheArea(fileName);
    if (cacheArea) return cacheArea;
    const { url, type, extension } = getGeoAreaConfig(this.options.geoArea);
    const response = await fetch(`${url}/${level}/${fileName}.${extension}`);
    let data = await response.json();
    if (type === 'topojson') {
      data = topojson2geojson(data);
    }
    registerCacheArea(fileName, data);
    return data;
  }

  /**
   * 请求初始化区域数据
   */
  private async getInitDistrictData() {
    const fetchChinaBoundaryData = this.fetchData('country', '100000', 'boundary');
    const geoData = this.options.source?.joinBy.geoData;

    try {
      [this.chinaBoundaryData] = await Promise.all([fetchChinaBoundaryData, this.getDistrictData(geoData)]);
    } catch (err) {
      throw new Error(`Failed to get china boundary data，${err}`);
    }
  }

  /**
   * 请求区域数据
   */
  private async getDistrictData(geoData?: FeatureCollection) {
    const { level, adcode, granularity = DEFAULT_AREA_GRANULARITY[level] } = this.options.viewLevel;
    const fetchCurrentDistrictData = geoData ? Promise.resolve(geoData) : this.fetchData(level, adcode, granularity);

    try {
      this.currentDistrictData = await fetchCurrentDistrictData;
      this.options.source = deepAssign({}, this.options.source, { joinBy: { geoData: this.currentDistrictData } });
    } catch (err) {
      throw new Error(`Failed to get district data，${err}`);
    }
  }

  /**
   * 向下钻取事件回调
   */
  private onDrillDownHander = (event: MouseEvent) => {
    const { steps, onDown } = this.options.drill as Drill;
    const properties = event.feature?.properties;
    const { adcode } = properties;

    // 还没有开始钻取
    if (!this.drillStacks.length) {
      const { level, adcode, granularity = DEFAULT_AREA_GRANULARITY[level] } = this.options.viewLevel;
      const config = getDrillStepDefaultConfig(this.options);
      this.drillStacks = [{ level, adcode, granularity, config }];
    }

    // 已经下钻到最后
    if (this.drillStacks.length === steps.length + 1) {
      return;
    }

    // 已开始下钻
    const from = this.drillStacks.slice(-1)[0];
    const depth = this.drillStacks.length - 1;
    const { level, granularity = DEFAULT_AREA_GRANULARITY[level], ...drillConfig } = this.drillSteps[depth];

    const downParams = {
      from: { level: from.level, adcode: from.adcode, granularity: from.granularity },
      to: { level, adcode, granularity, properties },
    };
    const callback = (config: DrillStepConfig = {}) => {
      const view = { level, adcode, granularity };
      const mergeConfig = deepAssign({}, drillConfig, config);
      this.changeView(view, mergeConfig).then((drillData) => {
        if (drillData) {
          this.drillStacks.push(drillData);
          this.emit('drilldown', downParams);
        }
      });
    };

    if (onDown) {
      onDown(downParams.from, downParams.to, callback);
    } else {
      callback();
    }
  };

  /**
   * 向上钻取事件回调
   */
  private onDrillUpHander = () => {
    const { onUp } = this.options.drill as Drill;
    // 已经上卷到最高层级
    const isTopDrillStack = this.drillStacks.length === 0 || this.drillStacks.length === 1;
    if (isTopDrillStack) {
      return;
    }

    const lastIndex = this.drillStacks.length - 1;
    const from = this.drillStacks[lastIndex];
    const to = this.drillStacks[lastIndex - 1];
    const upParams = {
      from: { level: from.level, adcode: from.adcode, granularity: from.granularity },
      to: { level: to.level, adcode: to.adcode, granularity: to.granularity },
    };
    const callback = (config: DrillStepConfig = {}) => {
      const view = upParams.to;
      const mergeConfig = deepAssign({}, to.config, config);
      this.changeView(view, mergeConfig).then((drillData) => {
        if (drillData) {
          this.drillStacks.pop();
          this.emit('drillup', upParams);
        }
      });
    };

    if (onUp) {
      onUp(upParams.from, upParams.to, callback);
    } else {
      callback();
    }
  };

  /**
   * 向下钻取方法
   */
  public drillDown(view: ViewLevel, config: DrillStepConfig = {}) {
    this.changeView(view, config).then((drillData) => {
      drillData && this.drillStacks.push(drillData);
    });
  }

  /**
   * 向上钻取方法
   */
  public drillUp(config: DrillStepConfig = {}) {
    // 已经上卷到最高层级
    const isTopDrillStack = this.drillStacks.length === 0 || this.drillStacks.length === 1;
    if (isTopDrillStack) {
      return;
    }
    const lastIndex = this.drillStacks.length - 1;
    const { config: drillConfig, ...view } = this.drillStacks[lastIndex - 1];
    const mergeConfig = deepAssign({}, drillConfig, config);
    this.changeView(view, mergeConfig);
    this.drillStacks.pop();
  }

  /**
   * 更新显示区域
   */
  public async changeView(view: ViewLevel, config: DrillStepConfig = {}) {
    const { level, adcode, granularity = DEFAULT_AREA_GRANULARITY[level] } = view;
    const geoData = await this.fetchData(level, adcode, granularity);
    if (!geoData.features.length) return;
    const mergeConfig = deepAssign({}, getDrillStepDefaultConfig(this.options), config, {
      viewLevel: { level, adcode, granularity },
      source: { joinBy: { geoData } },
    });
    this.update(mergeConfig);

    // // 钻取配置不一样需要重新映射 isEqual
    // const { color, style, state, label, tooltip } = mergeConfig;
    // this.fillAreaLayer.updateOptions({ color, style, state });
    // this.labelLayer?.updateOptions({ ...label });
    // if (tooltip) {
    //   this.tooltip?.update(tooltip);
    // }

    const drillData: DrillStack = {
      level,
      adcode,
      granularity,
      config: mergeConfig,
    };
    return drillData;
  }
}

1	import { pick, isEqual } from '@antv/util';
2	import { Plot } from '../../core/plot';	94✔
3	import { deepAssign } from '../../utils';	94✔
4	import {	94✔
5	ChoroplethOptions,	94✔
6	DrillStep,	94✔
7	ChoroplethSourceOptions,	94✔
8	Drill,	94✔
9	DrillStack,	94✔
10	ViewLevel,	94✔
11	DrillStepConfig,	94✔
12	FeatureCollection,	94✔
13	} from './types';	94✔
14	import { GEO_DATA_URL, GEO_AREA_URL, DEFAULT_AREA_GRANULARITY, DEFAULT_OPTIONS } from './constants';	94✔
15	import { AreaLayer } from '../../layers/area-layer';	94✔
16	import { PathLayer } from '../../layers/path-layer';	94✔
17	import { TextLayer } from '../../layers/text-layer';	94✔
18	import { LabelOptions, LegendOptions, MouseEvent, Source } from '../../types';
19	import { LayerGroup } from '../../core/layer/layer-group';	×
20	import { createCountryBoundaryLayer } from './layer';
21	import { getCacheArea, registerCacheArea } from './cache';
22	import { getDrillStepDefaultConfig, getGeoAreaConfig, isEqualDrillSteps, topojson2geojson } from './helper';
23		×
24	export type { ChoroplethOptions };
25
26	export class Choropleth extends Plot<ChoroplethOptions> {
27	/**	×
28	* 默认配置项
29	*/
30	static DefaultOptions = DEFAULT_OPTIONS;
31	/**	×
32	* 地理数据地址
33	*/
34	static GeoDataUrl = GEO_DATA_URL;
35	/**	×
36	* 行政数据地址
37	*/
38	static GeoAreaUrl = GEO_AREA_URL;
39	/**	×
40	* 图表类型
41	*/
42	public type = Plot.PlotType.Choropleth;
43	/**	×
44	* 国界数据
45	*/	×
46	private chinaBoundaryData: FeatureCollection = { type: 'FeatureCollection', features: [] };	×
47	/**	×
48	* 当前行政数据数据
49	*/	×
50	private currentDistrictData: FeatureCollection = { type: 'FeatureCollection', features: [] };	×
51	/**	×
52	* 国界图层	×
53	*/
54	public chinaBoundaryLayer: PathLayer \| undefined;
55	/**	×
56	* 国界争议图层	×
57	*/
58	public chinaDisputeBoundaryLayer: PathLayer \| undefined;
59	/**	×
60	* 填充面图层	×
61	*/	×
62	public fillAreaLayer!: AreaLayer;	×
63	/**
64	* 标注图层
65	*/
66	public labelLayer: TextLayer \| undefined;	×
67	/**	×
68	* 数据钻取路径	×
69	*/	×
70	private drillSteps: DrillStep[] = [];	×
71	/**	×
72	* 钻取行政栈数据	×
73	*/	×
74	private drillStacks: DrillStack[] = [];
75
76	/**
77	* 初始化图层	×
78	*/	×
79	protected initLayers() {
80	this.getInitDistrictData().then(() => {
81	this.source = this.createSource();	×
82	this.render();
83	this.inited = true;
84	});
85	}
86
87	/**	×
88	* 渲染	×
89	*/
90	public render() {	×
91	console.time('l7plot choropleth render time');	×
92	if (this.inited) {	×
93	this.scene.setEnableRender(true);
94	this.scene.render();	×
95	} else {	×
96	const layerGroup = this.createLayers(this.source);	×
97	this.layerGroup = layerGroup;	×
98	this.onLayersLoaded();
99	layerGroup.addTo(this.scene);
100	this.initLayersEvent();
101	}	×
102	console.timeEnd('l7plot choropleth render time');	×
103	}	×
104		×
105	/**	×
106	* 更新: 更新配置且重新渲染	×
107	*/	×
108	public update(options: Partial<ChoroplethOptions>) {	×
109	this.updateOption(options);
110	if (options.map && !isEqual(this.lastOptions.map, this.options.map)) {
111	this.updateMap(options.map);
112	}	×
113		×
114	// 下钻路径发生更新
115	if (
116	options.drill &&	×
117	options.drill.enabled !== false &&
118	!isEqual(this.lastOptions.drill?.steps, this.options.drill?.steps)
119	) {	×
120	this.drillReset();
121	}
122
123	this.scene.setEnableRender(false);
124		94✔
125	// 行政级别及范围发生更新	×
126	if (options.viewLevel && !isEqual(this.lastOptions.viewLevel, this.options.viewLevel)) {	×
127	const geoData = options.source?.joinBy.geoData;	×
128	console.time('l7plot choropleth update viewLevel time');	×
129	this.getDistrictData(geoData).then(() => {	×
130	const { data, ...sourceConfig } = this.options.source;
131	this.changeData(data, sourceConfig);
132	this.updateLayers(options);
133	this.render();
134	this.updateComponents();
135	console.timeEnd('l7plot choropleth update viewLevel time');	94✔
136	this.emit('update');	×
137	});	×
138	} else {	×
139	if (options.source && !isEqual(this.lastOptions.source, this.options.source)) {	×
140	const { data, ...sourceConfig } = this.options.source;
141	this.changeData(data, sourceConfig);
142	}	×
143	this.updateLayers(options);	×
144	this.render();	×
145	this.updateComponents();	×
146	this.emit('update');	×
147	}
148	}	×
149
150	/**
151	* 获取默认配置
152	*/
153	protected getDefaultOptions(): Partial<ChoroplethOptions> {	94✔
154	return Choropleth.DefaultOptions;	×
155	}
156		×
157	/**	×
158	* 解析 source 配置	×
159	*/
160	protected parserSourceConfig(source: ChoroplethSourceOptions) {
161	const { data: joinData, joinBy, ...sourceCFG } = source;	×
162	const { sourceField, geoField: targetField, geoData } = joinBy;
163	const data = geoData;	×
164	const config = { type: 'join', sourceField, targetField, data: joinData };	×
165	if (sourceCFG.transforms) {
166	sourceCFG.transforms.push(config);	×
167	} else {
168	sourceCFG.transforms = [config];	×
169	}	×
170	if (sourceCFG['parser']) {	×
171	delete sourceCFG['parser'];	×
172	}	×
173	return { data, sourceCFG };	×
174	}	×
175		×
176	/**	×
177	* 创建 source 实例	×
178	*/	×
179	protected createSource() {
180	const { data, sourceCFG } = this.parserSourceConfig(this.options.source);
181	const source = new Source(data, sourceCFG);
182	return source;	×
183	}	×
184		×
185	/**
186	* 更新: 更新数据	×
187	*/	×
188	public changeData(data: any[], cfg?: Partial<Omit<ChoroplethSourceOptions, 'data'>>) {	×
189	console.time('l7plot choropleth update data time');	×
190	this.options.source = deepAssign({}, this.options.source, { data, ...cfg });
191	const { data: geoData, sourceCFG } = this.parserSourceConfig(this.options.source);
192	this.source.setData(geoData, sourceCFG);
193	console.timeEnd('l7plot choropleth update data time');
194
195	// 更新 legend	94✔
196	if (this.options.legend) {	×
197	this.updateLegendControl(this.options.legend);
198	}
199
200	this.emit('change-data');
201	}	94✔
202		×
203	/**	×
204	* 创建图层	×
205	*/	×
206	protected createLayers(source: Source): LayerGroup {	×
207	this.fillAreaLayer = new AreaLayer({	×
208	name: 'fillAreaLayer',
209	source,
210	...pick<any>(this.options, AreaLayer.LayerOptionsKeys),	×
211	});
212		×
213	const layerGroup = new LayerGroup([this.fillAreaLayer]);	×
214
215	if (this.options.chinaBorder) {	×
216	const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(
217	this.chinaBoundaryData,
218	this.options
219	);
220	this.chinaBoundaryLayer = chinaBoundaryLayer;	94✔
221	this.chinaDisputeBoundaryLayer = chinaDisputeBoundaryLayer;	×
222	layerGroup.addLayer(this.chinaBoundaryLayer);	×
223	layerGroup.addLayer(this.chinaDisputeBoundaryLayer);	×
224	}
225
226	if (this.options.label) {
227	this.labelLayer = this.createLabelLayer(source, this.options.label);
228	layerGroup.addLayer(this.labelLayer);	94✔
229	}	×
230		×
231	return layerGroup;	×
232	}	×
233		×
234	/**
235	* 创建数据标签图层	×
236	*/	×
237	protected createLabelLayer(source: Source, label: LabelOptions): TextLayer {
238	const data = source['originData'].features	×
239	.map(({ properties }) =>
240	Object.assign({}, properties, { centroid: properties['centroid'] \|\| properties['center'] })
241	)
242	.filter(({ centroid }) => centroid);
243	const { visible, minZoom, maxZoom, zIndex = 0 } = this.options;	94✔
244	const textLayer = new TextLayer({	×
245	name: 'labelLayer',	×
246	source: {	×
247	data,	×
248	parser: { type: 'json', coordinates: 'centroid' },	×
249	transforms: source.transforms,	×
250	},	×
251	visible,	×
252	minZoom,
253	maxZoom,	×
254	zIndex: zIndex + 0.1,	×
255	...label,	×
256	});
257		×
258	source.on('update', () => {
259	const data = this.source['originData'].features
260	.map(({ properties }) => properties)
261	.filter(({ centroid }) => centroid);
262	textLayer.layer.setData(data);	94✔
263	});	×
264		×
265	return textLayer;
266	}	×
267		×
268	/**
269	* 更新图层
270	*/	×
271	protected updateLayers(options: Partial<ChoroplethOptions>) {	×
272	const fillAreaLayerConfig = pick<any>(options, AreaLayer.LayerOptionsKeys);
273	this.fillAreaLayer.update(fillAreaLayerConfig);	×
274		×
275	if (options.chinaBorder) {
276	if (!this.chinaBoundaryLayer) {
277	const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(
278	this.chinaBoundaryData,
279	this.options	×
280	);	×
281	this.chinaBoundaryLayer = chinaBoundaryLayer;
282	this.chinaDisputeBoundaryLayer = chinaDisputeBoundaryLayer;	×
283	this.layerGroup.addLayer(this.chinaBoundaryLayer);	×
284	this.layerGroup.addLayer(this.chinaDisputeBoundaryLayer);
285	}
286	} else {	×
287	if (this.chinaBoundaryLayer) {	×
288	this.layerGroup.removeLayer(this.chinaBoundaryLayer);
289	}	×
290	if (this.chinaDisputeBoundaryLayer) {
291	this.layerGroup.removeLayer(this.chinaDisputeBoundaryLayer);	×
292	}
293	}
294
295	if (options.label) {
296	if (this.labelLayer) {	94✔
297	this.labelLayer.update({ ...options.label });	×
298	} else {	×
299	this.labelLayer = this.createLabelLayer(this.source, options.label);	×
300	this.layerGroup.addLayer(this.labelLayer);	×
301	}	×
302	} else {	×
303	if (this.labelLayer) {	×
304	this.layerGroup.removeLayer(this.labelLayer);	×
305	}	×
306	}
307	}
308
309	/**	×
310	* 初始化图层事件	×
311	*/
312	protected initLayersEvent() {	×
313	this.initDrillEvent();	×
314	}
315
316	/**	×
317	* 初始化钻取事件	×
318	*/	×
319	private initDrillEvent() {
320	// 更新：取消上次绑定事件
321	if (this.lastOptions.drill) {	×
322	const { triggerUp = 'unclick', triggerDown = 'click' } = this.lastOptions.drill;	×
323	this.fillAreaLayer.off(triggerUp, this.onDrillUpHander);
324	this.fillAreaLayer.off(triggerDown, this.onDrillDownHander);
325	}
326	// 没有下钻	×
327	if (!this.options.drill \|\| this.options.drill.enabled === false) {	×
328	return;
329	}
330
331	const { steps, triggerUp = 'unclick', triggerDown = 'click' } = this.options.drill;
332	const dillSteps = steps.map((step: DrillStep \| DrillStep['level']) => {
333	if (typeof step === 'string') {
334	return {	94✔
335	level: step,	×
336	granularity: DEFAULT_AREA_GRANULARITY[step] as DrillStep['granularity'],
337	};
338	}
339	if (!step.granularity) {
340	step.granularity = DEFAULT_AREA_GRANULARITY[step.level] as DrillStep['granularity'];	94✔
341	}
342	return step;	×
343	});	×
344	// 初始化或钻取路径更新时	×
345	if (!isEqualDrillSteps(dillSteps, this.drillSteps)) {	×
346	this.drillSteps = dillSteps;
347	this.drillStacks = [];
348	}	×
349		×
350	// 上卷事件
351	this.fillAreaLayer.on(triggerUp, this.onDrillUpHander);	×
352	// 下钻事件	×
353	this.fillAreaLayer.on(triggerDown, this.onDrillDownHander);	×
354	}	×
355
356	/**
357	* 重置钻取缓存数据
358	*/
359	private drillReset() {	×
360	this.drillStacks = [];	×
361	}
362		×
363	/**
364	* 实现 legend 配置项
365	*/	×
366	public getLegendOptions(): LegendOptions {	×
367	const colorLegendItems = this.fillAreaLayer.getColorLegendItems();	×
368	if (colorLegendItems.length !== 0) {
369	return { type: 'category', items: colorLegendItems };
370	}	×
371
372	return {};	×
373	}
374
375	/**
376	* 请求数据
377	*/	94✔
378	private async fetchData(level: string, adcode: string \| number, granularity: string) {	×
379	const fileName = `${adcode}_${level}_${granularity}`;
380	const cacheArea = getCacheArea(fileName);
381	if (cacheArea) return cacheArea;
382	const { url, type, extension } = getGeoAreaConfig(this.options.geoArea);
383	const response = await fetch(`${url}/${level}/${fileName}.${extension}`);	94✔
384	let data = await response.json();	×
385	if (type === 'topojson') {	×
386	data = topojson2geojson(data);	×
387	}
388	registerCacheArea(fileName, data);	×
389	return data;
390	}
391
392	/**
393	* 请求初始化区域数据	94✔
394	*/	×
395	private async getInitDistrictData() {
396	const fetchChinaBoundaryData = this.fetchData('country', '100000', 'boundary');	×
397	const geoData = this.options.source?.joinBy.geoData;	×
398
399	try {	×
400	[this.chinaBoundaryData] = await Promise.all([fetchChinaBoundaryData, this.getDistrictData(geoData)]);	×
401	} catch (err) {	×
402	throw new Error(`Failed to get china boundary data，${err}`);	×
403	}	×
404	}	×
405
406	/**	×
407	* 请求区域数据	×
408	*/
409	private async getDistrictData(geoData?: FeatureCollection) {	×
410	const { level, adcode, granularity = DEFAULT_AREA_GRANULARITY[level] } = this.options.viewLevel;	×
411	const fetchCurrentDistrictData = geoData ? Promise.resolve(geoData) : this.fetchData(level, adcode, granularity);	×
412
413	try {	×
414	this.currentDistrictData = await fetchCurrentDistrictData;	×
415	this.options.source = deepAssign({}, this.options.source, { joinBy: { geoData: this.currentDistrictData } });
416	} catch (err) {
417	throw new Error(`Failed to get district data，${err}`);
418	}
419	}
420
421	/**
422	* 向下钻取事件回调	94✔
423	*/
424	private onDrillDownHander = (event: MouseEvent) => {	×
425	const { steps, onDown } = this.options.drill as Drill;
426	const properties = event.feature?.properties;
427	const { adcode } = properties;	×
428		×
429	// 还没有开始钻取
430	if (!this.drillStacks.length) {	×
431	const { level, adcode, granularity = DEFAULT_AREA_GRANULARITY[level] } = this.options.viewLevel;	×
432	const config = getDrillStepDefaultConfig(this.options);	×
433	this.drillStacks = [{ level, adcode, granularity, config }];
434	}	×
435		×
436	// 已经下钻到最后
437	if (this.drillStacks.length === steps.length + 1) {	×
438	return;	×
439	}
440		×
441	// 已开始下钻	×
442	const from = this.drillStacks.slice(-1)[0];	×
443	const depth = this.drillStacks.length - 1;
444	const { level, granularity = DEFAULT_AREA_GRANULARITY[level], ...drillConfig } = this.drillSteps[depth];
445
446	const downParams = {
447	from: { level: from.level, adcode: from.adcode, granularity: from.granularity },
448	to: { level, adcode, granularity, properties },
449	};
450	const callback = (config: DrillStepConfig = {}) => {	94✔
451	const view = { level, adcode, granularity };	×
452	const mergeConfig = deepAssign({}, drillConfig, config);
453	this.changeView(view, mergeConfig).then((drillData) => {	×
454	if (drillData) {	×
455	this.drillStacks.push(drillData);
456	this.emit('drilldown', downParams);	×
457	}	×
458	});	×
459	};
460		×
461	if (onDown) {	×
462	onDown(downParams.from, downParams.to, callback);	×
463	} else {
464	callback();	×
465	}	×
466	};	×
467
468	/**	×
469	* 向上钻取事件回调	×
470	*/	×
471	private onDrillUpHander = () => {
472	const { onUp } = this.options.drill as Drill;
473	// 已经上卷到最高层级
474	const isTopDrillStack = this.drillStacks.length === 0 \|\| this.drillStacks.length === 1;
475	if (isTopDrillStack) {
476	return;
477	}
478		94✔
479	const lastIndex = this.drillStacks.length - 1;	×
480	const from = this.drillStacks[lastIndex];	×
481	const to = this.drillStacks[lastIndex - 1];	×
482	const upParams = {	×
483	from: { level: from.level, adcode: from.adcode, granularity: from.granularity },
484	to: { level: to.level, adcode: to.adcode, granularity: to.granularity },
485	};
486	const callback = (config: DrillStepConfig = {}) => {
487	const view = upParams.to;
488	const mergeConfig = deepAssign({}, to.config, config);	94✔
489	this.changeView(view, mergeConfig).then((drillData) => {	×
490	if (drillData) {
491	this.drillStacks.pop();	×
492	this.emit('drillup', upParams);	×
493	}	×
494	});
495	};	×
496		×
497	if (onUp) {	×
498	onUp(upParams.from, upParams.to, callback);	×
499	} else {	×
500	callback();
501	}
502	};
503
504	/**	94✔
505	* 向下钻取方法	×
506	*/	×
507	public drillDown(view: ViewLevel, config: DrillStepConfig = {}) {
508	this.changeView(view, config).then((drillData) => {	×
509	drillData && this.drillStacks.push(drillData);	×
510	});
511	}	×
512		×
513	/**
514	* 向上钻取方法	×
515	*/	×
516	public drillUp(config: DrillStepConfig = {}) {	×
517	// 已经上卷到最高层级	×
518	const isTopDrillStack = this.drillStacks.length === 0 \|\| this.drillStacks.length === 1;
519	if (isTopDrillStack) {
520	return;
521	}	×
522	const lastIndex = this.drillStacks.length - 1;	×
523	const { config: drillConfig, ...view } = this.drillStacks[lastIndex - 1];
524	const mergeConfig = deepAssign({}, drillConfig, config);
525	this.changeView(view, mergeConfig);
526	this.drillStacks.pop();
527	}
528		×
529	/**
530	* 更新显示区域
531	*/
532	public async changeView(view: ViewLevel, config: DrillStepConfig = {}) {
533	const { level, adcode, granularity = DEFAULT_AREA_GRANULARITY[level] } = view;
534	const geoData = await this.fetchData(level, adcode, granularity);
535	if (!geoData.features.length) return;
536	const mergeConfig = deepAssign({}, getDrillStepDefaultConfig(this.options), config, {	94✔
537	viewLevel: { level, adcode, granularity },
538	source: { joinBy: { geoData } },
539	});
540	this.update(mergeConfig);	94✔
541
542	// // 钻取配置不一样需要重新映射 isEqual
543	// const { color, style, state, label, tooltip } = mergeConfig;
544	// this.fillAreaLayer.updateOptions({ color, style, state });	94✔
545	// this.labelLayer?.updateOptions({ ...label });	94✔
546	// if (tooltip) {
547	// this.tooltip?.update(tooltip);	94✔
548	// }
549
550	const drillData: DrillStack = {
551	level,
552	adcode,
553	granularity,
554	config: mergeConfig,
555	};
556	return drillData;
557	}
558	}

antvis / L7Plot / 1615191438

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