feat: 新增 SwipeControl

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;

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<SwipeControlProps> = (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;

packages/li-analysis-assets/src/widgets/SwipeControl/index.md

@@ -0,0 +1 @@
+## SwipeControl

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

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<Properties> => {
+  // 属性面板表单的 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 };
+};

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';

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;