5258172990

pending completion

Build # 5258172990

Build Type

push

github

Committed by

web-flow

Commit Message

fix: emit 'drillup' event in `drillUp` function (#291)

Co-authored-by: lvisei <yunji.me@outlook.com>

Run Details

819 of 2184 branches covered (37.5%)

Branch coverage included in aggregate %.

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

3378 of 5062 relevant lines covered (66.73%)

202.34 hits per line

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

8.83

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

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

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 chinaHkmBoundaryLayer: PathLayer | undefined;
  /**
   * 国界争议图层
   */
  public chinaDisputeBoundaryLayer: PathLayer | undefined;
  /**
   * 填充面图层
   */
  public fillAreaLayer!: AreaLayer;
  /**
   * 标注图层
   */
  public labelLayer: TextLayer | undefined;
  /**
   * 数据钻取路径
   */
  private drillSteps: DrillStep[] = [];
  /**
   * 钻取栈数据
   */
  private drillStacks: DrillStack[] = [];

  /**
   * 初始化数据
   */
  protected initSource() {
    this.getInitDistrictData().then(() => {
      this.source = this.createSource();
      this.render();
      this.inited = true;
    });
  }

  /**
   * 渲染
   */
  public render() {
    if (this.inited) {
      this.scene.setEnableRender(true);
      this.scene.render();
    } else {
      const layerGroup = this.createLayers(this.source);
      this.layerGroup = layerGroup;
      if (this.scene['sceneService'].loaded) {
        this.onSceneLoaded();
      } else {
        this.scene.once('loaded', () => {
          this.onSceneLoaded();
        });
      }
      this.initLayersEvent();
    }
  }

  /**
   * 更新: 更新配置且重新渲染
   */
  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.initDrillEvent();
    }

    this.scene.setEnableRender(false);

    // 行政级别及范围发生更新
    if (options.viewLevel && !isEqual(this.lastOptions.viewLevel, this.options.viewLevel)) {
      const geoData = options.source?.joinBy.geoData;
      this.getDistrictData(geoData).then(() => {
        const { data, ...sourceConfig } = this.options.source;
        this.changeData(data, sourceConfig);
        this.updateLayers(options);
        this.render();
        this.updateComponents();
        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'>>) {
    this.options.source = deepAssign({}, this.options.source, { data, ...cfg });
    const { data: geoData, sourceCFG } = this.parserSourceConfig(this.options.source);
    this.source.setData(geoData, sourceCFG);

    // 更新 legend
    // TODO: 数据更新后，图层尚未执行更新，后续加图层 update 事件来解决
    const legend = this.options.legend;
    if (legend) {
      setTimeout(() => {
        this.updateLegendControl(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 layers = this.createCountryBoundaryLayer(this.chinaBoundaryData, this.options);

      layers.forEach((layer) => layerGroup.addLayer(layer));
    }

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

    return layerGroup;
  }

  /**
   * 创建中国国界线图层
   */
  private createCountryBoundaryLayer(data: FeatureCollection, plotConfig?: ChoroplethOptions) {
    const { chinaBoundaryLayer, chinaHkmBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(
      data,
      plotConfig
    );
    this.chinaBoundaryLayer = chinaBoundaryLayer;
    this.chinaHkmBoundaryLayer = chinaHkmBoundaryLayer;
    this.chinaDisputeBoundaryLayer = chinaDisputeBoundaryLayer;
    return [chinaBoundaryLayer, chinaHkmBoundaryLayer, chinaDisputeBoundaryLayer];
  }

  /**
   * 创建数据标签图层
   */
  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,
    });

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

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

    return textLayer;
  }

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

    const createCountryBoundaryLayer = () => {
      const layers = this.createCountryBoundaryLayer(this.chinaBoundaryData, this.options);

      layers.forEach((layer) => this.layerGroup.addLayer(layer));
    };
    const removeCountryBoundaryLayer = () => {
      this.chinaBoundaryLayer && this.layerGroup.removeLayer(this.chinaBoundaryLayer);
      this.chinaHkmBoundaryLayer && this.layerGroup.removeLayer(this.chinaHkmBoundaryLayer);
      this.chinaDisputeBoundaryLayer && this.layerGroup.removeLayer(this.chinaDisputeBoundaryLayer);
    };

    if (options.chinaBorder) {
      if (!this.chinaBoundaryLayer) {
        createCountryBoundaryLayer();
      } else {
        removeCountryBoundaryLayer();
        createCountryBoundaryLayer();
      }
    } else if (options.chinaBorder === false) {
      removeCountryBoundaryLayer();
    }

    this.updateLabelLayer(this.source, options.label, this.options, 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 = [];
    }

    // 初始化钻取栈第一钻数据
    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 }];
    }

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

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

  /**
   * 获取当前已钻取层级数据
   */
  public getCurrentDrillSteps() {
    const steps = this.drillStacks.map((item) => pick(item, ['level', 'adcode', 'granularity']) as Required<ViewLevel>);

    return steps;
  }

  /**
   * 实现 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);

    let data: any;
    const customFetchGeoData = this.options.customFetchGeoData;
    if (customFetchGeoData) {
      data = await customFetchGeoData({ url, level, adcode, granularity, extension });
    } else {
      const response = await fetch(`${url}/${level}/${fileName}.${extension}`);
      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 === 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 = {
      nativeEvent: true,
      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 = {}) {
    // TODO: remove view
    this.changeView(view, config).then((drillData) => {
      drillData && this.drillStacks.push(drillData);
    });
  }

  /**
   * 向上钻取方法
   */
  public drillUp(config: DrillStepConfig = {}, level?: ViewLevel['level']) {
    // 已经上卷到最高层级
    const drillStacksLength = this.drillStacks.length;
    const isTopDrillStack = [0, 1].includes(drillStacksLength);
    if (isTopDrillStack) {
      return;
    }
    const customUpStackIndex = level ? this.drillStacks.findIndex((item) => item.level === level) : -1;
    const isCustomUp = customUpStackIndex !== -1;
    const stacksIndex = isCustomUp ? customUpStackIndex : drillStacksLength - 2;
    const { config: drillConfig, ...view } = this.drillStacks[stacksIndex];
    const mergeConfig = deepAssign({}, drillConfig, config);

    const from = this.drillStacks[this.drillStacks.length - 1];
    const upParams = {
      nativeEvent: false,
      from: { level: from.level, adcode: from.adcode, granularity: from.granularity },
      to: { level: view.level, adcode: view.adcode, granularity: view.granularity },
    };

    this.changeView(view, mergeConfig).then((drillData) => {
      if (drillData) {
        if (isCustomUp) {
          this.drillStacks.splice(customUpStackIndex + 1);
        } else {
          this.drillStacks.pop();
        }
        this.emit('drillup', upParams);
      }
    });
  }

  /**
   * 更新显示区域
   */
  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);

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

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

antvis / L7Plot / 5258172990

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