@antv/l7-component 2.20.5 → 2.20.8

package/lib/control/swipe.js

@@ -0,0 +1,493 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Swipe = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _l7Core = require("@antv/l7-core");
+var _l7Layers = require("@antv/l7-layers");
+var _l7Utils = require("@antv/l7-utils");
+var _baseControl = require("./baseControl");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+var Swipe = exports.default = exports.Swipe = /*#__PURE__*/function (_Control) {
+  (0, _inherits2.default)(Swipe, _Control);
+  var _super = _createSuper(Swipe);
+  function Swipe() {
+    var _this;
+    (0, _classCallCheck2.default)(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));
+    /**
+     * 是否正在拖动卷帘
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isMoving", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getMaskLayer", function () {
+      return new _l7Layers.PolygonLayer({
+        visible: false
+      }).source({
+        type: 'FeatureCollection',
+        features: []
+      }).shape('fill').color('red').style({
+        opacity: 0.1
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
+  }
+  (0, _createClass2.default)(Swipe, [{
+    key: "getDefault",
+    value:
+    /**
+     * 掩膜图层实例
+     */
+
+    function getDefault() {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(Swipe.prototype), "getDefault", this).call(this)), {}, {
+        layers: [],
+        rightLayers: [],
+        ratio: 0.5,
+        orientation: 'vertical'
+      });
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var container = _l7Utils.DOM.create('div', 'l7-control-swipe');
+      _l7Utils.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(_l7Core.TYPES.IMapService);
+      this.renderService = sceneContainer.get(_l7Core.TYPES.IRendererService);
+      this.layerService = sceneContainer.get(_l7Core.TYPES.ILayerService);
+      this.controlService = sceneContainer.get(_l7Core.TYPES.IControlService);
+      this.configService = sceneContainer.get(_l7Core.TYPES.IGlobalConfigService);
+      this.scene = sceneContainer.get(_l7Core.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 = (0, _l7Core.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;
+      _l7Utils.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;
+      _l7Utils.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 = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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 = (0, _slicedToArray2.default)(_this$getBounds, 2),
+        sw = _this$getBounds2[0],
+        ne = _this$getBounds2[1];
+      var _sw = (0, _slicedToArray2.default)(sw, 2),
+        swLng = _sw[0],
+        swLat = _sw[1];
+      var _ne = (0, _slicedToArray2.default)(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, (0, _toConsumableArray2.default)(layers));
+        this.setOptions({
+          rightLayers: rightLayers
+        });
+      } else {
+        var _this$controlOption$l;
+        var leftLayers = (_this$controlOption$l = this.controlOption.layers).concat.apply(_this$controlOption$l, (0, _toConsumableArray2.default)(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;
+}(_baseControl.Control);

package/lib/css/index.css

@@ -590,3 +590,75 @@
 .l7-layer-popup__row + .l7-layer-popup__row {
   margin-top: 4px;
 }
+.l7-control-swipe {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 6;
+  transform: translate(-50%, -50%);
+  touch-action: none;
+}
+.l7-control-swipe_hide {
+  display: none;
+}
+.l7-control-swipe:before {
+  position: absolute;
+  top: -5000px;
+  bottom: -5000px;
+  left: 50%;
+  z-index: -1;
+  width: 4px;
+  background: #fff;
+  transform: translate(-2px, 0);
+  content: '';
+}
+.l7-control-swipe.horizontal:before {
+  top: 50%;
+  right: -5000px;
+  bottom: auto;
+  left: -5000px;
+  width: auto;
+  height: 4px;
+}
+.l7-control-swipe__button {
+  display: block;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  color: #595959;
+  font-weight: bold;
+  font-size: inherit;
+  text-align: center;
+  text-decoration: none;
+  background-color: #fff;
+  border: none;
+  border-radius: 2px;
+  outline: none;
+}
+.l7-control-swipe,
+.l7-control-swipe__button {
+  cursor: ew-resize;
+}
+.l7-control-swipe.horizontal,
+.l7-control-swipe.horizontal button {
+  cursor: ns-resize;
+}
+.l7-control-swipe:after,
+.l7-control-swipe__button:before,
+.l7-control-swipe__button:after {
+  position: absolute;
+  top: 25%;
+  bottom: 25%;
+  left: 50%;
+  width: 2px;
+  background: currentColor;
+  transform: translate(-1px, 0);
+  content: '';
+}
+.l7-control-swipe__button:after {
+  transform: translateX(4px);
+}
+.l7-control-swipe__button:before {
+  transform: translateX(-6px);
+}

package/lib/css/index.less

@@ -10,3 +10,4 @@
 @import 'scale';
 @import 'popup';
 @import 'layerPopup';
+@import 'swipe';

package/lib/css/swipe.less

@@ -0,0 +1,80 @@
+@import 'variables';
+
+.l7-control-swipe {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 6;
+  transform: translate(-50%, -50%);
+  touch-action: none;
+
+  &_hide {
+    display: none;
+  }
+
+  &:before {
+    position: absolute;
+    top: -5000px;
+    bottom: -5000px;
+    left: 50%;
+    z-index: -1;
+    width: 4px;
+    background: #fff;
+    transform: translate(-2px, 0);
+    content: '';
+  }
+
+  &.horizontal:before {
+    top: 50%;
+    right: -5000px;
+    bottom: auto;
+    left: -5000px;
+    width: auto;
+    height: 4px;
+  }
+
+  &__button {
+    display: block;
+    width: @l7-btn-control-size;
+    height: @l7-btn-control-size;
+    margin: 0;
+    padding: 0;
+    color: @l7-control-font-color;
+    font-weight: bold;
+    font-size: inherit;
+    text-align: center;
+    text-decoration: none;
+    background-color: @l7-control-bg-color;
+    border: none;
+    border-radius: 2px;
+    outline: none;
+  }
+
+  &,
+  &__button {
+    cursor: ew-resize;
+  }
+  &.horizontal,
+  &.horizontal button {
+    cursor: ns-resize;
+  }
+
+  &:after,
+  &__button:before,
+  &__button:after {
+    position: absolute;
+    top: 25%;
+    bottom: 25%;
+    left: 50%;
+    width: 2px;
+    background: currentColor;
+    transform: translate(-1px, 0);
+    content: '';
+  }
+  &__button:after {
+    transform: translateX(4px);
+  }
+  &__button:before {
+    transform: translateX(-6px);
+  }
+}