refactor: 1.控件 LayerControl => LayerSwitch，防止在 LarkMap 中控件命名概念混淆 2.LayerSwitch 的参数 layers 新增支持传递 layer 的 id 数组 (#1411)

Co-authored-by: yanxiong <oujinhui.ojh@antgroup.com>

dev-demos/layer/control/layerControl.md

@@ -1,6 +0,0 @@
----
-title: 图层控制
-order: 13
----
-
-<code src="./layerControl.tsx" compact defaultShowCode></code>

dev-demos/layer/control/layerSwitch.md

@@ -0,0 +1,6 @@
+---
+title: 图层控制
+order: 13
+---
+
+<code src="./layerSwitch.tsx" compact defaultShowCode></code>

dev-demos/layer/control/layerSwitch.tsx

@@ -1,7 +1,7 @@
 import {
   GaodeMapV2,
   Scene,
-  LayerControl,
+  LayerSwitch,
   ILayer,
   PointLayer,
   LineLayer,
@@ -15,7 +15,7 @@ const Demo: FunctionComponent = () => {
   const [layers, setLayers] = useState<ILayer[]>([]);
   const [scene, setScene] = useState<Scene | undefined>();
   const [newLayer, setNewLayer] = useState<ILayer | null>(null);
-  const [control, setControl] = useState<LayerControl | null>(null);
+  const [control, setControl] = useState<LayerSwitch | null>(null);
 
   useEffect(() => {
     const newScene = new Scene({
@@ -96,7 +96,7 @@ const Demo: FunctionComponent = () => {
             newLayers.push(chinaPolygonLayer, layer2);
           }),
       ]).then(() => {
-        const newControl = new LayerControl({
+        const newControl = new LayerSwitch({
           layers: newLayers,
         });
         setControl(newControl);

packages/component/__tests__/layerControl.spec.ts

@@ -1,19 +0,0 @@
-import { TestScene } from '@antv/l7-test-utils';
-import LayerControl from '../src/control/layerControl';
-
-describe('layerControl', () => {
-  const scene = TestScene();
-
-  it('life cycle', () => {
-    const layerControl = new LayerControl();
-    scene.addControl(layerControl);
-
-    const container = layerControl.getContainer();
-    expect(container.parentElement).toBeInstanceOf(HTMLElement);
-
-    expect(layerControl.getLayerVisible()).toEqual([]);
-
-    scene.removeControl(layerControl);
-    expect(container.parentElement).not.toBeInstanceOf(HTMLElement);
-  });
-});

packages/component/__tests__/layerSwitch.spec.ts

@@ -0,0 +1,19 @@
+import { TestScene } from '@antv/l7-test-utils';
+import LayerSwitch from '../src/control/layerSwitch';
+
+describe('layerSwitch', () => {
+  const scene = TestScene();
+
+  it('life cycle', () => {
+    const layerSwitch = new LayerSwitch();
+    scene.addControl(layerSwitch);
+
+    const container = layerSwitch.getContainer();
+    expect(container.parentElement).toBeInstanceOf(HTMLElement);
+
+    expect(layerSwitch.getLayerVisible()).toEqual([]);
+
+    scene.removeControl(layerSwitch);
+    expect(container.parentElement).not.toBeInstanceOf(HTMLElement);
+  });
+});

packages/component/src/control/layerSwitch.ts

@@ -1,24 +1,41 @@
 import { ILayer } from '@antv/l7-core';
+import { BaseLayer } from '@antv/l7-layers';
 import { createL7Icon } from '../utils/icon';
 import SelectControl, {
-  ISelectControlOption,
   ControlOptionItem,
+  ISelectControlOption,
 } from './baseControl/selectControl';
 
-export interface ILayerControlOption extends ISelectControlOption {
+export interface ILayerSwitchOption extends ISelectControlOption {
-  layers: ILayer[];
+  layers: Array<ILayer | string>;
 }
 
-export { LayerControl };
+export { LayerSwitch };
 
-export default class LayerControl extends SelectControl<ILayerControlOption> {
+export default class LayerSwitch extends SelectControl<ILayerSwitchOption> {
-  protected get layers() {
+  protected get layers(): ILayer[] {
-    return this.controlOption.layers || this.layerService.getLayers() || [];
+    const layerService = this.layerService;
+    const { layers } = this.controlOption;
+    if (Array.isArray(layers) && layers.length) {
+      const layerInstances: ILayer[] = [];
+      layers.forEach((layer) => {
+        if (layer instanceof BaseLayer) {
+          layerInstances.push(layer);
+        }
+        if (typeof layer === 'string') {
+          const targetLayer =
+            layerService.getLayer(layer) || layerService.getLayerByName(layer);
+          if (targetLayer) {
+            layerInstances.push(targetLayer);
+          }
+        }
+      });
+      return layerInstances;
+    }
+    return layerService.getLayers() || [];
   }
 
-  public getDefault(
+  public getDefault(option?: Partial<ILayerSwitchOption>): ILayerSwitchOption {
-    option?: Partial<ILayerControlOption>,
-  ): ILayerControlOption {
     return {
       ...super.getDefault(option),
       title: '图层控制',
@@ -46,7 +63,7 @@ export default class LayerControl extends SelectControl<ILayerControlOption> {
     });
   }
 
-  public setOptions(option: Partial<ILayerControlOption>) {
+  public setOptions(option: Partial<ILayerSwitchOption>) {
     const isLayerChange = this.checkUpdateOption(option, ['layers']);
     if (isLayerChange) {
       this.unbindLayerVisibleCallback();

packages/component/src/index.ts

@@ -11,7 +11,7 @@ export * from './control/fullscreen';
 export * from './control/exportImage';
 export * from './control/geoLocate';
 export * from './control/mapTheme';
-export * from './control/layerControl';
+export * from './control/layerSwitch';
 export * from './control/mouseLocation';
 export * from './control/zoom';
 export * from './control/scale';

packages/site/docs/api/component/control/layerSwitch.zh.md

@@ -1,5 +1,5 @@
 ---
-title: LayerControl 图层显隐
+title: LayerSwitch 图层显隐
 order: 8
 ---
 
@@ -13,10 +13,10 @@ order: 8
 
 ## 使用
 
-[示例](/zh/examples/component/control#layercontrol)
+[示例](/zh/examples/component/control#layerSwitch)
 
 ```ts
-import { Scene, LayerControl } from '@antv/l7';
+import { Scene, LayerSwitch } from '@antv/l7';
 
 const scene = new Scene({
   // ...
@@ -28,18 +28,18 @@ scene.on('loaded', () => {
   });
   scene.addLayer(layer);
 
-  const layerControl = new LayerControl({
+  const layerSwitch = new LayerSwitch({
     layers: [layer],
   });
-  scene.addControl(layerControl);
+  scene.addControl(layerSwitch);
 });
 ```
 
 ## 配置
 
-| 名称   | 说明                                                          | 类型            |
+| 名称   | 说明                                                                                       | 类型                   |
-| ------ | ------------------------------------------------------------- | --------------- |
+| ------ | ------------------------------------------------------------------------------------------ | ---------------------- |
-| layers | 需要被控制的 `layer` 数组，不传则默认读取当前 L7 中所有的图层 | `Array<ILayer>` |
+| layers | 需要被控制的 `layer` 数组，支持传入图层示例或者图层 id，不传则默认读取当前 L7 中所有的图层 | `Array<ILayer|string>` |
 
 `markdown:docs/common/control/popper-api.md`
 

packages/site/examples/component/control/demo/layerSwitch.ts

@@ -2,7 +2,7 @@ import {
   Scene,
   GaodeMapV2,
   PolygonLayer,
-  LayerControl,
+  LayerSwitch,
   LineLayer,
 } from '@antv/l7';
 
@@ -76,8 +76,8 @@ scene.on('loaded', () => {
     .size(2);
   scene.addLayer(lineLayer);
 
-  const layerControl = new LayerControl({
+  const layerSwitch = new LayerSwitch({
     layers: [polygonLayer, lineLayer],
   });
-  scene.addControl(layerControl);
+  scene.addControl(layerSwitch);
 });

packages/site/examples/component/control/demo/mapTheme.ts

@@ -1,4 +1,4 @@
-import { Scene, GaodeMapV2, LayerControl, MapTheme } from '@antv/l7';
+import { Scene, GaodeMapV2, MapTheme } from '@antv/l7';
 
 const scene = new Scene({
   id: 'map',
@@ -10,6 +10,6 @@ const scene = new Scene({
   }),
 });
 scene.on('loaded', () => {
-  const layerControl = new MapTheme();
+  const mapTheme = new MapTheme();
-  scene.addControl(layerControl);
+  scene.addControl(mapTheme);
 });

packages/site/examples/component/control/demo/meta.json

@@ -61,10 +61,10 @@
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*sJF1S4JaPx8AAAAAAAAAAAAAARQnAQ"
     },
     {
-      "filename": "layerControl.ts",
+      "filename": "layerSwitch.ts",
       "title": {
-        "zh": "LayerControl 图层显隐控制",
+        "zh": "LayerSwitch 图层显隐控制",
-        "en": "LayerControl"
+        "en": "LayerSwitch"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*gWO_T6xpVtwAAAAAAAAAAAAAARQnAQ"
     },

packages/site/examples/component/control/demo/mouseLocation.ts

@@ -1,4 +1,4 @@
-import { Scene, GaodeMapV2, LayerControl, MouseLocation } from '@antv/l7';
+import { Scene, GaodeMapV2, MouseLocation } from '@antv/l7';
 
 const scene = new Scene({
   id: 'map',