feat(AMapMap): 支持设置 3D 视图

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

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/src/components/AMapMap/AMapMap.tsx b/src/components/AMapMap/AMapMap.tsx
@@ -18,6 +18,8 @@ import AMapMapContext from './AMapMapContext';
 const CONTAINER_STYLE = { width: '100%', height: '100%' };
 
 const defaultProps = {
+  // eslint-disable-next-line react/default-props-match-prop-types
+  viewMode: '2D',
   // eslint-disable-next-line react/default-props-match-prop-types
   features: ['bg', 'point', 'road', 'building'],
 };
@@ -31,6 +33,7 @@ const AMapMap = forwardRef<any, PropsWithChildren<AMapMapProps>>(
     zoom,
     features,
     mapStyle,
+    viewMode,
   }, ref) => {
     const { __AMAP__: AMap } = useAMapAPI();
 
@@ -45,7 +48,7 @@ const AMapMap = forwardRef<any, PropsWithChildren<AMapMapProps>>(
       }
 
       const initMap = () => {
-        const newInstance = new AMap.Map($mapContainer.current!);
+        const newInstance = new AMap.Map($mapContainer.current!, { viewMode });
 
         // 使用代理调整 map 实例的实现
         // 添加和删除时，发布事件通知
@@ -92,7 +95,7 @@ const AMapMap = forwardRef<any, PropsWithChildren<AMapMapProps>>(
       initMap();
 
       return clearEffect;
-    }, [AMap]);
+    }, [AMap, viewMode]);
 
     useImperativeHandle(ref, () => curMap, [curMap]);
 

diff --git a/src/components/AMapMap/__tests__/AMapMap.test.tsx b/src/components/AMapMap/__tests__/AMapMap.test.tsx
@@ -119,4 +119,18 @@ describe('AMapMap', () => {
     render(<AMapMap mapStyle="amap://styles/grey" />);
     expect(mockMapInstance.setMapStyle).toBeCalledWith('amap://styles/grey');
   });
+
+  test('sets view mode to 3D', () => {
+    const { __AMAP__: AMap } = useAMapAPI();
+    const $div = document.createElement('div');
+    $div.setAttribute('style', 'width: 100%; height: 100%;');
+
+    const { rerender } = render(<AMapMap viewMode="3D" />);
+    expect(AMap!.Map).toBeCalledWith($div, { viewMode: '3D' });
+
+    rerender(<AMapMap />);
+
+    expect(mockMapInstance.destroy).toBeCalledTimes(1); // 销毁，并重新创建实例
+    expect(AMap!.Map).toBeCalledWith($div, { viewMode: '2D' });
+  });
 });
diff --git a/src/components/AMapMap/interface.ts b/src/components/AMapMap/interface.ts
@@ -6,4 +6,5 @@ export type AMapMapProps = {
   zoom?: number;
   features?: AMap.MapOptions['features'];
   mapStyle?: AMap.MapOptions['mapStyle'];
+  viewMode?: AMap.MapOptions['viewMode'];
 };
diff --git a/src/components/AMapMap/stories/AMapMap.stories.tsx b/src/components/AMapMap/stories/AMapMap.stories.tsx
@@ -19,6 +19,17 @@ export default {
     features: ['bg', 'point', 'road', 'building'],
   },
   argTypes: {
+    viewMode: {
+      description: '地图视图模式。注意，切换地图模式会创建新的地图实例，同时销毁原有地图实例。',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '2D' },
+      },
+      control: {
+        type: 'select',
+        options: ['2D', '3D'],
+      },
+    },
     center: {
       description: '中心经纬度',
       table: {
@@ -102,3 +113,9 @@ setMapStyle.args = {
   mapStyle: 'amap://styles/grey',
 };
 setMapStyle.storyName = '自定义地图样式';
+
+export const ViewModeIs3D: typeof Template = Template.bind({});
+ViewModeIs3D.storyName = '3D 模式';
+ViewModeIs3D.args = {
+  viewMode: '3D',
+};