From 0201e5d76124e5c2f5264cea078a745337030a95 Mon Sep 17 00:00:00 2001
From: lvisei <yunji.me@outlook.com>
Date: Wed, 15 Jun 2022 16:34:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=8E=A7=E4=BB=B6=20?=
 =?UTF-8?q?zoom=E3=80=81scale=20(#10)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                              |  2 +-
 src/components/Scale/demos/default.tsx    | 10 ++++++
 src/components/Scale/index.md             | 25 +++++++++++++++
 src/components/Scale/index.tsx            | 38 +++++++++++++++++++++++
 src/components/Scale/types.ts             |  6 ++++
 src/components/Template/demos/default.tsx |  4 +++
 src/components/Template/index.md          |  7 +----
 src/components/Zoom/demos/default.tsx     | 10 ++++++
 src/components/Zoom/index.md              | 25 +++++++++++++++
 src/components/Zoom/index.tsx             | 38 +++++++++++++++++++++++
 src/components/Zoom/types.ts              |  6 ++++
 src/index.ts                              |  4 +++
 src/version.ts                            |  2 +-
 13 files changed, 169 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Scale/demos/default.tsx
 create mode 100644 src/components/Scale/index.md
 create mode 100644 src/components/Scale/index.tsx
 create mode 100644 src/components/Scale/types.ts
 create mode 100644 src/components/Template/demos/default.tsx
 create mode 100644 src/components/Zoom/demos/default.tsx
 create mode 100644 src/components/Zoom/index.md
 create mode 100644 src/components/Zoom/index.tsx
 create mode 100644 src/components/Zoom/types.ts

diff --git a/package.json b/package.json
index 3ebb27e9..a548fc92 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/larkmap",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.4",
   "description": "A React toolkit for geospatial visualization based on L7",
   "license": "MIT",
   "main": "lib/index.js",
diff --git a/src/components/Scale/demos/default.tsx b/src/components/Scale/demos/default.tsx
new file mode 100644
index 00000000..40c7db42
--- /dev/null
+++ b/src/components/Scale/demos/default.tsx
@@ -0,0 +1,10 @@
+import { LarkMap, Scale } from '@antv/larkmap';
+import React from 'react';
+
+export default () => {
+  return (
+    <LarkMap mapType="GaodeV1" style={{ height: '300px' }}>
+      <Scale position="bottomleft" />
+    </LarkMap>
+  );
+};
diff --git a/src/components/Scale/index.md b/src/components/Scale/index.md
new file mode 100644
index 00000000..2fc67bbe
--- /dev/null
+++ b/src/components/Scale/index.md
@@ -0,0 +1,25 @@
+---
+toc: content
+group:
+  title: 控件组件
+  order: 2
+nav:
+  title: 组件
+  path: /components
+---
+
+# 比例尺 - Scale
+
+## 介绍
+
+地图比例尺组件
+
+## 使用场景
+
+## 代码演示
+
+### 默认示例
+
+<code src="./demos/default.tsx" defaultShowCode></code>
+
+<API></API>
diff --git a/src/components/Scale/index.tsx b/src/components/Scale/index.tsx
new file mode 100644
index 00000000..11dc14fb
--- /dev/null
+++ b/src/components/Scale/index.tsx
@@ -0,0 +1,38 @@
+import { Scale as L7Scale } from '@antv/l7';
+import { useUpdateEffect } from 'ahooks';
+import type React from 'react';
+import { useEffect, useRef } from 'react';
+import { useScene } from '../LarkMap/hooks/use-scene';
+import type { ScaleProps } from './types';
+
+export type { ScaleProps };
+
+export const Scale: React.FC<ScaleProps> = (props) => {
+  const scene = useScene();
+  const scaleRef = useRef<L7Scale>();
+  const { position } = props;
+
+  useEffect(() => {
+    const scale = new L7Scale({
+      ...props,
+    });
+    scaleRef.current = scale;
+    scene.addControl(scale);
+    return () => {
+      scaleRef.current = undefined;
+      scene.removeControl(scale);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useUpdateEffect(() => {
+    if (scaleRef.current) {
+      //@ts-ignore
+      scaleRef.current.setPosition(position);
+    }
+  }, [position]);
+
+  return null;
+};
+
+Scale.defaultProps = { position: 'bottomleft' };
diff --git a/src/components/Scale/types.ts b/src/components/Scale/types.ts
new file mode 100644
index 00000000..fed9c171
--- /dev/null
+++ b/src/components/Scale/types.ts
@@ -0,0 +1,6 @@
+import type { IScaleControlOption } from '@antv/l7-component/es/control/scale';
+
+/**
+ * 组件类型定义
+ */
+export type ScaleProps = Partial<IScaleControlOption>
diff --git a/src/components/Template/demos/default.tsx b/src/components/Template/demos/default.tsx
new file mode 100644
index 00000000..e43ffd28
--- /dev/null
+++ b/src/components/Template/demos/default.tsx
@@ -0,0 +1,4 @@
+import { Template } from '@antv/larkmap';
+import React from 'react';
+
+export default () => <Template title="First Demo" />;
diff --git a/src/components/Template/index.md b/src/components/Template/index.md
index 947b81e1..906d2914 100644
--- a/src/components/Template/index.md
+++ b/src/components/Template/index.md
@@ -18,12 +18,7 @@ nav:
 
 ### 默认示例
 
-```tsx
-import { Template } from '@antv/larkmap';
-import React from 'react';
-
-export default () => <Template title="First Demo" />;
-```
+<code src="./demos/default.tsx" defaultShowCode></code>
 
 <API></API>
 
diff --git a/src/components/Zoom/demos/default.tsx b/src/components/Zoom/demos/default.tsx
new file mode 100644
index 00000000..dd8cd4ef
--- /dev/null
+++ b/src/components/Zoom/demos/default.tsx
@@ -0,0 +1,10 @@
+import { LarkMap, Zoom } from '@antv/larkmap';
+import React from 'react';
+
+export default () => {
+  return (
+    <LarkMap mapType="GaodeV1" style={{ height: '300px' }}>
+      <Zoom position="bottomright" />
+    </LarkMap>
+  );
+};
diff --git a/src/components/Zoom/index.md b/src/components/Zoom/index.md
new file mode 100644
index 00000000..47b428b5
--- /dev/null
+++ b/src/components/Zoom/index.md
@@ -0,0 +1,25 @@
+---
+toc: content
+group:
+  title: 控件组件
+  order: 2
+nav:
+  title: 组件
+  path: /components
+---
+
+# 缩放器 - Zoom
+
+## 介绍
+
+地图缩放器组件
+
+## 使用场景
+
+## 代码演示
+
+### 默认示例
+
+<code src="./demos/default.tsx" defaultShowCode></code>
+
+<API></API>
diff --git a/src/components/Zoom/index.tsx b/src/components/Zoom/index.tsx
new file mode 100644
index 00000000..dd763552
--- /dev/null
+++ b/src/components/Zoom/index.tsx
@@ -0,0 +1,38 @@
+import { Zoom as L7Zoom } from '@antv/l7';
+import { useUpdateEffect } from 'ahooks';
+import type React from 'react';
+import { useEffect, useRef } from 'react';
+import { useScene } from '../LarkMap/hooks/use-scene';
+import type { ZoomProps } from './types';
+
+export type { ZoomProps };
+
+export const Zoom: React.FC<ZoomProps> = (props) => {
+  const scene = useScene();
+  const zoomRef = useRef<L7Zoom>();
+  const { position } = props;
+
+  useEffect(() => {
+    const zoom = new L7Zoom({
+      ...props,
+    });
+    zoomRef.current = zoom;
+    scene.addControl(zoom);
+    return () => {
+      zoomRef.current = undefined;
+      scene.removeControl(zoom);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useUpdateEffect(() => {
+    if (zoomRef.current) {
+      //@ts-ignore
+      zoomRef.current.setPosition(position);
+    }
+  }, [position]);
+
+  return null;
+};
+
+Zoom.defaultProps = { position: 'bottomright' };
diff --git a/src/components/Zoom/types.ts b/src/components/Zoom/types.ts
new file mode 100644
index 00000000..f60514bf
--- /dev/null
+++ b/src/components/Zoom/types.ts
@@ -0,0 +1,6 @@
+import type { IZoomControlOption } from '@antv/l7-component/es/control/zoom';
+
+/**
+ * 组件类型定义
+ */
+export type ZoomProps = Partial<IZoomControlOption>
diff --git a/src/index.ts b/src/index.ts
index c899359b..faf503db 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -13,11 +13,15 @@ export { LarkMapProps } from './components/LarkMap/types';
  * 图层组件
  */
 export * from './components/Layers';
+export { Scale } from './components/Scale';
+export { ScaleProps } from './components/Scale/types';
 /**
  * 分析组件
  * */
 export { Template } from './components/Template';
 export { TemplateProps } from './components/Template/types';
+export { Zoom } from './components/Zoom';
+export { ZoomProps } from './components/Zoom/types';
 /**
  * 版本号
  * */
diff --git a/src/version.ts b/src/version.ts
index 547d04a1..4723f890 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1 +1 @@
-export default '0.0.1-alpha.3';
+export default '0.0.1-alpha.4';