From df7b4bde0f553a85977b9758e5cfb72a6f73feb8 Mon Sep 17 00:00:00 2001 From: yunji Date: Tue, 26 Dec 2023 15:04:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20SwipeControl?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/widgets/SwipeControl/ComponenStyle.ts | 17 ++++++++ .../src/widgets/SwipeControl/Component.tsx | 39 +++++++++++++++++++ .../src/widgets/SwipeControl/index.md | 1 + .../src/widgets/SwipeControl/index.tsx | 22 +++++++++++ .../src/widgets/SwipeControl/registerForm.ts | 36 +++++++++++++++++ .../li-analysis-assets/src/widgets/index.ts | 1 + .../src/widgets/ZoomControl/registerForm.ts | 2 +- 7 files changed, 117 insertions(+), 1 deletion(-) create mode 100644 packages/li-analysis-assets/src/widgets/SwipeControl/ComponenStyle.ts create mode 100644 packages/li-analysis-assets/src/widgets/SwipeControl/Component.tsx create mode 100644 packages/li-analysis-assets/src/widgets/SwipeControl/index.md create mode 100644 packages/li-analysis-assets/src/widgets/SwipeControl/index.tsx create mode 100644 packages/li-analysis-assets/src/widgets/SwipeControl/registerForm.ts diff --git a/packages/li-analysis-assets/src/widgets/SwipeControl/ComponenStyle.ts b/packages/li-analysis-assets/src/widgets/SwipeControl/ComponenStyle.ts new file mode 100644 index 00000000..f44aaa11 --- /dev/null +++ b/packages/li-analysis-assets/src/widgets/SwipeControl/ComponenStyle.ts @@ -0,0 +1,17 @@ +import { css } from '@emotion/css'; +import { theme } from 'antd'; + +const useStyle = () => { + const { useToken } = theme; + const { token } = useToken(); + + const { colorTextDescription, colorBgContainer, colorBorder, colorText, colorBgElevated, borderRadius } = token; + + return { + swipeControl: css` + border-radius: ${borderRadius}px; + `, + }; +}; + +export default useStyle; diff --git a/packages/li-analysis-assets/src/widgets/SwipeControl/Component.tsx b/packages/li-analysis-assets/src/widgets/SwipeControl/Component.tsx new file mode 100644 index 00000000..c21cf42e --- /dev/null +++ b/packages/li-analysis-assets/src/widgets/SwipeControl/Component.tsx @@ -0,0 +1,39 @@ +import { Swipe } from '@antv/l7'; +import type { ImplementWidgetProps } from '@antv/li-sdk'; +import { useScene } from '@antv/li-sdk'; +import type React from 'react'; +import { useEffect, useRef } from 'react'; +import useStyle from './ComponenStyle'; +import type { Properties } from './registerForm'; + +/** 组件名称, 前缀 */ +const CLS_PREFIX = 'li-swipe-control'; + +export interface SwipeControlProps extends ImplementWidgetProps, Properties {} + +const SwipeControl: React.FC = (props) => { + const { position, orientation, leftLayers, rightLayers } = props; + const styles = useStyle(); + const [scene] = useScene(); + + const swipeRef = useRef( + new Swipe({ + orientation: orientation, + ratio: 0.5, + layers: [], + rightLayers: [], + }), + ); + + useEffect(() => { + scene?.addControl(swipeRef.current); + + return () => { + scene?.removeControl(swipeRef.current); + }; + }, [scene]); + + return null; +}; + +export default SwipeControl; diff --git a/packages/li-analysis-assets/src/widgets/SwipeControl/index.md b/packages/li-analysis-assets/src/widgets/SwipeControl/index.md new file mode 100644 index 00000000..331b002b --- /dev/null +++ b/packages/li-analysis-assets/src/widgets/SwipeControl/index.md @@ -0,0 +1 @@ +## SwipeControl diff --git a/packages/li-analysis-assets/src/widgets/SwipeControl/index.tsx b/packages/li-analysis-assets/src/widgets/SwipeControl/index.tsx new file mode 100644 index 00000000..37614840 --- /dev/null +++ b/packages/li-analysis-assets/src/widgets/SwipeControl/index.tsx @@ -0,0 +1,22 @@ +import { implementWidget } from '@antv/li-sdk'; +import component from './Component'; +import registerForm from './registerForm'; + +export default implementWidget({ + version: 'v0.1', + metadata: { + name: 'SwipeControl', + displayName: '卷帘对比', + description: '用于分屏对比两个地图上叠加图层', + type: 'Auto', + category: 'MapControl', + }, + defaultProperties: { + position: 'topright', + orientation: 'vertical', + leftLayers: [], + rightLayers: [], + }, + component, + registerForm, +}); diff --git a/packages/li-analysis-assets/src/widgets/SwipeControl/registerForm.ts b/packages/li-analysis-assets/src/widgets/SwipeControl/registerForm.ts new file mode 100644 index 00000000..f02278c4 --- /dev/null +++ b/packages/li-analysis-assets/src/widgets/SwipeControl/registerForm.ts @@ -0,0 +1,36 @@ +import type { PositionName } from '@antv/l7'; +import type { WidgetRegisterForm } from '@antv/li-sdk'; +/** + * 属性面板生产的数据类型定义 + */ +export type Properties = { + /** 控件放置位置 */ + position?: PositionName; + /** 卷帘方向设置，默认 'vertical' */ + orientation?: 'vertical' | 'horizontal'; + /** 卷帘左侧的图层 ID */ + leftLayers: string[]; + /** 卷帘右侧侧的图层 ID */ + rightLayers: string[]; +}; + +export default (): WidgetRegisterForm => { + // 属性面板表单的 Schema 定义，来自表单库 formily 的 Schema + const schema = { + position: { + title: '放置方位', + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'ControlPositionSelect', + default: 'bottomright', + }, + // showZoom: { + // title: '显示层级', + // type: 'boolean', + // 'x-decorator': 'FormItem', + // 'x-component': 'Switch', + // default: true, + // }, + }; + return { schema }; +}; diff --git a/packages/li-analysis-assets/src/widgets/index.ts b/packages/li-analysis-assets/src/widgets/index.ts index c1430215..699cbc9d 100644 --- a/packages/li-analysis-assets/src/widgets/index.ts +++ b/packages/li-analysis-assets/src/widgets/index.ts @@ -13,3 +13,4 @@ export { default as MeasureControl } from './MeasureControl'; export { default as TimeLine } from './TimeLine'; export { default as SpreadSheetTable } from './SpreadSheetTable'; export { default as AdministrativeSelectControl } from './AdministrativeSelectControl'; +export { default as SwipeControl } from './SwipeControl'; diff --git a/packages/li-core-assets/src/widgets/ZoomControl/registerForm.ts b/packages/li-core-assets/src/widgets/ZoomControl/registerForm.ts index efd52b8e..7af383bd 100644 --- a/packages/li-core-assets/src/widgets/ZoomControl/registerForm.ts +++ b/packages/li-core-assets/src/widgets/ZoomControl/registerForm.ts @@ -4,7 +4,7 @@ import type { WidgetRegisterForm } from '@antv/li-sdk'; * 属性面板生产的数据类型定义 */ export type Properties = { - /** 是否显示侧边栏面板 */ + /** 控件放置位置 */ position?: PositionName; /** 是否显示层级 */ showZoom?: boolean;