@antv/l7-component 2.25.7 → 2.25.9

package/es/control/scale.d.ts

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,121 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,392 @@
+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

@@ -0,0 +1,39 @@
+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;
+}