From 2262565257cbebb27aa5c5ff6f018f16fcb367f8 Mon Sep 17 00:00:00 2001
From: RoXoM <xyy94813@sina.com>
Date: Sat, 28 Oct 2023 23:45:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(AMapMap):=20=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AMapMap/AMapMap.tsx              |  3 +++
 .../AMapMap/__tests__/AMapMap.test.tsx          |  6 ++++++
 src/components/AMapMap/interface.ts             |  1 +
 .../AMapMap/stories/AMapMap.stories.tsx         | 17 +++++++++++++++++
 4 files changed, 27 insertions(+)

diff --git a/src/components/AMapMap/AMapMap.tsx b/src/components/AMapMap/AMapMap.tsx
index 73a16d9..1cfd4f9 100644
--- 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
index 79100dd..9ad22b0 100644
--- 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
index fefaf84..0dbd2d7 100644
--- 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
index 29b28b8..4db24bc 100644
--- 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 = '自定义地图样式';