8171475525

Committed 06 Mar 2024 11:41AM UTC coverage: 59.508% (-0.06%) from 59.572%

Build # 8171475525

Build Type

push

github

Committed by

lvisei

Commit Message

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

Run Details

1034 of 2471 branches covered (41.85%)

Branch coverage included in aggregate %.

2 of 8 new or added lines in 2 files covered. (25.0%)

45 existing lines in 1 file now uncovered.

3591 of 5301 relevant lines covered (67.74%)

140.99 hits per line

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

8.78

/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);
      }, 500);
    }

    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();
    // this.initLegendEvent();
  }

  /**
   * 初始化钻取事件
   */
  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 initLegendEvent() {
    const legend = this.options.legend;
    if (!legend) return;
    const onUpdateLegendData = () => {
      this.updateLegendControl(legend);
    };
    this.fillAreaLayer.on('legend:color', onUpdateLegendData);
  }

  /**
   * 重置钻取缓存数据
   */
  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 = {
      nativeEvent: true,
      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 = {}) {
    const from = this.drillStacks.slice(-1)[0];
    const { level, adcode, granularity } = view;
    const downParams = {
      nativeEvent: false,
      from: { level: from.level, adcode: from.adcode, granularity: from.granularity },
      to: { level, adcode, granularity },
    };

    // TODO: remove view
    this.changeView(view, config).then((drillData) => {
      if (drillData) {
        this.drillStacks.push(drillData);
        this.emit('drilldown', downParams);
      }
    });
  }

  /**
   * 向上钻取方法
   */
  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';	86✔
3	import { LayerGroup } from '../../core/layer/layer-group';	86✔
4	import { Plot } from '../../core/plot';	86✔
5	import { AreaLayer } from '../../layers/area-layer';	86✔
6	import { PathLayer } from '../../layers/path-layer';	86✔
7	import { TextLayer } from '../../layers/text-layer';	86✔
8	import type { LabelOptions, LegendOptions, MouseEvent } from '../../types';	86✔
9	import { deepAssign } from '../../utils';	86✔
10	import { getCacheArea, registerCacheArea } from './cache';	86✔
11	import { DEFAULT_AREA_GRANULARITY, DEFAULT_OPTIONS, GEO_AREA_URL, GEO_DATA_URL } from './constants';	86✔
12	import { getDrillStepDefaultConfig, getGeoAreaConfig, isEqualDrillSteps, topojson2geojson } from './helper';	86✔
13	import { createCountryBoundaryLayer } from './layer';	86✔
14	import {	86✔
15	ChoroplethOptions,	86✔
16	ChoroplethSourceOptions,	86✔
17	Drill,	86✔
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);
120	}	86✔
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	}
131		86✔
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');
154	}	86✔
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	*/
195	public changeData(data: any[], cfg?: Partial<Omit<ChoroplethSourceOptions, 'data'>>) {	86✔
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
201	// TODO: 数据更新后，图层尚未执行更新，后续加图层 update 事件来解决	86✔
202	const legend = this.options.legend;	×
203	if (legend) {	×
204	setTimeout(() => {	×
205	this.updateLegendControl(legend);	×
NEW 206	}, 500);	×
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),
220	});	86✔
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));
228	}	86✔
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	);
246	this.chinaBoundaryLayer = chinaBoundaryLayer;	86✔
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;
262	const textLayer = new TextLayer({	86✔
263	name: 'labelLayer',	×
264	source: {	×
265	data,	×
266	parser: { type: 'json', coordinates: 'centroid' },	×
267	transforms: source.transforms,	×
268	},
269	visible,
270	minZoom,
271	maxZoom,
272	zIndex: zIndex + 0.1,	86✔
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) {
310	if (!this.chinaBoundaryLayer) {	86✔
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();
NEW 328	// this.initLegendEvent();	×
329	}	×
330
331	/**
UNCOV 332	* 初始化钻取事件	×
333	*/	×
334	private initDrillEvent() {
UNCOV 335	// 更新：取消上次绑定事件	×
336	if (this.lastOptions.drill) {
337	const { triggerUp = 'unclick', triggerDown = 'click' } = this.lastOptions.drill;
338	this.fillAreaLayer.off(triggerUp, this.onDrillUpHander);
339	this.fillAreaLayer.off(triggerDown, this.onDrillDownHander);
340	}	86✔
UNCOV 341	// 没有下钻	×
342	if (!this.options.drill \|\| this.options.drill.enabled === false) {
343	return;
344	}
345
346	const { steps, triggerUp = 'unclick', triggerDown = 'click' } = this.options.drill;
347	const dillSteps = steps.map((step: DrillStep \| DrillStep['level']) => {	86✔
348	if (typeof step === 'string') {
349	return {	×
350	level: step,	×
351	granularity: DEFAULT_AREA_GRANULARITY[step] as DrillStep['granularity'],	×
352	};	×
353	}
354	if (!step.granularity) {
355	step.granularity = DEFAULT_AREA_GRANULARITY[step.level] as DrillStep['granularity'];	×
356	}	×
357	return step;
358	});	×
359		×
360	// 初始化或钻取路径更新时	×
361	if (!isEqualDrillSteps(dillSteps, this.drillSteps)) {	×
362	this.drillSteps = dillSteps;
363	this.drillStacks = [];
364	}
365
366	// 初始化钻取栈第一钻数据	×
367	if (!this.drillStacks.length) {	×
368	const { level, adcode, granularity = DEFAULT_AREA_GRANULARITY[level] } = this.options.viewLevel;
369	const config = getDrillStepDefaultConfig(this.options);	×
370	this.drillStacks = [{ level, adcode, granularity, config }];
371	}
372		×
373	// 上卷事件	×
374	this.fillAreaLayer.on(triggerUp, this.onDrillUpHander);	×
375	// 下钻事件
376	this.fillAreaLayer.on(triggerDown, this.onDrillDownHander);
377	}	×
378		×
NEW 379	/**	×
NEW 380	* 初始化图例事件	×
381	*/
382	private initLegendEvent() {
NEW 383	const legend = this.options.legend;	×
384	if (!legend) return;
NEW 385	const onUpdateLegendData = () => {	×
386	this.updateLegendControl(legend);
387	};
388	this.fillAreaLayer.on('legend:color', onUpdateLegendData);
389	}
390		86✔
391	/**	×
392	* 重置钻取缓存数据	×
UNCOV 393	*/	×
UNCOV 394	private drillReset() {	×
395	this.drillStacks = [];	×
UNCOV 396	}	×
397
UNCOV 398	/**	×
399	* 获取当前已钻取层级数据
400	*/
401	public getCurrentDrillSteps() {
402	const steps = this.drillStacks.map((item) => pick(item, ['level', 'adcode', 'granularity']) as Required<ViewLevel>);
403		86✔
UNCOV 404	return steps;	×
405	}
406
407	/**
408	* 实现 legend 配置项
409	*/	86✔
410	public getLegendOptions(): LegendOptions {	×
UNCOV 411	const colorLegendItems = this.fillAreaLayer.getColorLegendItems();	×
412	if (colorLegendItems.length !== 0) {
413	return { type: 'category', items: colorLegendItems };
414	}
415
416	return {};	86✔
417	}	×
418		×
UNCOV 419	/**	×
420	* 请求数据
UNCOV 421	*/	×
422	private async fetchData(level: string, adcode: string \| number, granularity: string) {
423	const fileName = `${adcode}_${level}_${granularity}`;
424	const cacheArea = getCacheArea(fileName);
425	if (cacheArea) return cacheArea;
426	const { url, type, extension } = getGeoAreaConfig(this.options.geoArea);	86✔
UNCOV 427		×
428	let data: any;
429	const customFetchGeoData = this.options.customFetchGeoData;	×
UNCOV 430	if (customFetchGeoData) {	×
431	data = await customFetchGeoData({ url, level, adcode, granularity, extension });
432	} else {	×
433	const response = await fetch(`${url}/${level}/${fileName}.${extension}`);	×
434	data = await response.json();	×
435	}	×
436		×
437	if (type === 'topojson') {	×
438	data = topojson2geojson(data);	×
UNCOV 439	}	×
440
441	registerCacheArea(fileName, data);	×
442	return data;	×
UNCOV 443	}	×
444
445	/**	×
UNCOV 446	* 请求初始化区域数据	×
447	*/
448	private async getInitDistrictData() {	×
UNCOV 449	const fetchChinaBoundaryData = this.fetchData('country', '100000', 'boundary');	×
450	const geoData = this.options.source?.joinBy.geoData;
451		×
UNCOV 452	try {	×
453	[this.chinaBoundaryData] = await Promise.all([fetchChinaBoundaryData, this.getDistrictData(geoData)]);
454	} catch (err) {	×
UNCOV 455	throw new Error(`Failed to get china boundary data，${err}`);	×
456	}
457	}
458
459	/**
460	* 请求区域数据
461	*/
462	private async getDistrictData(geoData?: FeatureCollection) {
463	const { level, adcode, granularity = DEFAULT_AREA_GRANULARITY[level] } = this.options.viewLevel;	86✔
464	const fetchCurrentDistrictData = geoData ? Promise.resolve(geoData) : this.fetchData(level, adcode, granularity);
UNCOV 465		×
466	try {
467	this.currentDistrictData = await fetchCurrentDistrictData;
468	this.options.source = deepAssign({}, this.options.source, { joinBy: { geoData: this.currentDistrictData } });	×
UNCOV 469	} catch (err) {	×
470	throw new Error(`Failed to get district data，${err}`);
471	}	×
472	}	×
UNCOV 473		×
474	/**
475	* 向下钻取事件回调	×
UNCOV 476	*/	×
477	private onDrillDownHander = (event: MouseEvent) => {
478	const { steps, onDown } = this.options.drill as Drill;	×
UNCOV 479	const properties = event.feature?.properties;	×
480	const { adcode } = properties;
481		×
482	// 已经下钻到最后	×
UNCOV 483	if (this.drillStacks.length === steps.length + 1) {	×
484	return;
485	}
486
487	// 已开始下钻
488	const from = this.drillStacks.slice(-1)[0];
489	const depth = this.drillStacks.length - 1;
490	const { level, granularity = DEFAULT_AREA_GRANULARITY[level], ...drillConfig } = this.drillSteps[depth];
491		86✔
UNCOV 492	const downParams = {	×
493	nativeEvent: true,
494	from: { level: from.level, adcode: from.adcode, granularity: from.granularity },	×
UNCOV 495	to: { level, adcode, granularity, properties },	×
496	};
497	const callback = (config: DrillStepConfig = {}) => {	×
498	const view = { level, adcode, granularity };	×
UNCOV 499	const mergeConfig = deepAssign({}, drillConfig, config);	×
500	this.changeView(view, mergeConfig).then((drillData) => {
501	if (drillData) {	×
502	this.drillStacks.push(drillData);	×
UNCOV 503	this.emit('drilldown', downParams);	×
504	}
505	});	×
506	};	×
UNCOV 507		×
508	if (onDown) {
509	onDown(downParams.from, downParams.to, callback);	×
510	} else {	×
UNCOV 511	callback();	×
512	}
513	};
514
515	/**
516	* 向上钻取事件回调
517	*/
518	private onDrillUpHander = () => {
519	const { onUp } = this.options.drill as Drill;	86✔
520	// 已经上卷到最高层级	×
521	const isTopDrillStack = this.drillStacks.length === 0 \|\| this.drillStacks.length === 1;	×
522	if (isTopDrillStack) {	×
523	return;	×
UNCOV 524	}	×
525
526	const lastIndex = this.drillStacks.length - 1;
527	const from = this.drillStacks[lastIndex];
528	const to = this.drillStacks[lastIndex - 1];
529	const upParams = {
530	nativeEvent: true,	×
531	from: { level: from.level, adcode: from.adcode, granularity: from.granularity },	×
532	to: { level: to.level, adcode: to.adcode, granularity: to.granularity },	×
UNCOV 533	};	×
534	const callback = (config: DrillStepConfig = {}) => {
535	const view = upParams.to;
536	const mergeConfig = deepAssign({}, to.config, config);
537	this.changeView(view, mergeConfig).then((drillData) => {
538	if (drillData) {
539	this.drillStacks.pop();
540	this.emit('drillup', upParams);	86✔
541	}	×
UNCOV 542	});	×
543	};
544		×
545	if (onUp) {	×
546	onUp(upParams.from, upParams.to, callback);	×
UNCOV 547	} else {	×
548	callback();
549	}	×
550	};	×
551		×
552	/**	×
553	* 向下钻取方法	×
554	*/	×
UNCOV 555	public drillDown(view: ViewLevel, config: DrillStepConfig = {}) {	×
556	const from = this.drillStacks.slice(-1)[0];
557	const { level, adcode, granularity } = view;
558	const downParams = {
559	nativeEvent: false,
560	from: { level: from.level, adcode: from.adcode, granularity: from.granularity },	×
561	to: { level, adcode, granularity },	×
562	};	×
UNCOV 563		×
564	// TODO: remove view
565	this.changeView(view, config).then((drillData) => {
UNCOV 566	if (drillData) {	×
567	this.drillStacks.push(drillData);
UNCOV 568	this.emit('drilldown', downParams);	×
569	}
570	});
571	}
572
573	/**
574	* 向上钻取方法
575	*/	86✔
576	public drillUp(config: DrillStepConfig = {}, level?: ViewLevel['level']) {	×
UNCOV 577	// 已经上卷到最高层级	×
578	const drillStacksLength = this.drillStacks.length;
579	const isTopDrillStack = [0, 1].includes(drillStacksLength);	×
UNCOV 580	if (isTopDrillStack) {	×
581	return;
582	}	×
UNCOV 583	const customUpStackIndex = level ? this.drillStacks.findIndex((item) => item.level === level) : -1;	×
584	const isCustomUp = customUpStackIndex !== -1;
585	const stacksIndex = isCustomUp ? customUpStackIndex : drillStacksLength - 2;	×
586	const { config: drillConfig, ...view } = this.drillStacks[stacksIndex];	×
587	const mergeConfig = deepAssign({}, drillConfig, config);	×
UNCOV 588		×
589	const from = this.drillStacks[this.drillStacks.length - 1];
590	const upParams = {
591	nativeEvent: false,
592	from: { level: from.level, adcode: from.adcode, granularity: from.granularity },	×
UNCOV 593	to: { level: view.level, adcode: view.adcode, granularity: view.granularity },	×
594	};
595
596	this.changeView(view, mergeConfig).then((drillData) => {
597	if (drillData) {
598	if (isCustomUp) {
UNCOV 599	this.drillStacks.splice(customUpStackIndex + 1);	×
600	} else {
601	this.drillStacks.pop();
602	}
603	this.emit('drillup', upParams);
604	}
605	});
606	}
607		86✔
608	/**
609	* 更新显示区域
610	*/
611	public async changeView(view: ViewLevel, config: DrillStepConfig = {}) {	86✔
612	const { level, adcode, granularity = DEFAULT_AREA_GRANULARITY[level] } = view;
613	const geoData = await this.fetchData(level, adcode, granularity);
614	if (!geoData.features.length) return;
615	const mergeConfig = deepAssign({}, getDrillStepDefaultConfig(this.options), config, {	86✔
616	viewLevel: { level, adcode, granularity },	86✔
617	source: { joinBy: { geoData } },
618	});	86✔
619
620	this.update(mergeConfig);
621
622	const drillData: DrillStack = {
623	level,
624	adcode,
625	granularity,
626	config: mergeConfig,
627	};
628	return drillData;
629	}
630	}

antvis / L7Plot / 8171475525

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