feat: 新增 LayerSwitch 支持传递 layer Id

antvis · Dec 28, 2023 · e00ff06 · e00ff06
1 parent c4f8bfe
commit e00ff06
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/components/Control/LayerSwitchControl/index.tsx b/src/components/Control/LayerSwitchControl/index.tsx
@@ -5,7 +5,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { getStyleText } from '../../../utils';
 import { useLayerList, useScene } from '../../LarkMap/hooks';
 import { useL7ComponentEvent, useL7ComponentPortal, useL7ComponentUpdate } from '../hooks';
-import type { LayerSwitchControlProps } from './types';
+import type { LayerSwitchControlProps, LayerSwitchItem } from './types';
 
 export const LayerSwitchControl: React.FC<LayerSwitchControlProps> = ({
   layers: layerItems,
@@ -40,9 +40,17 @@ export const LayerSwitchControl: React.FC<LayerSwitchControlProps> = ({
           .map((layerItem) => {
             if (typeof layerItem === 'string') {
               return fullLayerList.find((layer) => layer.id === layerItem);
-            } else {
+            }
+            // 当 layerItem 为 LayerSwitchItem 类型
+            if (!Object.prototype.hasOwnProperty.call(layerItem, 'isComposite')) {
+              const { layer } = layerItem as LayerSwitchItem;
+              if (typeof layer === 'string') {
+                const targetLayer = fullLayerList.find((item) => item.id === layer);
+                return targetLayer ? { ...layerItem, layer: targetLayer } : undefined;
+              }
               return layerItem;
             }
+            return layerItem;
           })
           .filter((layer) => !!layer)
       : fullLayerList;

diff --git a/src/components/Control/LayerSwitchControl/types.ts b/src/components/Control/LayerSwitchControl/types.ts
@@ -1,10 +1,17 @@
 import type { ILayerSwitchOption, LayerSwitch } from '@antv/l7';
 import type { CSSProperties, ReactNode } from 'react';
-import type { IPopperControlCallback } from '../../../types';
+import type { IPopperControlCallback, Layer } from '../../../types';
+
+export type LayerSwitchItem = {
+  layer: Layer | string;
+  name?: string;
+  img?: string;
+};
 
 export interface LayerSwitchControlProps
-  extends Omit<Partial<ILayerSwitchOption>, 'style' | 'btnIcon'>,
+  extends Omit<Partial<ILayerSwitchOption>, 'style' | 'btnIcon' | 'layers'>,
     IPopperControlCallback<LayerSwitch> {
+  layers: (Layer | string | LayerSwitchItem)[];
   style?: CSSProperties;
   btnIcon?: ReactNode;
   onSelectChange?: (value: string[]) => void;