From 2b9be52cfd0ece5891c7b79a3a9879a2f4b54357 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=81=86=E4=B8=80?= Date: Thu, 27 Feb 2020 08:02:21 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix(react):=20=E4=BF=AE=E5=A4=8DLayerContex?= =?UTF-8?q?t=E7=B1=BB=E5=9E=8B=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react/src/component/LayerContext.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/component/LayerContext.tsx b/packages/react/src/component/LayerContext.tsx index 4c6378a13c..4adf6479b1 100644 --- a/packages/react/src/component/LayerContext.tsx +++ b/packages/react/src/component/LayerContext.tsx @@ -1,7 +1,8 @@ import { ILayer } from '@antv/l7'; import { createContext, useContext } from 'react'; -export const LayerContext = createContext({}); +// tslint:disable-next-line: no-object-literal-type-assertion +export const LayerContext = createContext({} as ILayer); export function useLayerValue(): ILayer { return (useContext(LayerContext) as unknown) as ILayer; } From 2686c48881579e96aeb9668ec8d6cd8c38ea53f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=81=86=E4=B8=80?= Date: Thu, 27 Feb 2020 08:05:54 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix(react):=20=E5=9C=B0=E5=9B=BE=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E5=A4=A7=E5=B0=8F=E7=9A=84=E5=9B=9E=E8=B0=83=E5=87=BD?= =?UTF-8?q?=E6=95=B0=E4=B8=8D=E4=BC=9A=E6=9B=B4=E6=96=B0bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react/src/component/LayerAttribute/Color.tsx | 3 ++- packages/react/src/component/LayerAttribute/Size.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react/src/component/LayerAttribute/Color.tsx b/packages/react/src/component/LayerAttribute/Color.tsx index e851c4835a..5122be4707 100644 --- a/packages/react/src/component/LayerAttribute/Color.tsx +++ b/packages/react/src/component/LayerAttribute/Color.tsx @@ -13,7 +13,8 @@ export default React.memo(function Chart(props: ILayerProps) { color.field ? layer.color(color.field as StyleAttrField, color.values) : layer.color(color.values as StyleAttrField); - }, [color.field, color.scale, JSON.stringify(color.values)]); + // TODO：目前这种处理会频繁更新，但是直接JSON.Stringify(size.values)，回调函数不会更新，待优化 + }, [color.field, color.scale, color.values]); return null; }); diff --git a/packages/react/src/component/LayerAttribute/Size.tsx b/packages/react/src/component/LayerAttribute/Size.tsx index 399a873690..49e138da53 100644 --- a/packages/react/src/component/LayerAttribute/Size.tsx +++ b/packages/react/src/component/LayerAttribute/Size.tsx @@ -13,6 +13,7 @@ export default React.memo(function Chart(props: ILayerProps) { size.field ? layer.size(size.field, size.values) : layer.size(size.values as StyleAttrField); - }, [size.field, JSON.stringify(size.values), size.scale]); + // TODO：目前这种处理会频繁更新，但是直接JSON.Stringify(size.values)，回调函数不会更新，待优化 + }, [size.field, size.values, size.scale]); return null; }); From 7167c3197e76355ec159e0004dcc26ee986bc70d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=81=86=E4=B8=80?= Date: Thu, 27 Feb 2020 08:21:27 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix(react):=20=E6=9B=B4=E6=96=B0=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E6=BA=90=E4=B9=8B=E5=90=8E=E6=98=AF=E5=90=A6=E9=9C=80?= =?UTF-8?q?=E8=A6=81=E8=87=AA=E9=80=82=E5=BA=94=E9=85=8D=E7=BD=AE=E9=A1=B9?= =?UTF-8?q?=E5=BC=80=E5=90=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react/src/component/LayerAttribute/Layer.tsx | 4 ---- packages/react/src/component/LayerAttribute/Source.tsx | 5 +++++ packages/react/src/component/LayerAttribute/index.ts | 2 ++ 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/react/src/component/LayerAttribute/Layer.tsx b/packages/react/src/component/LayerAttribute/Layer.tsx index dc940e9f8b..60a0fd8165 100644 --- a/packages/react/src/component/LayerAttribute/Layer.tsx +++ b/packages/react/src/component/LayerAttribute/Layer.tsx @@ -60,10 +60,6 @@ export default function BaseLayer(type: string, props: ILayerProps) { // 重绘layer if (layer) { mapScene.render(); - // 如果autoFit为true，执行自适应操作 - if (options?.autoFit) { - layer.fitBounds(); - } } }); diff --git a/packages/react/src/component/LayerAttribute/Source.tsx b/packages/react/src/component/LayerAttribute/Source.tsx index d460adbc8f..f4bd6d71bd 100644 --- a/packages/react/src/component/LayerAttribute/Source.tsx +++ b/packages/react/src/component/LayerAttribute/Source.tsx @@ -17,6 +17,11 @@ export default React.memo(function Chart(props: ISourceProps) { } else { layer.setData(data, sourceOption); } + // 临时解决：若开启，每次更新之后自适应缩放； + // TODO：是否可以统一到Layer的option里，目前问题是Layer的autoFit一直为true，无法触发更新 + if (sourceOption.autoFit) { + layer.fitBounds(); + } }, [data, JSON.stringify(sourceOption)]); return null; }); diff --git a/packages/react/src/component/LayerAttribute/index.ts b/packages/react/src/component/LayerAttribute/index.ts index 9e9fdbd42e..c44a024c8d 100644 --- a/packages/react/src/component/LayerAttribute/index.ts +++ b/packages/react/src/component/LayerAttribute/index.ts @@ -49,6 +49,8 @@ export interface IStyleOptions { export interface ISourceOptions extends ISourceCFG { data: any; + // 每次更新数据之后是否自适应缩放 + autoFit: boolean; } export interface IActiveOptions { From 53a99b7ea8c31e74b09e5bb3cb0cf85ed7c9d319 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=81=86=E4=B8=80?= Date: Thu, 27 Feb 2020 11:13:47 +0800 Subject: [PATCH 4/4] =?UTF-8?q?perf(react):=20=E4=BC=98=E5=8C=96react?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=9B=B4=E6=96=B0=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react/src/component/LayerAttribute/Color.tsx | 3 +-- packages/react/src/component/LayerAttribute/Filter.tsx | 2 +- packages/react/src/component/LayerAttribute/Shape.tsx | 2 +- packages/react/src/component/LayerAttribute/Size.tsx | 3 +-- packages/react/src/component/LayerAttribute/index.ts | 3 +++ 5 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/react/src/component/LayerAttribute/Color.tsx b/packages/react/src/component/LayerAttribute/Color.tsx index 5122be4707..6d0ee72a55 100644 --- a/packages/react/src/component/LayerAttribute/Color.tsx +++ b/packages/react/src/component/LayerAttribute/Color.tsx @@ -13,8 +13,7 @@ export default React.memo(function Chart(props: ILayerProps) { color.field ? layer.color(color.field as StyleAttrField, color.values) : layer.color(color.values as StyleAttrField); - // TODO：目前这种处理会频繁更新，但是直接JSON.Stringify(size.values)，回调函数不会更新，待优化 - }, [color.field, color.scale, color.values]); + }, [color.field, color.scale, JSON.stringify(color.values), JSON.stringify(color.options)]); return null; }); diff --git a/packages/react/src/component/LayerAttribute/Filter.tsx b/packages/react/src/component/LayerAttribute/Filter.tsx index 9bf08056a6..1a0c8e54a0 100644 --- a/packages/react/src/component/LayerAttribute/Filter.tsx +++ b/packages/react/src/component/LayerAttribute/Filter.tsx @@ -13,6 +13,6 @@ export default React.memo(function Chart(props: ILayerProps) { if (filter.field) { layer.filter(filter.field as string, filter.values as StyleAttrField); } - }, [filter.field, filter.values, JSON.stringify(filter.values)]); + }, [filter.field, filter.values, JSON.stringify(filter.values), JSON.stringify(filter.options)]); return null; }); diff --git a/packages/react/src/component/LayerAttribute/Shape.tsx b/packages/react/src/component/LayerAttribute/Shape.tsx index cb39018d70..8da6efe3ec 100644 --- a/packages/react/src/component/LayerAttribute/Shape.tsx +++ b/packages/react/src/component/LayerAttribute/Shape.tsx @@ -13,6 +13,6 @@ export default React.memo(function Chart(props: ILayerProps) { shape.field ? layer.shape(shape.field, shape.values) : layer.shape(shape.values as StyleAttrField); - }, [shape.field, JSON.stringify(shape.values)]); + }, [shape.field, JSON.stringify(shape.values), JSON.stringify(shape.options)]); return null; }); diff --git a/packages/react/src/component/LayerAttribute/Size.tsx b/packages/react/src/component/LayerAttribute/Size.tsx index 49e138da53..bfa852ddca 100644 --- a/packages/react/src/component/LayerAttribute/Size.tsx +++ b/packages/react/src/component/LayerAttribute/Size.tsx @@ -13,7 +13,6 @@ export default React.memo(function Chart(props: ILayerProps) { size.field ? layer.size(size.field, size.values) : layer.size(size.values as StyleAttrField); - // TODO：目前这种处理会频繁更新，但是直接JSON.Stringify(size.values)，回调函数不会更新，待优化 - }, [size.field, size.values, size.scale]); + }, [size.field, size.scale, JSON.stringify(size.values), JSON.stringify(size.options)]); return null; }); diff --git a/packages/react/src/component/LayerAttribute/index.ts b/packages/react/src/component/LayerAttribute/index.ts index c44a024c8d..0e359cd0e4 100644 --- a/packages/react/src/component/LayerAttribute/index.ts +++ b/packages/react/src/component/LayerAttribute/index.ts @@ -22,6 +22,9 @@ export interface IAttributeOptions { values: string[] | number[] | string | number | CallBack; scale?: string; blend: keyof typeof BlendType; + options?: { + [key: string]: any; + }; } export interface IScaleAttributeOptions {