Feat/syb component (#67)

* fix: 修复 Popup 更新 DOM 问题 * fix: 修复 CustomControl style 部分属性丢失问题 * feat: 初步完成 ZoomControl 改造 * feat: 初步完成scale改造 * feat: 初步完成Fullscreen控件 * fix: 添加eslint * fix: 修改controlOptions依赖style项 * feat: 初步完成定位组件 * fix: 删除无用代码 * fix: 修改评论问题 * fix: 撤回代码 * feat: 初步完成导出图片和光标经纬度组件 * feat: 初步完成MapTheme和LayerControl两部分组件 * fix: 修改问题 * fix: 修改type类型 * feat: 添加控件文档 * fix: 文档事件名统一 Co-authored-by: yanxiong <oujinhui.ojh@antgroup.com> Co-authored-by: syb01094648 <syb01094648@antgroup.com>
antvis · Oct 18, 2022 · dbd63e4 · dbd63e4
1 parent e1598eb
commit dbd63e4
Show file tree

Hide file tree

Showing 35 changed files with 1,447 additions and 80 deletions.
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "geotiff": "1.0.0-beta.10",
     "@ant-design/icons": "^4.7.0",
     "@antv/dumi-theme-antv": "^0.2.2",
-    "@antv/l7": "2.9.37-alpha.1",
+    "@antv/l7": "^2.9.33",
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
     "@types/jest": "^26.0.24",
@@ -68,18 +68,18 @@
     "lint-staged": "^12.4.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.2",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0",
     "rimraf": "^3.0.2",
     "ts-jest": "^26.5.6",
     "typescript": "^4.6.4"
   },
   "peerDependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@antv/l7": "2.9.37-alpha.1",
+    "@antv/l7": "^2.9.33",
     "antd": "^4.22.3",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
   },
   "lint-staged": {
     "*.less": "stylelint --fix",

diff --git a/src/components/Control/ExportImageControl/demos/default.tsx b/src/components/Control/ExportImageControl/demos/default.tsx
@@ -0,0 +1,15 @@
+import { LarkMap, ExportImageControl } from '@antv/larkmap';
+import React from 'react';
+
+export default () => {
+  const onExport = (value: string) => {
+    console.log(value);
+  };
+  return (
+    <>
+      <LarkMap mapType="GaodeV1" style={{ height: '300px' }}>
+        <ExportImageControl position="topleft" onExport={onExport} />
+      </LarkMap>
+    </>
+  );
+};
diff --git a/src/components/Control/ExportImageControl/index.md b/src/components/Control/ExportImageControl/index.md
@@ -0,0 +1,87 @@
+---
+toc: content
+order: 6
+group:
+  title: 控件组件
+  order: 2
+nav:
+  title: 组件
+  path: /components
+---
+
+# 导出图片 - ExportImage
+
+## 介绍
+
+导出图片组件
+
+## 使用场景
+
+对当前地图部分进行截图并生成图片的 Base64 字符串。
+
+## 代码演示
+
+### 默认示例
+
+<code src="./demos/default.tsx" defaultShowCode compact></code>
+
+## 配置
+
+| 参数      | 说明                                             | 类型                       |
+| --------- | ------------------------------------------------ | -------------------------- |
+| imageType | 截图图片的格式                                   | `'png'｜'jpeg'`            |
+| onExpory  | 截图成功后，用于接收图片 Base64 字符串的回调函数 | `(base64: string) => void` |
+
+| 参数     | 说明                                                    | 类型                      |
+| -------- | ------------------------------------------------------- | ------------------------- |
+| btnIcon  | 按钮图标                                                | `HTMLElement｜SVGElement` |
+| btnText  | 按钮内容文本                                            | `string`                  |
+| title    | 按钮的 title 属性                                       | `string`                  |
+| vertical | 在 btnIcon 有值的情况下，按钮内的图标和文案是否纵向排列 | `boolean`                 |
+
+| 参数      | 说明                                                      | 类型       |
+| --------- | --------------------------------------------------------- | ---------- |
+| position  | 控件被添加到地图中的位置以及排列方式，详情可见 `控件插槽` | `Position` |
+| className | 自定义样式名                                              | `string`   |
+| style     | 自定义样式                                                | `string`   |
+
+### Position
+
+```js
+export type Position =
+  | 'topleft' // ↖ 左上角，纵向排列
+  | 'lefttop' // ↖ 左上角，横向排列
+  | 'topright' // ↗ 右上角，纵向排列
+  | 'righttop' // ↗ 右上角，横向排列
+  | 'bottomleft' // ↙ 左下角，纵向排列
+  | 'leftbottom' // ↙ 左下角，横向排列
+  | 'bottomright' // ↘ 右下角，纵向排列
+  | 'rightbottom' // ↘ 右下角，横向排列
+  | 'topcenter' // ↑ 上方中央，横向排列
+  | 'bottomcenter' // ↓ 下方中间，横向排列
+  | 'leftcenter' // ← 左边中间，纵向排列
+  | 'rightcenter'; // → 右边中间，纵向排列
+```
+
+## 方法
+
+| 参数     | 说明                     | 类型                     |
+| -------- | ------------------------ | ------------------------ |
+| getImage | 获取截图的 Base64 字符串 | ` () => Promise<string>` |
+
+| 参数         | 说明                                   | 类型                                   |
+| ------------ | -------------------------------------- | -------------------------------------- |
+| setOptions   | 更新配置，参数需要参考对应组件的`配置` | `(newOption: Partial<Option>) => void` |
+| getOptions   | 获取当前`配置`                         | `() => Option`                         |
+| show         | 显示组件                               | `() => void`                           |
+| hide         | 隐藏组件                               | `() => void`                           |
+| getContainer | 获取当前控件对应的 DOM 容器            | `() => HTMLElement`                    |
+
+## 事件
+
+| 参数     | 说明               | 类型             |
+| -------- | ------------------ | ---------------- |
+| onAdd    | 组件被添加时的事件 | `(this) => void` |
+| onRemove | 组件被移除时的事件 | `(this) => void` |
+| onShow   | 组件显示时的事件   | `(this) => void` |
+| onHide   | 组件隐藏时的事件   | `(this) => void` |
diff --git a/src/components/Control/ExportImageControl/index.tsx b/src/components/Control/ExportImageControl/index.tsx
@@ -0,0 +1,68 @@
+import React, { useMemo, useState } from 'react';
+import type { IExportImageControlOption } from '@antv/l7';
+import { useMount, useUnmount } from 'ahooks';
+import { omitBy } from 'lodash-es';
+import { ExportImage as L7ExportImage } from '@antv/l7';
+import { getStyleText } from '../../../utils';
+import { useScene } from '../../LarkMap/hooks';
+import { useControlElement, useControlEvent, useControlUpdate } from '../hooks';
+import type { ExportImageControlProps } from './types';
+
+export const ExportImageControl: React.FC<ExportImageControlProps> = ({
+  onExport,
+  onShow,
+  onHide,
+  onAdd,
+  onRemove,
+  imageType,
+  btnIcon,
+  btnText,
+  title,
+  vertical,
+  position,
+  className,
+  style,
+}) => {
+  const scene = useScene();
+  const [control, setControl] = useState<L7ExportImage | undefined>();
+  const styleText = useMemo(() => getStyleText(style), [style]);
+  const { portal: btnIconPortal, dom: btnIconDOM } = useControlElement(btnIcon);
+
+  const controlOptions: Partial<IExportImageControlOption> = useMemo(() => {
+    return {
+      btnText,
+      title,
+      vertical,
+      position,
+      className,
+      imageType,
+      style: styleText,
+      btnIcon: btnIconDOM,
+      onExport,
+    };
+  }, [btnText, title, vertical, position, className, styleText, imageType, onExport, btnIconDOM]);
+
+  useMount(() => {
+    const exportImage = new L7ExportImage(omitBy(controlOptions, (value) => value === undefined));
+    setControl(exportImage);
+    setTimeout(() => {
+      scene.addControl(exportImage);
+    }, 0);
+  });
+
+  useUnmount(() => {
+    scene.removeControl(control);
+    setControl(control);
+  });
+
+  useControlUpdate(control, controlOptions);
+
+  useControlEvent(control, {
+    add: onAdd,
+    remove: onRemove,
+    show: onShow,
+    hide: onHide,
+  });
+
+  return <>{btnIconPortal}</>;
+};
diff --git a/src/components/Control/ExportImageControl/types.ts b/src/components/Control/ExportImageControl/types.ts
@@ -0,0 +1,12 @@
+import type { IExportImageControlOption, ExportImage } from '@antv/l7';
+import type { CSSProperties, ReactNode } from 'react';
+import type { IControlCallback } from '../../../types';
+
+/**
+ * 组件类型定义
+ */
+// @ts-ignore
+export interface ExportImageControlProps extends Partial<IExportImageControlOption>, IControlCallback<ExportImage> {
+  style?: CSSProperties;
+  btnIcon?: ReactNode;
+}
diff --git a/src/components/Control/FullscreenControl/demos/default.tsx b/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>
+    </>
+  );
+};
diff --git a/src/components/Control/FullscreenControl/index.md b/src/components/Control/FullscreenControl/index.md
@@ -0,0 +1,92 @@
+---
+toc: content
+order: 4
+group:
+  title: 控件组件
+  order: 2
+nav:
+  title: 组件
+  path: /components
+---
+
+# 全屏 - Fullscreen
+
+## 介绍
+
+全屏组件
+
+## 使用场景
+
+用于控制地图区域的全屏和退出全屏的控制按钮控件。
+
+## 代码演示
+
+### 默认示例
+
+<code src="./demos/default.tsx" defaultShowCode compact></code>
+
+## 配置
+
+| 参数     | 说明                                                    | 类型                      |
+| -------- | ------------------------------------------------------- | ------------------------- |
+| btnIcon  | 按钮图标                                                | `HTMLElement｜SVGElement` |
+| btnText  | 按钮内容文本                                            | `string`                  |
+| title    | 按钮的 title 属性                                       | `string`                  |
+| vertical | 在 btnIcon 有值的情况下，按钮内的图标和文案是否纵向排列 | `boolean`                 |
+
+| 参数        | 说明                              | 类型                      |
+| ----------- | --------------------------------- | ------------------------- |
+| exitBtnIcon | 退出全屏按钮的图标                | `HTMLElement｜SVGElement` |
+| exitBtnText | 退出全屏按钮的文本                | `string`                  |
+| exitTitle   | 退出全屏按钮的文本的 `title` 属性 | `string`                  |
+
+| 参数      | 说明                                                      | 类型       |
+| --------- | --------------------------------------------------------- | ---------- |
+| position  | 控件被添加到地图中的位置以及排列方式，详情可见 `控件插槽` | `Position` |
+| className | 自定义样式名                                              | `string`   |
+| style     | 自定义样式                                                | `string`   |
+
+### Position
+
+```js
+export type Position =
+  | 'topleft' // ↖ 左上角，纵向排列
+  | 'lefttop' // ↖ 左上角，横向排列
+  | 'topright' // ↗ 右上角，纵向排列
+  | 'righttop' // ↗ 右上角，横向排列
+  | 'bottomleft' // ↙ 左下角，纵向排列
+  | 'leftbottom' // ↙ 左下角，横向排列
+  | 'bottomright' // ↘ 右下角，纵向排列
+  | 'rightbottom' // ↘ 右下角，横向排列
+  | 'topcenter' // ↑ 上方中央，横向排列
+  | 'bottomcenter' // ↓ 下方中间，横向排列
+  | 'leftcenter' // ← 左边中间，纵向排列
+  | 'rightcenter'; // → 右边中间，纵向排列
+```
+
+## 方法
+
+| 参数             | 说明                            | 类型         |
+| ---------------- | ------------------------------- | ------------ |
+| toggleFullscreen | 进入/退出全屏地图部分的全屏状态 | `() => void` |
+
+| 参数         | 说明                                   | 类型                                   |
+| ------------ | -------------------------------------- | -------------------------------------- |
+| setOptions   | 更新配置，参数需要参考对应组件的`配置` | `(newOption: Partial<Option>) => void` |
+| getOptions   | 获取当前`配置`                         | `() => Option`                         |
+| show         | 显示组件                               | `() => void`                           |
+| hide         | 隐藏组件                               | `() => void`                           |
+| getContainer | 获取当前控件对应的 DOM 容器            | `() => HTMLElement`                    |
+
+## 事件
+
+| 参数               | 说明                     | 类型                              |
+| ------------------ | ------------------------ | --------------------------------- |
+| onFullscreenChange | 当全屏状态发生变化时触发 | `(isFullscreen: boolean) => void` |
+
+| 参数     | 说明               | 类型             |
+| -------- | ------------------ | ---------------- |
+| onAdd    | 组件被添加时的事件 | `(this) => void` |
+| onRemove | 组件被移除时的事件 | `(this) => void` |
+| onShow   | 组件显示时的事件   | `(this) => void` |
+| onHide   | 组件隐藏时的事件   | `(this) => void` |