feat(AMapMap): 自定义地图样式

xyy94813 · Nov 8, 2023 · 2262565 · 2262565
1 parent 32e87ad
commit 2262565
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 0 deletions.
diff --git a/src/components/AMapMap/AMapMap.tsx b/src/components/AMapMap/AMapMap.tsx
@@ -30,6 +30,7 @@ const AMapMap = forwardRef<any, PropsWithChildren<AMapMapProps>>(
     cityName,
     zoom,
     features,
+    mapStyle,
   }, ref) => {
     const { __AMAP__: AMap } = useAMapAPI();
 
@@ -95,6 +96,8 @@ const AMapMap = forwardRef<any, PropsWithChildren<AMapMapProps>>(
 
     useImperativeHandle(ref, () => curMap, [curMap]);
 
+    useSetter<Parameters<AMap.Map['setMapStyle']>>(curMap, 'setMapStyle', mapStyle!);
+
     // set city
     useEffect(() => {
       if (cityName) {

diff --git a/src/components/AMapMap/__tests__/AMapMap.test.tsx b/src/components/AMapMap/__tests__/AMapMap.test.tsx
@@ -14,6 +14,7 @@ const mockMapInstance = {
   setZoom: jest.fn(),
   setCenter: jest.fn(),
   setFeatures: jest.fn(),
+  setMapStyle: jest.fn(),
   on: jest.fn(),
 };
 
@@ -113,4 +114,9 @@ describe('AMapMap', () => {
     render(<AMapMap features={customFeatures} />);
     expect(mockMapInstance.setFeatures).toBeCalledWith(customFeatures);
   });
+
+  test('sets custom map style', () => {
+    render(<AMapMap mapStyle="amap://styles/grey" />);
+    expect(mockMapInstance.setMapStyle).toBeCalledWith('amap://styles/grey');
+  });
 });
diff --git a/src/components/AMapMap/interface.ts b/src/components/AMapMap/interface.ts
@@ -5,4 +5,5 @@ export type AMapMapProps = {
   cityName?: string;
   zoom?: number;
   features?: AMap.MapOptions['features'];
+  mapStyle?: AMap.MapOptions['mapStyle'];
 };
diff --git a/src/components/AMapMap/stories/AMapMap.stories.tsx b/src/components/AMapMap/stories/AMapMap.stories.tsx
@@ -57,6 +57,17 @@ export default {
         },
       },
     },
+    mapStyle: {
+      description: [
+        '设置地图样式：',
+        '官方样式模版，如 "amap://styles/grey"',
+        '地图自定义平台定制地图样式，如 "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"',
+      ].join('<br/>'),
+      table: {
+        type: { summary: 'string' },
+      },
+      control: 'text',
+    },
   },
 } as Meta;
 
@@ -85,3 +96,9 @@ SetFeatures.args = {
   features: ['bg', 'point'],
 };
 SetFeatures.storyName = '设置地图上显示的元素种类';
+
+export const setMapStyle: typeof Template = Template.bind({});
+setMapStyle.args = {
+  mapStyle: 'amap://styles/grey',
+};
+setMapStyle.storyName = '自定义地图样式';