feat: 新增控件 zoom、scale (#10)

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",

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

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>

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

src/components/Scale/types.ts

@@ -0,0 +1,6 @@
+import type { IScaleControlOption } from '@antv/l7-component/es/control/scale';
+
+/**
+ * 组件类型定义
+ */
+export type ScaleProps = Partial<IScaleControlOption>

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" />;

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>
 

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

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>

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

src/components/Zoom/types.ts

@@ -0,0 +1,6 @@
+import type { IZoomControlOption } from '@antv/l7-component/es/control/zoom';
+
+/**
+ * 组件类型定义
+ */
+export type ZoomProps = Partial<IZoomControlOption>

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';
 /**
  * 版本号
  * */

src/version.ts

@@ -1 +1 @@
-export default '0.0.1-alpha.3';
+export default '0.0.1-alpha.4';