feat: 新增 swipe 控件

src/components/Control/SwipeControl/demos/default.tsx

@@ -0,0 +1,35 @@
+import { LarkMap, RasterLayer, SwipeControl, useLayer } from '@antv/larkmap';
+import React from 'react';
+
+const CustomComponent = () => {
+  const rightRasterLayer = useLayer('rightRasterLayer');
+  return (
+    <SwipeControl orientation="vertical" ratio={0.5} layers={['leftRasterLayer']} rightLayers={[rightRasterLayer]} />
+  );
+};
+
+export default () => {
+  return (
+    <LarkMap mapType="Gaode" style={{ height: '400px' }}>
+      <RasterLayer
+        id="rightRasterLayer"
+        source={{
+          data: 'https://tiles{1-3}.geovisearth.com/base/v1/ter/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788',
+          parser: { maxZoom: 21, minZoom: 3, type: 'rasterTile', tileSize: 256, zoomOffset: 0 },
+        }}
+      />
+      <RasterLayer
+        id="leftRasterLayer"
+        source={{
+          data: 'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788',
+          parser: {
+            type: 'rasterTile',
+            tileSize: 256,
+            zoomOffset: 0,
+          },
+        }}
+      />
+      <CustomComponent />
+    </LarkMap>
+  );
+};

src/components/Control/SwipeControl/index.md

@@ -0,0 +1,37 @@
+---
+toc: content
+order: 2
+group:
+  title: 控件组件
+  order: 2
+nav:
+  title: 组件
+  path: /components
+---
+
+## 卷帘 - SwipeControl
+
+### 介绍
+
+该控件用于分屏对比两个地图上叠加图层，图层可以添加到地图的左侧（顶部）或右侧（底部）。未添加到卷帘上的图层将显示在两侧。
+
+### 代码演示
+
+<code src="./demos/default.tsx" defaultShowCode compact></code>
+
+### API
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| orientation | 卷帘方向设置，默认 'vertical' | `vertical｜horizontal` |
+| ratio | 卷帘的位置，值域为 0 到 1, 默认正中间为 0.5 | `number` | 
+| layers | 卷帘左侧的图层 | `Array<ILayer｜string>` |
+| rightLayers | 卷帘左侧的图层 | `Array<ILayer｜string>` | 
+| className | 自定义样式名 | `string` | 
+| style | 自定义样式 | `CSSProperties` | 
+| onAdd | 组件被添加时的回调 | `(this) => void` | 
+| onRemove | 组件被移除时的回调 | `(this) => void` | 
+| onShow | 组件显示时的回调 | `(this) => void` |
+| onHide | 组件隐藏时的回调 | `(this) => void` |
+| onMoving | 卷帘移动事件 | `(data: {size: number[], ratio: number[]}) => void` |
+

src/components/Control/SwipeControl/index.tsx

@@ -0,0 +1,89 @@
+import type { IZoomControlOption } from '@antv/l7';
+import { Swipe as L7Swipe } from '@antv/l7';
+import { omitBy } from 'lodash-es';
+import React, { useEffect, useMemo, useState } from 'react';
+import { getStyleText } from '../../../utils';
+import { useLayerList, useScene } from '../../LarkMap/hooks';
+import { useL7ComponentEvent, useL7ComponentUpdate } from '../hooks';
+import type { SwipeControlProps } from './types';
+
+export const SwipeControl: React.FC<SwipeControlProps> = ({
+  onShow,
+  onHide,
+  onAdd,
+  onRemove,
+  onMoving,
+  className,
+  style,
+  rightLayers,
+  layers: layerItems,
+  ratio,
+  orientation,
+}) => {
+  const scene = useScene();
+  const [control, setControl] = useState<L7Swipe | undefined>();
+  const styleText = useMemo(() => getStyleText(style), [style]);
+  const fullLayerList = useLayerList();
+
+  const layers = (defaultLayers) => {
+    return defaultLayers?.length
+      ? defaultLayers
+          .map((layerItem) => {
+            if (typeof layerItem === 'string') {
+              return fullLayerList.find((layer) => layer.id === layerItem);
+            }
+            if (!Object.prototype.hasOwnProperty.call(layerItem, 'isComposite')) {
+              //@ts-ignore
+              const { layer } = layerItem;
+
+              if (typeof layer === 'string') {
+                const targetLayer = fullLayerList.find((item) => item.id === layer);
+                return targetLayer ? { ...layerItem, layer: targetLayer } : undefined;
+              }
+              return layerItem;
+            }
+
+            return layerItem;
+          })
+          .filter((layer) => !!layer)
+          .map((layerItem) => {
+            //@ts-ignore
+            return layerItem.subLayers ? layerItem.subLayers.getLayers().map((layer) => layer.layer) : layerItem.layer;
+          })
+          .flat()
+      : fullLayerList;
+  };
+
+  const controlOptions: Partial<IZoomControlOption> = useMemo(() => {
+    return {
+      rightLayers: layers(rightLayers),
+      layers: layers(layerItems),
+      ratio,
+      orientation,
+      style: styleText,
+    };
+  }, [className, styleText, rightLayers, layers, ratio, orientation]);
+
+  useEffect(() => {
+    const swipe = new L7Swipe(omitBy(controlOptions, (value) => value === undefined));
+    setControl(swipe);
+    scene.addControl(swipe);
+    return () => {
+      scene.removeControl(swipe);
+      setControl(undefined);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useL7ComponentUpdate(control, controlOptions);
+
+  useL7ComponentEvent(control, {
+    add: onAdd,
+    remove: onRemove,
+    show: onShow,
+    hide: onHide,
+    moving: onMoving,
+  });
+
+  return <></>;
+};

src/components/Control/SwipeControl/types.ts

@@ -0,0 +1,11 @@
+import type { ISwipeControlOption, Zoom as L7Zoom } from '@antv/l7';
+import type { CSSProperties } from 'react';
+import type { IControlCallback, Layer } from '../../../types';
+
+export interface SwipeControlProps
+  extends Omit<Partial<ISwipeControlOption>, 'style' | 'layers'>,
+    IControlCallback<L7Zoom> {
+  style?: CSSProperties;
+  onMoving?: (data: { size: number[]; ratio: number[] }) => void;
+  layers: (Layer | string)[];
+}

src/components/Control/index.ts

@@ -29,3 +29,6 @@ export type { ZoomControlProps } from './ZoomControl/types';
 
 export { LogoControl } from './LogoControl';
 export type { LogoControlProps } from './LogoControl/types';
+
+export { SwipeControl } from './SwipeControl';
+export type { SwipeControlProps } from './SwipeControl/types';