@antv/l7-component 2.20.5 → 2.20.6

package/es/control/baseControl/buttonControl.d.ts

@@ -1,5 +1,6 @@
 import { DOM } from '@antv/l7-utils';
-import Control, { IControlOption } from './control';
+import type { IControlOption } from './control';
+import Control from './control';
 export { ButtonControl };
 export interface IButtonControlOption extends IControlOption {
     btnIcon?: DOM.ELType | DocumentFragment;

package/es/control/baseControl/control.d.ts

@@ -1,7 +1,8 @@
-import { IControl, IControlService, IGlobalConfigService, ILayerService, IMapService, IRendererService, ISceneService, PositionName, PositionType } from '@antv/l7-core';
+import type { IControl, IControlService, IGlobalConfigService, ILayerService, IMapService, IRendererService, ISceneService, PositionName } from '@antv/l7-core';
+import { PositionType } from '@antv/l7-core';
 import EventEmitter from 'eventemitter3';
-import { Container } from 'inversify';
-import { ControlEvent } from '../../interface';
+import type { Container } from 'inversify';
+import type { ControlEvent } from '../../interface';
 export { PositionType } from '@antv/l7-core';
 export { Control };
 export interface IControlOption {

package/es/control/baseControl/popperControl.d.ts

@@ -1,5 +1,7 @@
-import { Popper, PopperPlacement, PopperTrigger } from '../../utils/popper';
-import ButtonControl, { IButtonControlOption } from './buttonControl';
+import type { PopperPlacement, PopperTrigger } from '../../utils/popper';
+import { Popper } from '../../utils/popper';
+import type { IButtonControlOption } from './buttonControl';
+import ButtonControl from './buttonControl';
 export { PopperControl };
 export interface IPopperControlOption extends IButtonControlOption {
     popperPlacement: PopperPlacement;

package/es/control/baseControl/selectControl.d.ts

@@ -1,4 +1,5 @@
-import { IPopperControlOption, PopperControl } from './popperControl';
+import type { IPopperControlOption } from './popperControl';
+import { PopperControl } from './popperControl';
 type BaseOptionItem = {
     value: string;
     text: string;

package/es/control/exportImage.d.ts

@@ -1,4 +1,5 @@
-import ButtonControl, { IButtonControlOption } from './baseControl/buttonControl';
+import type { IButtonControlOption } from './baseControl/buttonControl';
+import ButtonControl from './baseControl/buttonControl';
 export interface IExportImageControlOption extends IButtonControlOption {
     imageType: 'png' | 'jpeg';
     onExport: (base64: string) => void;

package/es/control/fullscreen.d.ts

@@ -1,4 +1,5 @@
-import ButtonControl, { IButtonControlOption } from './baseControl/buttonControl';
+import type { IButtonControlOption } from './baseControl/buttonControl';
+import ButtonControl from './baseControl/buttonControl';
 export interface IFullscreenControlOption extends IButtonControlOption {
     exitBtnText: IButtonControlOption['btnText'];
     exitBtnIcon: IButtonControlOption['btnIcon'];

package/es/control/geoLocate.d.ts

@@ -1,5 +1,6 @@
-import { Point } from '@antv/l7-core';
-import ButtonControl, { IButtonControlOption } from './baseControl/buttonControl';
+import type { Point } from '@antv/l7-core';
+import type { IButtonControlOption } from './baseControl/buttonControl';
+import ButtonControl from './baseControl/buttonControl';
 export interface IGeoLocateOption extends IButtonControlOption {
     transform: (position: Point) => Point | Promise<Point>;
 }

package/es/control/layerSwitch.d.ts

@@ -1,5 +1,6 @@
-import { ILayer } from '@antv/l7-core';
-import SelectControl, { ControlOptionItem, ISelectControlOption } from './baseControl/selectControl';
+import type { ILayer } from '@antv/l7-core';
+import type { ControlOptionItem, ISelectControlOption } from './baseControl/selectControl';
+import SelectControl from './baseControl/selectControl';
 export type LayerSwitchItem = {
     layer: ILayer;
     name?: string;

package/es/control/logo.d.ts

@@ -1,4 +1,5 @@
-import { Control, IControlOption } from './baseControl';
+import type { IControlOption } from './baseControl';
+import { Control } from './baseControl';
 export interface ILogoControlOption extends IControlOption {
     img: string;
     href?: string | null;

package/es/control/mapTheme.d.ts

@@ -1,4 +1,5 @@
-import SelectControl, { ControlOptionItem, ISelectControlOption } from './baseControl/selectControl';
+import type { ControlOptionItem, ISelectControlOption } from './baseControl/selectControl';
+import SelectControl from './baseControl/selectControl';
 export { MapTheme };
 export default class MapTheme extends SelectControl<ISelectControlOption> {
     getDefault(option?: Partial<ISelectControlOption>): ISelectControlOption;

package/es/control/mouseLocation.d.ts

@@ -1,5 +1,6 @@
-import { Position } from '@antv/l7-core';
-import Control, { IControlOption } from './baseControl/control';
+import type { Position } from '@antv/l7-core';
+import type { IControlOption } from './baseControl/control';
+import Control from './baseControl/control';
 export interface IMouseLocationControlOption extends IControlOption {
     transform: (position: Position) => Position;
 }

package/es/control/scale.d.ts

@@ -1,4 +1,5 @@
-import { Control, IControlOption, PositionType } from './baseControl';
+import type { IControlOption } from './baseControl';
+import { Control, PositionType } from './baseControl';
 export interface IScaleControlOption extends IControlOption {
     lockWidth: boolean;
     maxWidth: number;

package/es/control/swipe.d.ts

@@ -0,0 +1,67 @@
+import type { ILayer } from '@antv/l7-core';
+import type { Container } from 'inversify';
+import type { IControlOption } from './baseControl';
+import { Control } from './baseControl';
+export interface ISwipeControlOption extends IControlOption {
+    /**
+     * 左侧的图层
+     */
+    layers: ILayer[];
+    /**
+     * 右侧的图层
+     */
+    rightLayers: ILayer[];
+    /**
+     * 设置卷帘的位置，值域为 0 到 1, 默认正中间为 0.5
+     */
+    ratio?: number;
+    /**
+     * 卷帘方向设置（'vertical' | 'horizontal'），默认 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+}
+export { Swipe };
+export default class Swipe extends Control<ISwipeControlOption> {
+    /**
+     * 是否正在拖动卷帘
+     */
+    private isMoving;
+    /**
+     * 掩膜图层实例
+     */
+    private maskLayer;
+    getDefault(): ISwipeControlOption;
+    onAdd(): HTMLElement;
+    addTo(sceneContainer: Container): this;
+    onRemove(): void;
+    show(): void;
+    hide(): void;
+    setOptions(newOptions: Partial<ISwipeControlOption>): void;
+    private registerEvent;
+    private unRegisterEvent;
+    private setOrientationAndRatio;
+    private setLayers;
+    private addMaskToLayers;
+    private removeMaskFromLayers;
+    private move;
+    private getMaskGeoData;
+    private getMaskLayer;
+    private updateMask;
+    private getContainerDOMRect;
+    private getContainerSize;
+    private getBounds;
+    /**
+     * 添加要剪裁的图层
+     * @param layer 剪裁的图层
+     * @param addRight 是否添加图层到右侧, 默认添加到左侧.
+     */
+    addLayer(layer: ILayer | ILayer[], addRight?: boolean): void;
+    /**
+     * 移除剪裁的图层
+     */
+    removeLayer(layer: ILayer | ILayer[]): void;
+    /**
+     * 清除所有图层
+     */
+    removeLayers(): void;
+}

package/es/control/swipe.js

@@ -0,0 +1,488 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _get from "@babel/runtime/helpers/esm/get";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import { TYPES, createLayerContainer } from '@antv/l7-core';
+import { PolygonLayer } from '@antv/l7-layers';
+import { DOM } from '@antv/l7-utils';
+import { Control } from "./baseControl";
+export { Swipe };
+var Swipe = /*#__PURE__*/function (_Control) {
+  _inherits(Swipe, _Control);
+  var _super = _createSuper(Swipe);
+  function Swipe() {
+    var _this;
+    _classCallCheck(this, Swipe);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    /**
+     * 是否正在拖动卷帘
+     */
+    _defineProperty(_assertThisInitialized(_this), "isMoving", false);
+    _defineProperty(_assertThisInitialized(_this), "move", function (e) {
+      // 阻止事件冒泡到地图上
+      e.stopPropagation();
+      switch (e.type) {
+        case 'touchcancel':
+        case 'touchend':
+        case 'mouseup':
+          {
+            var _this$scene;
+            _this.isMoving = false;
+            ['mouseup', 'mousemove', 'touchend', 'touchcancel', 'touchmove'].forEach(function (eventName) {
+              document.removeEventListener(eventName, _this.move);
+            });
+            (_this$scene = _this.scene) === null || _this$scene === void 0 || _this$scene.render();
+            break;
+          }
+        case 'mousedown':
+        case 'touchstart':
+          {
+            _this.isMoving = true;
+            ['mouseup', 'mousemove', 'touchend', 'touchcancel', 'touchmove'].forEach(function (eventName) {
+              document.addEventListener(eventName, _this.move);
+            });
+            // fallthrough
+          }
+
+        case 'mousemove':
+        case 'touchmove':
+          {
+            if (_this.isMoving) {
+              if (_this.controlOption.orientation === 'vertical') {
+                var pageX;
+                if ('pageX' in e) {
+                  pageX = e.pageX;
+                } else if (e.touches && e.touches.length && e.touches[0].pageX) {
+                  pageX = e.touches[0].pageX;
+                } else if (e.changedTouches && e.changedTouches.length) {
+                  pageX = e.changedTouches[0].pageX;
+                }
+                if (!pageX) {
+                  break;
+                }
+                var containerRect = _this.getContainerDOMRect();
+                var containerSize = _this.getContainerSize();
+                var containerWidth = containerSize[0];
+                var containerRectLeft = (containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) || 0;
+                var offsetX = pageX - containerRectLeft + window.scrollX - document.documentElement.clientLeft;
+                var width = containerWidth - Math.min(Math.max(0, containerWidth - offsetX), containerWidth);
+                var ratio = width / containerWidth;
+                _this.setOptions({
+                  ratio: ratio
+                });
+                _this.emit('moving', {
+                  size: [width, containerSize[1]],
+                  ratio: [ratio, 0]
+                });
+              } else {
+                var pageY;
+                if ('pageY' in e) {
+                  pageY = e.pageY;
+                } else if (e.touches && e.touches.length && e.touches[0].pageY) {
+                  pageY = e.touches[0].pageY;
+                } else if (e.changedTouches && e.changedTouches.length) {
+                  pageY = e.changedTouches[0].pageY;
+                }
+                if (!pageY) {
+                  break;
+                }
+                var _containerRect = _this.getContainerDOMRect();
+                var _containerSize = _this.getContainerSize();
+                var containerHeight = _containerSize[1];
+                var _containerRectLeft = (_containerRect === null || _containerRect === void 0 ? void 0 : _containerRect.top) || 0;
+                var offsetY = pageY - _containerRectLeft + window.scrollY - document.documentElement.clientTop;
+                var height = containerHeight - Math.min(Math.max(0, containerHeight - offsetY), containerHeight);
+                var _ratio = height / containerHeight;
+                _this.setOptions({
+                  ratio: _ratio
+                });
+                _this.emit('moving', {
+                  size: [_containerSize[0], height],
+                  ratio: [0, _ratio]
+                });
+              }
+            }
+            break;
+          }
+        default:
+          break;
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "getMaskLayer", function () {
+      return new PolygonLayer({
+        visible: false
+      }).source({
+        type: 'FeatureCollection',
+        features: []
+      }).shape('fill').color('red').style({
+        opacity: 0.1
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "updateMask", function () {
+      var _this$maskLayer;
+      if (!_this.mapsService) return;
+      var geoJSON = _this.getMaskGeoData();
+      (_this$maskLayer = _this.maskLayer) === null || _this$maskLayer === void 0 || _this$maskLayer.setData(geoJSON);
+    });
+    return _this;
+  }
+  _createClass(Swipe, [{
+    key: "getDefault",
+    value:
+    /**
+     * 掩膜图层实例
+     */
+
+    function getDefault() {
+      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(Swipe.prototype), "getDefault", this).call(this)), {}, {
+        layers: [],
+        rightLayers: [],
+        ratio: 0.5,
+        orientation: 'vertical'
+      });
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var container = DOM.create('div', 'l7-control-swipe');
+      DOM.create('button', 'l7-control-swipe__button', container);
+      var _this$controlOption = this.controlOption,
+        _this$controlOption$o = _this$controlOption.orientation,
+        orientation = _this$controlOption$o === void 0 ? 'vertical' : _this$controlOption$o,
+        _this$controlOption$r = _this$controlOption.ratio,
+        ratio = _this$controlOption$r === void 0 ? 0.5 : _this$controlOption$r;
+      if (orientation === 'horizontal') {
+        container.style.top = ratio * 100 + '%';
+        container.style.left = '';
+      } else {
+        container.style.left = ratio * 100 + '%';
+        container.style.top = '';
+      }
+      container.classList.add(orientation);
+      return container;
+    }
+  }, {
+    key: "addTo",
+    value: function addTo(sceneContainer) {
+      // 初始化各个 Service 实例
+      this.mapsService = sceneContainer.get(TYPES.IMapService);
+      this.renderService = sceneContainer.get(TYPES.IRendererService);
+      this.layerService = sceneContainer.get(TYPES.ILayerService);
+      this.controlService = sceneContainer.get(TYPES.IControlService);
+      this.configService = sceneContainer.get(TYPES.IGlobalConfigService);
+      this.scene = sceneContainer.get(TYPES.ISceneService);
+      this.sceneContainer = sceneContainer;
+      this.isShow = true;
+
+      // 初始化 container
+      this.container = this.onAdd();
+      var _this$controlOption2 = this.controlOption,
+        className = _this$controlOption2.className,
+        style = _this$controlOption2.style,
+        layers = _this$controlOption2.layers,
+        rightLayers = _this$controlOption2.rightLayers;
+      if (className) {
+        this.setClassName(className);
+      }
+      if (style) {
+        this.setStyle(style);
+      }
+
+      // 将 container 插入容器中
+      // this.scene.getSceneContainer().appendChild(this.container);
+      this.mapsService.getMarkerContainer().appendChild(this.container);
+      this.maskLayer = this.getMaskLayer();
+      this.updateMask();
+      this.registerEvent();
+
+      // 给图层挂载掩膜
+      this.addMaskToLayers(layers, false);
+      this.addMaskToLayers(rightLayers, true);
+
+      // 添加掩膜图层到 scene
+      var layerContainer = createLayerContainer(sceneContainer);
+      this.maskLayer.setContainer(layerContainer, sceneContainer);
+      this.scene.addLayer(this.maskLayer);
+      this.emit('add', this);
+      return this;
+    }
+  }, {
+    key: "onRemove",
+    value: function onRemove() {
+      if (this.maskLayer) {
+        var _this$layerService;
+        var _this$controlOption3 = this.controlOption,
+          layers = _this$controlOption3.layers,
+          rightLayers = _this$controlOption3.rightLayers;
+        this.removeMaskFromLayers(layers);
+        this.removeMaskFromLayers(rightLayers);
+        (_this$layerService = this.layerService) === null || _this$layerService === void 0 || _this$layerService.remove(this.maskLayer);
+      }
+      this.unRegisterEvent();
+      this.removeAllListeners();
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      var _this$scene2;
+      var container = this.container;
+      DOM.removeClass(container, 'l7-control-swipe_hide');
+      // 启用掩膜
+      var _this$controlOption4 = this.controlOption,
+        layers = _this$controlOption4.layers,
+        rightLayers = _this$controlOption4.rightLayers;
+      layers.forEach(function (layer) {
+        return layer.enableMask();
+      });
+      rightLayers.forEach(function (layer) {
+        return layer.enableMask();
+      });
+      (_this$scene2 = this.scene) === null || _this$scene2 === void 0 || _this$scene2.render();
+      this.isShow = true;
+      this.emit('show', this);
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this$scene3;
+      var container = this.container;
+      DOM.addClass(container, 'l7-control-swipe_hide');
+      // 禁用掩膜
+      var _this$controlOption5 = this.controlOption,
+        layers = _this$controlOption5.layers,
+        rightLayers = _this$controlOption5.rightLayers;
+      layers.forEach(function (layer) {
+        return layer.disableMask();
+      });
+      rightLayers.forEach(function (layer) {
+        return layer.disableMask();
+      });
+      (_this$scene3 = this.scene) === null || _this$scene3 === void 0 || _this$scene3.render();
+      this.isShow = false;
+      this.emit('hide', this);
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions(newOptions) {
+      var controlOption = _objectSpread(_objectSpread({}, this.controlOption), newOptions);
+      if (newOptions.className) {
+        this.setClassName(newOptions.className);
+      }
+      if (newOptions.style) {
+        this.setStyle(newOptions.style);
+      }
+      if (newOptions.orientation || newOptions.ratio !== undefined) {
+        this.setOrientationAndRatio(controlOption.orientation, controlOption.ratio);
+      }
+      if (newOptions.layers) {
+        var newLayers = newOptions.layers;
+        var oldLayers = this.controlOption.layers;
+        this.setLayers(newLayers, oldLayers, false);
+      }
+      if (newOptions.rightLayers) {
+        var _newLayers = newOptions.rightLayers;
+        var _oldLayers = this.controlOption.rightLayers;
+        this.setLayers(_newLayers, _oldLayers, true);
+      }
+      this.controlOption = controlOption;
+      this.updateMask();
+    }
+  }, {
+    key: "registerEvent",
+    value: function registerEvent() {
+      this.container.addEventListener('mousedown', this.move);
+      this.container.addEventListener('touchstart', this.move);
+      this.mapsService.on('camerachange', this.updateMask);
+    }
+  }, {
+    key: "unRegisterEvent",
+    value: function unRegisterEvent() {
+      var _this$mapsService;
+      this.container.removeEventListener('mousedown', this.move);
+      this.container.removeEventListener('touchstart', this.move);
+      (_this$mapsService = this.mapsService) === null || _this$mapsService === void 0 || _this$mapsService.off('camerachange', this.updateMask);
+    }
+  }, {
+    key: "setOrientationAndRatio",
+    value: function setOrientationAndRatio() {
+      var orientation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'vertical';
+      var ratio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
+      this.container.classList.remove('horizontal', 'vertical');
+      this.container.classList.add(orientation);
+      if (orientation === 'horizontal') {
+        this.container.style.top = ratio * 100 + '%';
+        this.container.style.left = '';
+      } else {
+        this.container.style.left = ratio * 100 + '%';
+        this.container.style.top = '';
+      }
+    }
+  }, {
+    key: "setLayers",
+    value: function setLayers(newLayers, oldLayers) {
+      var isRightLayer = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var addLayers = newLayers.filter(function (layer) {
+        return oldLayers.includes(layer) === false;
+      });
+      var removeLayers = oldLayers.filter(function (layer) {
+        return newLayers.includes(layer) === false;
+      });
+      this.addMaskToLayers(addLayers, isRightLayer);
+      this.removeMaskFromLayers(removeLayers);
+    }
+  }, {
+    key: "addMaskToLayers",
+    value: function addMaskToLayers(layers, isRightLayer) {
+      var _this2 = this;
+      layers.forEach(function (layer) {
+        layer.updateLayerConfig({
+          maskInside: isRightLayer ? false : true
+        });
+        layer.addMask(_this2.maskLayer);
+      });
+    }
+  }, {
+    key: "removeMaskFromLayers",
+    value: function removeMaskFromLayers(layers) {
+      var _this3 = this;
+      layers.forEach(function (layer) {
+        // reset default is true
+        layer.updateLayerConfig({
+          maskInside: true
+        });
+        layer.removeMask(_this3.maskLayer);
+      });
+    }
+  }, {
+    key: "getMaskGeoData",
+    value: function getMaskGeoData() {
+      var _this$controlOption6 = this.controlOption,
+        _this$controlOption6$ = _this$controlOption6.ratio,
+        ratio = _this$controlOption6$ === void 0 ? 0.5 : _this$controlOption6$,
+        _this$controlOption6$2 = _this$controlOption6.orientation,
+        orientation = _this$controlOption6$2 === void 0 ? 'vertical' : _this$controlOption6$2;
+      var isVertical = orientation === 'vertical';
+      var _this$getBounds = this.getBounds(),
+        _this$getBounds2 = _slicedToArray(_this$getBounds, 2),
+        sw = _this$getBounds2[0],
+        ne = _this$getBounds2[1];
+      var _sw = _slicedToArray(sw, 2),
+        swLng = _sw[0],
+        swLat = _sw[1];
+      var _ne = _slicedToArray(ne, 2),
+        neLng = _ne[0],
+        neLat = _ne[1];
+      var coordinate;
+      if (isVertical) {
+        var centerLng = swLng + (neLng - swLng) * ratio;
+        coordinate = [[swLng, neLat], [centerLng, neLat], [centerLng, swLat], sw, [swLng, neLat]];
+      } else {
+        var size = this.getContainerSize();
+        var lngLat = this.mapsService.containerToLngLat([size[0], size[1] * ratio]);
+        var centerLat = lngLat.lat;
+        coordinate = [[swLng, neLat], ne, [neLng, centerLat], [swLng, centerLat], [swLng, neLat]];
+      }
+      var geoJSON = {
+        type: 'FeatureCollection',
+        features: [{
+          type: 'Feature',
+          properties: {},
+          geometry: {
+            type: 'Polygon',
+            coordinates: [coordinate]
+          }
+        }]
+      };
+      return geoJSON;
+    }
+  }, {
+    key: "getContainerDOMRect",
+    value: function getContainerDOMRect() {
+      var _this$mapsService$get;
+      var rect = (_this$mapsService$get = this.mapsService.getContainer()) === null || _this$mapsService$get === void 0 ? void 0 : _this$mapsService$get.getBoundingClientRect();
+      return rect;
+    }
+  }, {
+    key: "getContainerSize",
+    value: function getContainerSize() {
+      var size = this.mapsService.getSize();
+      return size;
+    }
+  }, {
+    key: "getBounds",
+    value: function getBounds() {
+      var bounds = this.mapsService.getBounds();
+      return bounds;
+    }
+
+    /**
+     * 添加要剪裁的图层
+     * @param layer 剪裁的图层
+     * @param addRight 是否添加图层到右侧, 默认添加到左侧.
+     */
+  }, {
+    key: "addLayer",
+    value: function addLayer(layer) {
+      var addRight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var layers = Array.isArray(layer) ? layer : [layer];
+      if (addRight) {
+        var _this$controlOption$r2;
+        var rightLayers = (_this$controlOption$r2 = this.controlOption.rightLayers).concat.apply(_this$controlOption$r2, _toConsumableArray(layers));
+        this.setOptions({
+          rightLayers: rightLayers
+        });
+      } else {
+        var _this$controlOption$l;
+        var leftLayers = (_this$controlOption$l = this.controlOption.layers).concat.apply(_this$controlOption$l, _toConsumableArray(layers));
+        this.setOptions({
+          layers: leftLayers
+        });
+      }
+    }
+
+    /**
+     * 移除剪裁的图层
+     */
+  }, {
+    key: "removeLayer",
+    value: function removeLayer(layer) {
+      var layers = Array.isArray(layer) ? layer : [layer];
+      var leftLayers = this.controlOption.layers.filter(function (layer) {
+        return layers.includes(layer);
+      });
+      var rightLayers = this.controlOption.rightLayers.filter(function (layer) {
+        return layers.includes(layer);
+      });
+      this.setOptions({
+        layers: leftLayers,
+        rightLayers: rightLayers
+      });
+    }
+
+    /**
+     * 清除所有图层
+     */
+  }, {
+    key: "removeLayers",
+    value: function removeLayers() {
+      this.setOptions({
+        layers: [],
+        rightLayers: []
+      });
+    }
+  }]);
+  return Swipe;
+}(Control);
+export { Swipe as default };

package/es/control/zoom.d.ts

@@ -1,6 +1,7 @@
 import { PositionType } from '@antv/l7-core';
 import { DOM } from '@antv/l7-utils';
-import { Control, IControlOption } from './baseControl';
+import type { IControlOption } from './baseControl';
+import { Control } from './baseControl';
 export interface IZoomControlOption extends IControlOption {
     zoomInText: DOM.ELType | string;
     zoomInTitle: string;