Skip to content

Commit

Permalink
fix: chinaBorder update of choropleth
Browse files Browse the repository at this point in the history
  • Loading branch information
@lvisei
lvisei committed Dec 24, 2021
1 parent 3df0083 commit f469979
Show file tree
Hide file tree
Showing 11 changed files with 69 additions and 106 deletions.
2 changes: 1 addition & 1 deletion packages/l7plot/package.json
View file
Expand Up @@ -45,7 +45,7 @@
},
"dependencies": {
"@antv/event-emitter": "^0.1.2",
"@antv/l7": "^2.6.22",
"@antv/l7": "^2.6.25",
"@antv/l7plot-component": "^0.0.3-alpha.5",
"@antv/util": "^2.0.13",
"lodash-es": "^4.17.21",
Expand Down
21 changes: 21 additions & 0 deletions packages/l7plot/src/core/plot/index.ts
View file
Expand Up @@ -109,6 +109,27 @@ export abstract class Plot<O extends PlotOptions> extends Map<O> {
return textLayer;
}

/**
* 更新数据标签图层
*/
protected updateLabelLayer(
source: Source,
label?: false | LabelOptions,
plotLayerConfig?: PlotLayerOptions,
labelLayer?: TextLayer
) {
if (label) {
if (labelLayer) {
labelLayer.update({ ...label });
} else {
labelLayer = this.createLabelLayer(source, label, plotLayerConfig);
this.layerGroup.addLayer(labelLayer);
}
} else if (label === false) {
labelLayer && this.layerGroup.removeLayer(labelLayer);
}
}

/**
* 渲染
*/
Expand Down
13 changes: 1 addition & 12 deletions packages/l7plot/src/plots/area/index.ts
View file
Expand Up @@ -62,18 +62,7 @@ export class Area extends Plot<AreaOptions> {
const polygonLayerConfig = pick<any>(options, AreaLayer.LayerOptionsKeys);
this.areaLayer.update(polygonLayerConfig);

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

/**
Expand Down
43 changes: 21 additions & 22 deletions packages/l7plot/src/plots/choropleth/index.ts
View file
Expand Up @@ -213,7 +213,7 @@ export class Choropleth extends Plot<ChoroplethOptions> {
const layerGroup = new LayerGroup([this.fillAreaLayer]);

if (this.options.chinaBorder) {
const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(
const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = this.createCountryBoundaryLayer(
this.chinaBoundaryData,
this.options
);
Expand All @@ -231,6 +231,14 @@ export class Choropleth extends Plot<ChoroplethOptions> {
return layerGroup;
}

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

/**
* 创建数据标签图层
*/
Expand All @@ -255,11 +263,16 @@ export class Choropleth extends Plot<ChoroplethOptions> {
...label,
});

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

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

return textLayer;
Expand All @@ -274,7 +287,7 @@ export class Choropleth extends Plot<ChoroplethOptions> {

if (options.chinaBorder) {
if (!this.chinaBoundaryLayer) {
const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = createCountryBoundaryLayer(
const { chinaBoundaryLayer, chinaDisputeBoundaryLayer } = this.createCountryBoundaryLayer(
this.chinaBoundaryData,
this.options
);
Expand All @@ -283,27 +296,13 @@ export class Choropleth extends Plot<ChoroplethOptions> {
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);
}
// todo 更新方法
} else if (options.chinaBorder === false) {
this.chinaBoundaryLayer && this.layerGroup.removeLayer(this.chinaBoundaryLayer);
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);
}
}
this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
}

/**
Expand Down
11 changes: 7 additions & 4 deletions packages/l7plot/src/plots/choropleth/layer.ts
View file
@@ -1,16 +1,19 @@
import { deepAssign } from '../../utils';
import { ChinaBoundaryStyle, ChoroplethOptions } from './types';
import { ChinaBoundaryStyle, ChoroplethOptions, FeatureCollection } from './types';
import { PathLayer } from '../../layers/path-layer';
import { CHINA_BOUNDARY_STYLE } from './constants';

export const createCountryBoundaryLayer = (data: any, plotConfig?: ChoroplethOptions) => {
/**
* 创建中国国界线图层
*/
export const createCountryBoundaryLayer = (data: FeatureCollection, plotConfig?: ChoroplethOptions) => {
const { visible, minZoom, maxZoom, zIndex = 0, chinaBorder } = plotConfig || {};
const borderStyle: Required<ChinaBoundaryStyle> =
typeof chinaBorder === 'object' ? deepAssign({}, CHINA_BOUNDARY_STYLE, chinaBorder) : CHINA_BOUNDARY_STYLE;
const chinaBoundaryFeatures = data.features.filter(({ properties }) =>
['coast', 'hkm', 'national'].includes(properties.type)
['coast', 'hkm', 'national'].includes(properties?.['type'])
);
const disputeBoundaryFeatures = data.features.filter(({ properties }) => properties.type === 'dispute');
const disputeBoundaryFeatures = data.features.filter(({ properties }) => properties?.['type']);

const chinaBoundaryLayer = new PathLayer({
name: 'chinaBoundaryLayer',
Expand Down
13 changes: 1 addition & 12 deletions packages/l7plot/src/plots/dot/index.ts
View file
Expand Up @@ -62,18 +62,7 @@ export class Dot extends Plot<DotOptions> {
const dotLayerConfig = pick<any>(options, DotLayer.LayerOptionsKeys);
this.dotLayer.update(dotLayerConfig);

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

/**
Expand Down
31 changes: 13 additions & 18 deletions packages/l7plot/src/plots/flow/index.ts
View file
Expand Up @@ -105,9 +105,14 @@ export class Flow extends Plot<FlowOptions> {
animate,
});

source.on('update', () => {
const updateCallback = () => {
const data = this.parserPointData(this.source);
radiationLayer.layer.setData(data);
};

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

return radiationLayer;
Expand All @@ -132,9 +137,14 @@ export class Flow extends Plot<FlowOptions> {
...label,
});

source.on('update', () => {
const updateCallback = () => {
const data = this.parserPointData(this.source);
labelLayer.layer.setData(data);
};

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

return labelLayer;
Expand All @@ -155,24 +165,9 @@ export class Flow extends Plot<FlowOptions> {
this.radiationLayer = this.createRadiationLayer(this.source);
this.layerGroup.addLayer(this.radiationLayer);
}
} else {
if (this.radiationLayer) {
this.layerGroup.removeLayer(this.radiationLayer);
}
}

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);
}
}
this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
}

/**
Expand Down
13 changes: 1 addition & 12 deletions packages/l7plot/src/plots/grid/index.ts
View file
Expand Up @@ -62,17 +62,6 @@ export class Grid extends Plot<GridOptions> {
const heatMapLayerConfig = pick<any>(options, GridLayer.LayerOptionsKeys);
this.gridLayer.update(heatMapLayerConfig);

if (options.label) {
if (this.labelLayer) {
this.labelLayer.update({ ...options.label });
} else {
this.labelLayer = this.createLabelLayer(this.source, options.label, this.options);
this.layerGroup.addLayer(this.labelLayer);
}
} else {
if (this.labelLayer) {
this.layerGroup.removeLayer(this.labelLayer);
}
}
this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
}
}
13 changes: 1 addition & 12 deletions packages/l7plot/src/plots/heatmap/index.ts
View file
Expand Up @@ -62,18 +62,7 @@ export class Heatmap extends Plot<HeatmapOptions> {
const heatMapLayerConfig = pick<any>(options, HeatmapLayer.LayerOptionsKeys);
this.heatmapLayer.update(heatMapLayerConfig);

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

/**
Expand Down
13 changes: 1 addition & 12 deletions packages/l7plot/src/plots/hexbin/index.ts
View file
Expand Up @@ -62,17 +62,6 @@ export class Hexbin extends Plot<HexbinOptions> {
const heatMapLayerConfig = pick<any>(options, HexbinLayer.LayerOptionsKeys);
this.hexbinLayer.update(heatMapLayerConfig);

if (options.label) {
if (this.labelLayer) {
this.labelLayer.update({ ...options.label });
} else {
this.labelLayer = this.createLabelLayer(this.source, options.label, this.options);
this.layerGroup.addLayer(this.labelLayer);
}
} else {
if (this.labelLayer) {
this.layerGroup.removeLayer(this.labelLayer);
}
}
this.updateLabelLayer(this.source, options.label, this.options, this.labelLayer);
}
}
2 changes: 1 addition & 1 deletion storybook/package.json
View file
Expand Up @@ -13,7 +13,7 @@
"prettier": "prettier stories -c -w"
},
"dependencies": {
"@antv/l7": "^2.6.22",
"@antv/l7": "^2.6.25",
"@antv/l7plot": "^0.0.3-alpha.10",
"antd": "^4.16.13",
"react": "^16.14.0",
Expand Down

0 comments on commit f469979

Please sign in to comment.