mirror of https://gitee.com/antv-l7/antv-l7
refactor: 1.控件 LayerControl => LayerSwitch,防止在 LarkMap 中控件命名概念混淆 2.LayerSwitch 的参数 layers 新增支持传递 layer 的 id 数组 (#1411)
Co-authored-by: yanxiong <oujinhui.ojh@antgroup.com>
This commit is contained in:
parent
87fa3af216
commit
5c1f29bbba
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: 图层控制
|
||||
order: 13
|
||||
---
|
||||
|
||||
<code src="./layerControl.tsx" compact defaultShowCode></code>
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: 图层控制
|
||||
order: 13
|
||||
---
|
||||
|
||||
<code src="./layerSwitch.tsx" compact defaultShowCode></code>
|
|
@ -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);
|
|
@ -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);
|
||||
});
|
||||
});
|
|
@ -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);
|
||||
});
|
||||
});
|
|
@ -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 {
|
||||
layers: ILayer[];
|
||||
export interface ILayerSwitchOption extends ISelectControlOption {
|
||||
layers: Array<ILayer | string>;
|
||||
}
|
||||
|
||||
export { LayerControl };
|
||||
export { LayerSwitch };
|
||||
|
||||
export default class LayerControl extends SelectControl<ILayerControlOption> {
|
||||
protected get layers() {
|
||||
return this.controlOption.layers || this.layerService.getLayers() || [];
|
||||
export default class LayerSwitch extends SelectControl<ILayerSwitchOption> {
|
||||
protected get layers(): ILayer[] {
|
||||
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(
|
||||
option?: Partial<ILayerControlOption>,
|
||||
): ILayerControlOption {
|
||||
public getDefault(option?: Partial<ILayerSwitchOption>): ILayerSwitchOption {
|
||||
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();
|
|
@ -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';
|
||||
|
|
|
@ -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`
|
||||
|
|
@ -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);
|
||||
});
|
|
@ -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();
|
||||
scene.addControl(layerControl);
|
||||
const mapTheme = new MapTheme();
|
||||
scene.addControl(mapTheme);
|
||||
});
|
||||
|
|
|
@ -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 图层显隐控制",
|
||||
"en": "LayerControl"
|
||||
"zh": "LayerSwitch 图层显隐控制",
|
||||
"en": "LayerSwitch"
|
||||
},
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*gWO_T6xpVtwAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue