feat: 初步完成Fullscreen控件

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

@@ -0,0 +1,12 @@
+import { LarkMap, FullscreenControl } from '@antv/larkmap';
+import React from 'react';
+
+export default () => {
+  return (
+    <>
+      <LarkMap mapType="GaodeV1" style={{ height: '300px' }}>
+        <FullscreenControl position="topleft" />
+      </LarkMap>
+    </>
+  );
+};

src/components/Control/FullscreenControl/index.md

@@ -0,0 +1,26 @@
+---
+toc: content
+order: 4
+group:
+  title: 控件组件
+  order: 2
+nav:
+  title: 组件
+  path: /components
+---
+
+# 全屏 - Fullscreen
+
+## 介绍
+
+全屏组件
+
+## 使用场景
+
+## 代码演示
+
+### 默认示例
+
+<code src="./demos/default.tsx" defaultShowCode></code>
+
+<API></API>

src/components/Control/FullscreenControl/index.tsx

@@ -0,0 +1,71 @@
+import type React from 'react';
+import { useMemo, useState } from 'react';
+import type { IFullscreenControlOption } from '@antv/l7';
+import { Fullscreen as L7Fullscreen } from '@antv/l7';
+import { useMount, useUnmount } from 'ahooks';
+import { omitBy } from 'lodash-es';
+import { getStyleText } from '../../../utils';
+import { useScene } from '../../LarkMap/hooks';
+import { useControlEvent, useControlUpdate } from '../hooks';
+import type { FullscreenControlProps } from './type';
+
+export const FullscreenControl: React.FC<FullscreenControlProps> = ({
+  onShow,
+  onHide,
+  onAdd,
+  onRemove,
+  fullscreenChange,
+  btnIcon,
+  btnText,
+  title,
+  vertical,
+  exitBtnIcon,
+  exitBtnText,
+  exitTitle,
+  position,
+  className,
+  style,
+}) => {
+  const scene = useScene();
+  const [control, setControl] = useState<L7Fullscreen | undefined>();
+  const styleText = useMemo(() => getStyleText(style), [style]);
+
+  // TODO:btnIcon 和 exitBtnIcon 从 ReactNode => Element 还没好
+  const controlOptions: Partial<IFullscreenControlOption> = useMemo(() => {
+    return {
+      btnText,
+      title,
+      vertical,
+      exitBtnText,
+      exitTitle,
+      position,
+      className,
+      style: styleText,
+    };
+  }, [btnText, title, vertical, exitBtnText, exitTitle, position, className, style]);
+
+  useMount(() => {
+    const fullscreen = new L7Fullscreen(omitBy(controlOptions, (value) => value === undefined));
+    setControl(fullscreen);
+    setTimeout(() => {
+      scene.addControl(fullscreen);
+    }, 0);
+  });
+
+  useUnmount(() => {
+    scene.removeControl(control);
+    setControl(control);
+  });
+
+  useControlUpdate(control, controlOptions);
+
+  useControlEvent(control, {
+    add: onAdd,
+    remove: onRemove,
+    show: onShow,
+    hide: onHide,
+    fullscreenChange: fullscreenChange,
+  });
+
+  return null;
+};

src/components/Control/FullscreenControl/type.ts

@@ -0,0 +1,14 @@
+import type { IFullscreenControlOption, Fullscreen } from '@antv/l7';
+import type { CSSProperties, ReactNode } from 'react';
+import type { IControlCallback } from '../../../types';
+
+/**
+ * 组件类型定义
+ */
+// @ts-ignore
+export interface FullscreenControlProps extends Partial<IFullscreenControlOption>, IControlCallback<Fullscreen> {
+  style?: CSSProperties;
+  btnIcon?: ReactNode;
+  exitBtnIcon?: ReactNode;
+  fullscreenChange?: (isFullscreen: boolean) => void;
+}

src/components/Control/ScaleControl/index.md

@@ -9,7 +9,7 @@ nav:
   path: /components
 ---
 
-# 比例尺 - ZoomControl
+# 比例尺 - ScaleControl
 
 ## 介绍
 

src/index.ts

@@ -30,6 +30,12 @@ export {
   GaodeLocationSearchParams,
 } from './components/LocationSearch/types';
 
+export { FullscreenControl, FullscreenControl as Fullscreen } from './components/Control/FullscreenControl';
+export {
+  FullscreenControlProps,
+  FullscreenControlProps as FullscreenProps,
+} from './components/Control/FullscreenControl/type';
+
 /**
  * 分析组件
  * */