diff --git a/src/components/AMapMap/AMapMap.tsx b/src/components/AMapMap/AMapMap.tsx index 1cfd4f9..9716f31 100644 --- 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>( zoom, features, mapStyle, + viewMode, }, ref) => { const { __AMAP__: AMap } = useAMapAPI(); @@ -45,7 +48,7 @@ const AMapMap = forwardRef>( } 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>( 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 index 9ad22b0..cfa6ea7 100644 --- a/src/components/AMapMap/__tests__/AMapMap.test.tsx +++ b/src/components/AMapMap/__tests__/AMapMap.test.tsx @@ -119,4 +119,18 @@ describe('AMapMap', () => { render(); 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(); + expect(AMap!.Map).toBeCalledWith($div, { viewMode: '3D' }); + + rerender(); + + 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 index 0dbd2d7..3650aff 100644 --- 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 index 4db24bc..c61fa28 100644 --- 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', +};