feat(AMapMap): 3D 视图下支持设置俯仰角度

xyy94813 · Nov 11, 2023 · de4c4da · de4c4da
1 parent c878854
commit de4c4da
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/src/components/AMapMap/AMapMap.tsx b/src/components/AMapMap/AMapMap.tsx
@@ -34,6 +34,7 @@ const AMapMap = forwardRef<any, PropsWithChildren<AMapMapProps>>(
     features,
     mapStyle,
     viewMode,
+    pitch,
   }, ref) => {
     const { __AMAP__: AMap } = useAMapAPI();
 
@@ -123,6 +124,7 @@ const AMapMap = forwardRef<any, PropsWithChildren<AMapMapProps>>(
     }, [center, curMap]);
 
     useSetter<Parameters<AMap.Map['setFeatures']>>(curMap, 'setFeatures', features!);
+    useSetter<Parameters<AMap.Map['setPitch']>>(curMap, 'setPitch', pitch!);
 
     return (
       <div style={CONTAINER_STYLE} ref={$mapContainer}>

diff --git a/src/components/AMapMap/__tests__/AMapMap.test.tsx b/src/components/AMapMap/__tests__/AMapMap.test.tsx
@@ -15,6 +15,7 @@ const mockMapInstance = {
   setCenter: jest.fn(),
   setFeatures: jest.fn(),
   setMapStyle: jest.fn(),
+  setPitch: jest.fn(),
   on: jest.fn(),
 };
 
@@ -120,13 +121,14 @@ describe('AMapMap', () => {
     expect(mockMapInstance.setMapStyle).toBeCalledWith('amap://styles/grey');
   });
 
-  test('sets view mode to 3D', () => {
+  test('sets view mode and pitch', () => {
     const { __AMAP__: AMap } = useAMapAPI();
     const $div = document.createElement('div');
     $div.setAttribute('style', 'width: 100%; height: 100%;');
 
-    const { rerender } = render(<AMapMap viewMode="3D" />);
+    const { rerender } = render(<AMapMap viewMode="3D" pitch={60} />);
     expect(AMap!.Map).toBeCalledWith($div, { viewMode: '3D' });
+    expect(mockMapInstance.setPitch).toBeCalledWith(60);
 
     rerender(<AMapMap />);
 

diff --git a/src/components/AMapMap/interface.ts b/src/components/AMapMap/interface.ts
@@ -7,4 +7,5 @@ export type AMapMapProps = {
   features?: AMap.MapOptions['features'];
   mapStyle?: AMap.MapOptions['mapStyle'];
   viewMode?: AMap.MapOptions['viewMode'];
+  pitch?: AMap.MapOptions['pitch'];
 };
diff --git a/src/components/AMapMap/stories/AMapMap.stories.tsx b/src/components/AMapMap/stories/AMapMap.stories.tsx
@@ -79,6 +79,19 @@ export default {
       },
       control: 'text',
     },
+    pitch: {
+      description: '俯仰角度，值范围：0-90。2D地图下无效 。',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+      },
+      control: {
+        type: 'number',
+        min: 0,
+        max: 90,
+        step: 15,
+      },
+    },
   },
 } as Meta;
 
@@ -118,4 +131,6 @@ export const ViewModeIs3D: typeof Template = Template.bind({});
 ViewModeIs3D.storyName = '3D 模式';
 ViewModeIs3D.args = {
   viewMode: '3D',
+  pitch: 75,
+  zoom: 18,
 };