@antv/l7-component 2.21.0 → 2.21.2

package/es/control/swipe.js

@@ -1,36 +1,22 @@
-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 { 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));
+export default class Swipe extends Control {
+  constructor(...args) {
+    super(...args);
     /**
      * 是否正在拖动卷帘
      */
-    _defineProperty(_assertThisInitialized(_this), "isMoving", false);
-    _defineProperty(_assertThisInitialized(_this), "move", function (e) {
+    _defineProperty(this, "isMoving", false);
+    /**
+     * 掩膜图层实例
+     */
+    _defineProperty(this, "maskLayer", void 0);
+    _defineProperty(this, "move", e => {
       // 阻止事件冒泡到地图上
       e.stopPropagation();
       switch (e.type) {
@@ -39,29 +25,28 @@ var Swipe = /*#__PURE__*/function (_Control) {
         case 'mouseup':
           {
             var _this$scene;
-            _this.isMoving = false;
-            ['mouseup', 'mousemove', 'touchend', 'touchcancel', 'touchmove'].forEach(function (eventName) {
-              document.removeEventListener(eventName, _this.move);
+            this.isMoving = false;
+            ['mouseup', 'mousemove', 'touchend', 'touchcancel', 'touchmove'].forEach(eventName => {
+              document.removeEventListener(eventName, this.move);
             });
-            (_this$scene = _this.scene) === null || _this$scene === void 0 || _this$scene.render();
+            (_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);
+            this.isMoving = true;
+            ['mouseup', 'mousemove', 'touchend', 'touchcancel', 'touchmove'].forEach(eventName => {
+              document.addEventListener(eventName, this.move);
             });
             // fallthrough
           }
-
         case 'mousemove':
         case 'touchmove':
           {
-            if (_this.isMoving) {
-              if (_this.controlOption.orientation === 'vertical') {
-                var pageX;
+            if (this.isMoving) {
+              if (this.controlOption.orientation === 'vertical') {
+                let pageX;
                 if ('pageX' in e) {
                   pageX = e.pageX;
                 } else if (e.touches && e.touches.length && e.touches[0].pageX) {
@@ -72,22 +57,22 @@ var Swipe = /*#__PURE__*/function (_Control) {
                 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
+                const containerRect = this.getContainerDOMRect();
+                const containerSize = this.getContainerSize();
+                const containerWidth = containerSize[0];
+                const containerRectLeft = (containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) || 0;
+                const offsetX = pageX - containerRectLeft + window.scrollX - document.documentElement.clientLeft;
+                const width = containerWidth - Math.min(Math.max(0, containerWidth - offsetX), containerWidth);
+                const ratio = width / containerWidth;
+                this.setOptions({
+                  ratio
                 });
-                _this.emit('moving', {
+                this.emit('moving', {
                   size: [width, containerSize[1]],
                   ratio: [ratio, 0]
                 });
               } else {
-                var pageY;
+                let pageY;
                 if ('pageY' in e) {
                   pageY = e.pageY;
                 } else if (e.touches && e.touches.length && e.touches[0].pageY) {
@@ -98,19 +83,19 @@ var Swipe = /*#__PURE__*/function (_Control) {
                 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
+                const containerRect = this.getContainerDOMRect();
+                const containerSize = this.getContainerSize();
+                const containerHeight = containerSize[1];
+                const containerRectLeft = (containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) || 0;
+                const offsetY = pageY - containerRectLeft + window.scrollY - document.documentElement.clientTop;
+                const height = containerHeight - Math.min(Math.max(0, containerHeight - offsetY), containerHeight);
+                const ratio = height / containerHeight;
+                this.setOptions({
+                  ratio
                 });
-                _this.emit('moving', {
-                  size: [_containerSize[0], height],
-                  ratio: [0, _ratio]
+                this.emit('moving', {
+                  size: [containerSize[0], height],
+                  ratio: [0, ratio]
                 });
               }
             }
@@ -120,369 +105,288 @@ var Swipe = /*#__PURE__*/function (_Control) {
           break;
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "getMaskLayer", function () {
+    _defineProperty(this, "getMaskLayer", () => {
+      console.log(this.getMaskGeoData());
       return new PolygonLayer({
         visible: false
-      }).source({
-        type: 'FeatureCollection',
-        features: []
-      }).shape('fill').color('red').style({
+      }).source(this.getMaskGeoData()).shape('fill').color('red').style({
         opacity: 0.1
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "updateMask", function () {
+    _defineProperty(this, "updateMask", () => {
       var _this$maskLayer;
-      if (!_this.mapsService) return;
-      var geoJSON = _this.getMaskGeoData();
-      (_this$maskLayer = _this.maskLayer) === null || _this$maskLayer === void 0 || _this$maskLayer.setData(geoJSON);
+      if (!this.mapsService) return;
+      const geoJSON = this.getMaskGeoData();
+      (_this$maskLayer = this.maskLayer) === null || _this$maskLayer === void 0 || _this$maskLayer.setData(geoJSON);
     });
-    return _this;
   }
-  _createClass(Swipe, [{
-    key: "getDefault",
-    value:
-    /**
-     * 掩膜图层实例
-     */
+  getDefault() {
+    return _objectSpread(_objectSpread({}, super.getDefault()), {}, {
+      layers: [],
+      rightLayers: [],
+      ratio: 0.5,
+      orientation: 'vertical'
+    });
+  }
+  onAdd() {
+    const container = DOM.create('div', 'l7-control-swipe');
+    DOM.create('button', 'l7-control-swipe__button', container);
+    const {
+      orientation = 'vertical',
+      ratio = 0.5
+    } = this.controlOption;
+    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;
+  }
+  addTo(sceneContainer) {
+    // 初始化各个 Service 实例
+    this.mapsService = sceneContainer.mapService;
+    this.renderService = sceneContainer.rendererService;
+    this.layerService = sceneContainer.layerService;
+    this.controlService = sceneContainer.controlService;
+    this.configService = sceneContainer.globalConfigService;
+    this.scene = sceneContainer.sceneService;
+    this.sceneContainer = sceneContainer;
+    this.isShow = true;
 
-    function getDefault() {
-      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(Swipe.prototype), "getDefault", this).call(this)), {}, {
-        layers: [],
-        rightLayers: [],
-        ratio: 0.5,
-        orientation: 'vertical'
-      });
+    // 初始化 container
+    this.container = this.onAdd();
+    const {
+      className,
+      style,
+      layers,
+      rightLayers
+    } = this.controlOption;
+    if (className) {
+      this.setClassName(className);
     }
-  }, {
-    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;
+    if (style) {
+      this.setStyle(style);
     }
-  }, {
-    key: "addTo",
-    value: function addTo(sceneContainer) {
-      // 初始化各个 Service 实例
-      this.mapsService = sceneContainer.mapService;
-      this.renderService = sceneContainer.rendererService;
-      this.layerService = sceneContainer.layerService;
-      this.controlService = sceneContainer.controlService;
-      this.configService = sceneContainer.globalConfigService;
-      this.scene = sceneContainer.sceneService;
-      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();
+    // 将 container 插入容器中
+    // this.scene.getSceneContainer().appendChild(this.container);
+    this.mapsService.getMarkerContainer().appendChild(this.container);
+    this.maskLayer = this.getMaskLayer();
+    this.registerEvent();
 
-      // 给图层挂载掩膜
-      this.addMaskToLayers(layers, false);
-      this.addMaskToLayers(rightLayers, true);
+    // 添加掩膜图层到 scene
+    const layerContainer = createLayerContainer(sceneContainer);
+    this.maskLayer.setContainer(layerContainer);
+    this.scene.addLayer(this.maskLayer);
 
-      // 添加掩膜图层到 scene
-      var layerContainer = createLayerContainer(sceneContainer);
-      this.maskLayer.setContainer(layerContainer);
-      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();
+    // 给图层挂载掩膜
+    this.addMaskToLayers(layers, false);
+    this.addMaskToLayers(rightLayers, true);
+    this.emit('add', this);
+    return this;
+  }
+  onRemove() {
+    if (this.maskLayer) {
+      var _this$layerService;
+      const {
+        layers,
+        rightLayers
+      } = this.controlOption;
+      this.removeMaskFromLayers(layers);
+      this.removeMaskFromLayers(rightLayers);
+      (_this$layerService = this.layerService) === null || _this$layerService === void 0 || _this$layerService.remove(this.maskLayer);
     }
-  }, {
-    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);
+    this.unRegisterEvent();
+    this.removeAllListeners();
+  }
+  show() {
+    var _this$scene2;
+    const container = this.container;
+    DOM.removeClass(container, 'l7-control-swipe_hide');
+    // 启用掩膜
+    const {
+      layers,
+      rightLayers
+    } = this.controlOption;
+    layers.forEach(layer => layer.enableMask());
+    rightLayers.forEach(layer => layer.enableMask());
+    (_this$scene2 = this.scene) === null || _this$scene2 === void 0 || _this$scene2.render();
+    this.isShow = true;
+    this.emit('show', this);
+  }
+  hide() {
+    var _this$scene3;
+    const container = this.container;
+    DOM.addClass(container, 'l7-control-swipe_hide');
+    // 禁用掩膜
+    const {
+      layers,
+      rightLayers
+    } = this.controlOption;
+    layers.forEach(layer => layer.disableMask());
+    rightLayers.forEach(layer => layer.disableMask());
+    (_this$scene3 = this.scene) === null || _this$scene3 === void 0 || _this$scene3.render();
+    this.isShow = false;
+    this.emit('hide', this);
+  }
+  setOptions(newOptions) {
+    const controlOption = _objectSpread(_objectSpread({}, this.controlOption), newOptions);
+    if (newOptions.className) {
+      this.setClassName(newOptions.className);
     }
-  }, {
-    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);
+    if (newOptions.style) {
+      this.setStyle(newOptions.style);
     }
-  }, {
-    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();
+    if (newOptions.orientation || newOptions.ratio !== undefined) {
+      this.setOrientationAndRatio(controlOption.orientation, controlOption.ratio);
     }
-  }, {
-    key: "registerEvent",
-    value: function registerEvent() {
-      this.container.addEventListener('mousedown', this.move);
-      this.container.addEventListener('touchstart', this.move);
-      this.mapsService.on('camerachange', this.updateMask);
+    if (newOptions.layers) {
+      const newLayers = newOptions.layers;
+      const oldLayers = this.controlOption.layers;
+      this.setLayers(newLayers, oldLayers, false);
     }
-  }, {
-    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 = '';
-      }
+    if (newOptions.rightLayers) {
+      const newLayers = newOptions.rightLayers;
+      const oldLayers = this.controlOption.rightLayers;
+      this.setLayers(newLayers, oldLayers, true);
     }
-  }, {
-    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);
+    this.controlOption = controlOption;
+    this.updateMask();
+  }
+  registerEvent() {
+    this.container.addEventListener('mousedown', this.move);
+    this.container.addEventListener('touchstart', this.move);
+    this.mapsService.on('camerachange', this.updateMask);
+  }
+  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);
+  }
+  setOrientationAndRatio(orientation = 'vertical', ratio = 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: "addMaskToLayers",
-    value: function addMaskToLayers(layers, isRightLayer) {
-      var _this2 = this;
-      layers.forEach(function (layer) {
-        layer.updateLayerConfig({
-          maskInside: isRightLayer ? false : true
-        });
-        layer.addMask(_this2.maskLayer);
+  }
+  setLayers(newLayers, oldLayers, isRightLayer = false) {
+    const addLayers = newLayers.filter(layer => oldLayers.includes(layer) === false);
+    const removeLayers = oldLayers.filter(layer => newLayers.includes(layer) === false);
+    this.addMaskToLayers(addLayers, isRightLayer);
+    this.removeMaskFromLayers(removeLayers);
+  }
+  addMaskToLayers(layers, isRightLayer) {
+    layers.forEach(layer => {
+      layer.updateLayerConfig({
+        maskInside: isRightLayer ? false : true
       });
-    }
-  }, {
-    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);
+      layer.addMask(this.maskLayer);
+    });
+  }
+  removeMaskFromLayers(layers) {
+    layers.forEach(layer => {
+      // reset default is true
+      layer.updateLayerConfig({
+        maskInside: true
       });
+      layer.removeMask(this.maskLayer);
+    });
+  }
+  getMaskGeoData() {
+    const {
+      ratio = 0.5,
+      orientation = 'vertical'
+    } = this.controlOption;
+    const isVertical = orientation === 'vertical';
+    const [sw, ne] = this.getBounds();
+    const [swLng, swLat] = sw;
+    const [neLng, neLat] = ne;
+    let coordinate;
+    if (isVertical) {
+      const centerLng = swLng + (neLng - swLng) * ratio;
+      coordinate = [[swLng, neLat], [centerLng, neLat], [centerLng, swLat], sw, [swLng, neLat]];
+    } else {
+      const size = this.getContainerSize();
+      const lngLat = this.mapsService.containerToLngLat([size[0], size[1] * ratio]);
+      const centerLat = lngLat.lat;
+      coordinate = [[swLng, neLat], ne, [neLng, centerLat], [swLng, centerLat], [swLng, neLat]];
     }
-  }, {
-    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
-        });
-      }
-    }
+    const geoJSON = {
+      type: 'FeatureCollection',
+      features: [{
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'Polygon',
+          coordinates: [coordinate]
+        }
+      }]
+    };
+    return geoJSON;
+  }
+  getContainerDOMRect() {
+    var _this$mapsService$get;
+    const rect = (_this$mapsService$get = this.mapsService.getContainer()) === null || _this$mapsService$get === void 0 ? void 0 : _this$mapsService$get.getBoundingClientRect();
+    return rect;
+  }
+  getContainerSize() {
+    const size = this.mapsService.getSize();
+    return size;
+  }
+  getBounds() {
+    const bounds = this.mapsService.getBounds();
+    return bounds;
+  }
 
-    /**
-     * 移除剪裁的图层
-     */
-  }, {
-    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);
-      });
+  /**
+   * 添加要剪裁的图层
+   * @param layer 剪裁的图层
+   * @param addRight 是否添加图层到右侧, 默认添加到左侧.
+   */
+  addLayer(layer, addRight = false) {
+    const layers = Array.isArray(layer) ? layer : [layer];
+    if (addRight) {
+      const rightLayers = this.controlOption.rightLayers.concat(...layers);
       this.setOptions({
-        layers: leftLayers,
-        rightLayers: rightLayers
+        rightLayers
       });
-    }
-
-    /**
-     * 清除所有图层
-     */
-  }, {
-    key: "removeLayers",
-    value: function removeLayers() {
+    } else {
+      const leftLayers = this.controlOption.layers.concat(...layers);
       this.setOptions({
-        layers: [],
-        rightLayers: []
+        layers: leftLayers
       });
     }
-  }]);
-  return Swipe;
-}(Control);
-export { Swipe as default };
+  }
+
+  /**
+   * 移除剪裁的图层
+   */
+  removeLayer(layer) {
+    const layers = Array.isArray(layer) ? layer : [layer];
+    const leftLayers = this.controlOption.layers.filter(layer => layers.includes(layer));
+    const rightLayers = this.controlOption.rightLayers.filter(layer => layers.includes(layer));
+    this.setOptions({
+      layers: leftLayers,
+      rightLayers
+    });
+  }
+
+  /**
+   * 清除所有图层
+   */
+  removeLayers() {
+    this.setOptions({
+      layers: [],
+      rightLayers: []
+    });
+  }
+}