@antv/l7-component 2.25.6 → 2.25.7

package/es/control/scale.d.ts

@@ -1,35 +0,0 @@
-import type { IControlOption } from './baseControl';
-import { Control, PositionType } from './baseControl';
-export interface IScaleControlOption extends IControlOption {
-    lockWidth: boolean;
-    maxWidth: number;
-    metric: boolean;
-    updateWhenIdle: boolean;
-    imperial: boolean;
-}
-export { Scale };
-export default class Scale extends Control<IScaleControlOption> {
-    private mScale;
-    private iScale;
-    getDefault(option: Partial<IScaleControlOption>): {
-        name: string;
-        position: PositionType;
-        maxWidth: number;
-        metric: boolean;
-        updateWhenIdle: boolean;
-        imperial: boolean;
-        lockWidth: boolean;
-        className?: string | undefined;
-        style?: string | undefined;
-    };
-    onAdd(): HTMLElement;
-    onRemove(): void;
-    setOptions(newOption: Partial<IScaleControlOption>): void;
-    update: () => void;
-    updateScales(maxMeters: number): void;
-    private resetScaleLines;
-    private updateScale;
-    private getRoundNum;
-    private updateMetric;
-    private updateImperial;
-}

package/es/control/scale.js

@@ -1,121 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { DOM, lnglatDistance } from '@antv/l7-utils';
-import { Control, PositionType } from "./baseControl";
-export { Scale };
-export default class Scale extends Control {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "mScale", void 0);
-    _defineProperty(this, "iScale", void 0);
-    _defineProperty(this, "update", () => {
-      const mapsService = this.mapsService;
-      const {
-        maxWidth
-      } = this.controlOption;
-      const y = mapsService.getSize()[1] / 2;
-      const p1 = mapsService.containerToLngLat([0, y]);
-      const p2 = mapsService.containerToLngLat([maxWidth, y]);
-      const maxMeters = lnglatDistance([p1.lng, p1.lat], [p2.lng, p2.lat]);
-      this.updateScales(maxMeters);
-    });
-  }
-  getDefault(option) {
-    return _objectSpread(_objectSpread({}, super.getDefault(option)), {}, {
-      name: 'scale',
-      position: PositionType.BOTTOMLEFT,
-      maxWidth: 100,
-      metric: true,
-      updateWhenIdle: false,
-      imperial: false,
-      lockWidth: true
-    });
-  }
-  onAdd() {
-    const className = 'l7-control-scale';
-    const container = DOM.create('div', className);
-    this.resetScaleLines(container);
-    const {
-      updateWhenIdle
-    } = this.controlOption;
-    this.mapsService.on(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
-    this.mapsService.on(updateWhenIdle ? 'zoomend' : 'zoomchange', this.update);
-    return container;
-  }
-  onRemove() {
-    const {
-      updateWhenIdle
-    } = this.controlOption;
-    this.mapsService.off(updateWhenIdle ? 'zoomend' : 'zoomchange', this.update);
-    this.mapsService.off(updateWhenIdle ? 'moveend' : 'mapmove', this.update);
-  }
-  setOptions(newOption) {
-    super.setOptions(newOption);
-    if (this.checkUpdateOption(newOption, ['lockWidth', 'maxWidth', 'metric', 'updateWhenIdle', 'imperial'])) {
-      this.resetScaleLines(this.container);
-    }
-  }
-  updateScales(maxMeters) {
-    const {
-      metric,
-      imperial
-    } = this.controlOption;
-    if (metric && maxMeters) {
-      this.updateMetric(maxMeters);
-    }
-    if (imperial && maxMeters) {
-      this.updateImperial(maxMeters);
-    }
-  }
-  resetScaleLines(container) {
-    DOM.clearChildren(container);
-    const {
-      metric,
-      imperial,
-      maxWidth,
-      lockWidth
-    } = this.controlOption;
-    if (lockWidth) {
-      DOM.addStyle(container, `width: ${maxWidth}px`);
-    }
-    if (metric) {
-      this.mScale = DOM.create('div', 'l7-control-scale-line', container);
-    }
-    if (imperial) {
-      this.iScale = DOM.create('div', 'l7-control-scale-line', container);
-    }
-    this.update();
-  }
-  updateScale(scale, text, ratio) {
-    const {
-      maxWidth
-    } = this.controlOption;
-    scale.style.width = Math.round(maxWidth * ratio) + 'px';
-    scale.innerHTML = text;
-  }
-  getRoundNum(num) {
-    const pow10 = Math.pow(10, (Math.floor(num) + '').length - 1);
-    let d = num / pow10;
-    d = d >= 10 ? 10 : d >= 5 ? 5 : d >= 3 ? 3 : d >= 2 ? 2 : 1;
-    return pow10 * d;
-  }
-  updateMetric(maxMeters) {
-    const meters = this.getRoundNum(maxMeters);
-    const label = meters < 1000 ? meters + ' m' : meters / 1000 + ' km';
-    this.updateScale(this.mScale, label, meters / maxMeters);
-  }
-  updateImperial(maxMeters) {
-    const maxFeet = maxMeters * 3.2808399;
-    let maxMiles;
-    let miles;
-    let feet;
-    if (maxFeet > 5280) {
-      maxMiles = maxFeet / 5280;
-      miles = this.getRoundNum(maxMiles);
-      this.updateScale(this.iScale, miles + ' mi', miles / maxMiles);
-    } else {
-      feet = this.getRoundNum(maxFeet);
-      this.updateScale(this.iScale, feet + ' ft', feet / maxFeet);
-    }
-  }
-}

package/es/control/swipe.d.ts

@@ -1,66 +0,0 @@
-import type { ILayer, L7Container } from '@antv/l7-core';
-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: L7Container): 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

@@ -1,392 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createLayerContainer } from '@antv/l7-core';
-import { PolygonLayer } from '@antv/l7-layers';
-import { DOM } from '@antv/l7-utils';
-import { Control } from "./baseControl";
-export { Swipe };
-export default class Swipe extends Control {
-  constructor(...args) {
-    super(...args);
-    /**
-     * 是否正在拖动卷帘
-     */
-    _defineProperty(this, "isMoving", false);
-    /**
-     * 掩模图层实例
-     */
-    _defineProperty(this, "maskLayer", void 0);
-    _defineProperty(this, "move", e => {
-      // 阻止事件冒泡到地图上
-      e.stopPropagation();
-      switch (e.type) {
-        case 'touchcancel':
-        case 'touchend':
-        case 'mouseup':
-          {
-            var _this$scene;
-            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();
-            break;
-          }
-        case 'mousedown':
-        case 'touchstart':
-          {
-            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') {
-                let 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;
-                }
-                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', {
-                  size: [width, containerSize[1]],
-                  ratio: [ratio, 0]
-                });
-              } else {
-                let 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;
-                }
-                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]
-                });
-              }
-            }
-            break;
-          }
-        default:
-          break;
-      }
-    });
-    _defineProperty(this, "getMaskLayer", () => {
-      console.log(this.getMaskGeoData());
-      return new PolygonLayer({
-        visible: false
-      }).source(this.getMaskGeoData()).shape('fill').color('red').style({
-        opacity: 0.1
-      });
-    });
-    _defineProperty(this, "updateMask", () => {
-      var _this$maskLayer;
-      if (!this.mapsService) return;
-      const geoJSON = this.getMaskGeoData();
-      (_this$maskLayer = this.maskLayer) === null || _this$maskLayer === void 0 || _this$maskLayer.setData(geoJSON);
-    });
-  }
-  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;
-
-    // 初始化 container
-    this.container = this.onAdd();
-    const {
-      className,
-      style,
-      layers,
-      rightLayers
-    } = this.controlOption;
-    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.registerEvent();
-
-    // 添加掩模图层到 scene
-    const layerContainer = createLayerContainer(sceneContainer);
-    this.maskLayer.setContainer(layerContainer);
-    this.scene.addLayer(this.maskLayer);
-
-    // 给图层挂载掩模
-    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);
-    }
-    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);
-    }
-    if (newOptions.style) {
-      this.setStyle(newOptions.style);
-    }
-    if (newOptions.orientation || newOptions.ratio !== undefined) {
-      this.setOrientationAndRatio(controlOption.orientation, controlOption.ratio);
-    }
-    if (newOptions.layers) {
-      const newLayers = newOptions.layers;
-      const oldLayers = this.controlOption.layers;
-      this.setLayers(newLayers, oldLayers, false);
-    }
-    if (newOptions.rightLayers) {
-      const newLayers = newOptions.rightLayers;
-      const oldLayers = this.controlOption.rightLayers;
-      this.setLayers(newLayers, oldLayers, true);
-    }
-    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 = '';
-    }
-  }
-  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
-      });
-      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]];
-    }
-    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;
-  }
-
-  /**
-   * 添加要剪裁的图层
-   * @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({
-        rightLayers
-      });
-    } else {
-      const leftLayers = this.controlOption.layers.concat(...layers);
-      this.setOptions({
-        layers: leftLayers
-      });
-    }
-  }
-
-  /**
-   * 移除剪裁的图层
-   */
-  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: []
-    });
-  }
-}

package/es/control/zoom.d.ts

@@ -1,39 +0,0 @@
-import { PositionType } from '@antv/l7-core';
-import { DOM } from '@antv/l7-utils';
-import type { IControlOption } from './baseControl';
-import { Control } from './baseControl';
-export interface IZoomControlOption extends IControlOption {
-    zoomInText: DOM.ELType | string;
-    zoomInTitle: string;
-    zoomOutText: DOM.ELType | string;
-    zoomOutTitle: string;
-    showZoom: boolean;
-}
-export { Zoom };
-export default class Zoom extends Control<IZoomControlOption> {
-    private disabled;
-    private zoomInButton;
-    private zoomOutButton;
-    private zoomNumDiv;
-    getDefault(option: Partial<IZoomControlOption>): {
-        position: PositionType;
-        name: string;
-        zoomInText: SVGSVGElement;
-        zoomInTitle: string;
-        zoomOutText: SVGSVGElement;
-        zoomOutTitle: string;
-        showZoom: boolean;
-        className?: string | undefined;
-        style?: string | undefined;
-    };
-    setOptions(newOptions: Partial<IZoomControlOption>): void;
-    onAdd(): HTMLElement;
-    onRemove(): void;
-    disable(): this;
-    enable(): this;
-    zoomIn: () => void;
-    zoomOut: () => void;
-    private resetButtonGroup;
-    private createButton;
-    private updateDisabled;
-}