@antv/l7-component 2.25.5 → 2.25.7

package/es/marker.js

@@ -1,495 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { DOM, anchorTranslate, anchorType, applyAnchorClass, bindAll, isPC } from '@antv/l7-utils';
-import { EventEmitter } from 'eventemitter3';
-
-//  marker 支持 dragger 未完成
-export default class Marker extends EventEmitter {
-  // tslint:disable-next-line: no-empty
-  getMarkerLayerContainerSize() {}
-  constructor(option) {
-    super();
-    _defineProperty(this, "markerOption", void 0);
-    _defineProperty(this, "popup", void 0);
-    _defineProperty(this, "mapsService", void 0);
-    _defineProperty(this, "lngLat", void 0);
-    _defineProperty(this, "scene", void 0);
-    _defineProperty(this, "added", false);
-    _defineProperty(this, "preLngLat", {
-      lng: 0,
-      lat: 0
-    });
-    _defineProperty(this, "visible", true);
-    _defineProperty(this, "onMarkerDragStart", e => {
-      const mapContainer = this.mapsService.getContainer();
-      if (!mapContainer) {
-        return;
-      }
-      this.mapsService.setMapStatus({
-        dragEnable: false,
-        zoomEnable: false
-      });
-      const {
-        left: containerX,
-        top: containerY
-      } = mapContainer.getClientRects()[0];
-      const {
-        x: clickX,
-        y: clickY
-      } = e;
-      this.preLngLat = this.mapsService.containerToLngLat([clickX - containerX, clickY - containerY]);
-      this.mapsService.on('mousemove', this.onMarkerDragMove);
-      document.addEventListener('mouseup', this.onMarkerDragEnd);
-      this.emit('dragstart', this.lngLat);
-    });
-    _defineProperty(this, "onMarkerDragMove", e => {
-      // 适配不同底图，事件返回的数据名称不一致
-      const lngLat = e.lngLat || e.lnglat;
-      const {
-        lng: preLng,
-        lat: preLat
-      } = this.preLngLat;
-      const {
-        lng: curLng,
-        lat: curLat
-      } = lngLat;
-      const newLngLat = {
-        lng: this.lngLat.lng + curLng - preLng,
-        lat: this.lngLat.lat + curLat - preLat
-      };
-      this.setLnglat(newLngLat);
-      this.preLngLat = lngLat;
-      this.emit('dragging', newLngLat);
-    });
-    _defineProperty(this, "onMarkerDragEnd", () => {
-      this.mapsService.setMapStatus({
-        dragEnable: true,
-        zoomEnable: true
-      });
-      this.mapsService.off('mousemove', this.onMarkerDragMove);
-      document.removeEventListener('mouseup', this.onMarkerDragEnd);
-      this.emit('dragend', this.lngLat);
-    });
-    _defineProperty(this, "eventHandle", e => {
-      this.polyfillEvent(e);
-      this.emit(e.type, {
-        target: e,
-        data: this.markerOption.extData,
-        lngLat: this.lngLat
-      });
-    });
-    /**
-     * 高德 2.x 使用了 fastClick.js 避免延迟，导致 IOS 移动端的 click 事件不会正常触发，需要手动触发
-     * @param e
-     */
-    _defineProperty(this, "touchStartTime", void 0);
-    this.markerOption = _objectSpread(_objectSpread({}, this.getDefault()), option);
-    bindAll(['update', 'onMove', 'onMapClick', 'updatePositionWhenZoom'], this);
-    this.init();
-  }
-  getDefault() {
-    return {
-      element: undefined,
-      // DOM element
-      anchor: anchorType.BOTTOM,
-      offsets: [0, 0],
-      color: '#5B8FF9',
-      draggable: false,
-      overflowHide: true
-    };
-  }
-  addTo(scene) {
-    this.scene = scene;
-    this.mapsService = scene.mapService;
-    const {
-      element
-    } = this.markerOption;
-    this.mapsService.getMarkerContainer().appendChild(element);
-    this.registerMarkerEvent(element);
-    // marker 不再在自身注册地图相机事件，以避免为每个 marker 注册大量底层 map 监听器。
-    // 由 MarkerLayer 在 addTo 时统一注册并在相机变化时调用每个 marker.update()。
-    this.update();
-    this.updateDraggable();
-    this.added = true;
-    this.emit('added');
-    return this;
-  }
-  remove() {
-    if (this.mapsService) {
-      // 不再负责移除地图级别的 update 监听（由 MarkerLayer 管理），移除地图事件请统一通过 layer
-    }
-    this.unRegisterMarkerEvent();
-    this.removeAllListeners();
-    const {
-      element
-    } = this.markerOption;
-    if (element) {
-      DOM.remove(element);
-    }
-    if (this.popup) {
-      this.popup.remove();
-    }
-    return this;
-  }
-
-  /**
-   * Hide the marker visually but keep it in the layer's data structures.
-   */
-  hide() {
-    const {
-      element
-    } = this.markerOption;
-    if (element) {
-      element.style.display = 'none';
-    }
-    this.visible = false;
-    return this;
-  }
-
-  /**
-   * Show the marker if it was hidden.
-   */
-  show() {
-    const {
-      element
-    } = this.markerOption;
-    if (element) {
-      element.style.display = 'block';
-    }
-    this.visible = true;
-    // re-position after showing
-    this.update();
-    return this;
-  }
-  setLnglat(lngLat) {
-    this.lngLat = lngLat;
-    if (Array.isArray(lngLat)) {
-      this.lngLat = {
-        lng: lngLat[0],
-        lat: lngLat[1]
-      };
-    }
-    if (this.popup) {
-      this.popup.setLnglat(this.lngLat);
-    }
-    this.update();
-    return this;
-  }
-  getLnglat() {
-    return this.lngLat;
-  }
-  getElement() {
-    return this.markerOption.element;
-  }
-  setElement(el) {
-    if (!this.added) {
-      this.once('added', () => {
-        this.setElement(el);
-      });
-      return this;
-    }
-    const {
-      element
-    } = this.markerOption;
-    if (element) {
-      DOM.remove(element);
-    }
-    this.markerOption.element = el;
-    this.init();
-    this.mapsService.getMarkerContainer().appendChild(el);
-    this.registerMarkerEvent(el);
-    this.updateDraggable();
-    this.update();
-    return this;
-  }
-  openPopup() {
-    if (!this.added) {
-      this.once('added', () => {
-        this.openPopup();
-      });
-      return this;
-    }
-    const popup = this.popup;
-    if (!popup) {
-      return this;
-    }
-    if (!popup.isOpen()) {
-      popup.addTo(this.scene);
-    }
-    return this;
-  }
-  closePopup() {
-    if (!this.added) {
-      this.once('added', () => {
-        this.closePopup();
-      });
-    }
-    const popup = this.popup;
-    if (popup) {
-      popup.remove();
-    }
-    return this;
-  }
-  setPopup(popup) {
-    this.popup = popup;
-    if (this.lngLat) {
-      this.popup.setLnglat(this.lngLat);
-    }
-    return this;
-  }
-  togglePopup() {
-    const popup = this.popup;
-    if (!popup) {
-      return this;
-    } else if (popup.isOpen()) {
-      popup.remove();
-    } else {
-      popup.addTo(this.scene);
-    }
-    return this;
-  }
-  getPopup() {
-    return this.popup;
-  }
-  getOffset() {
-    return this.markerOption.offsets;
-  }
-  setDraggable(draggable) {
-    this.markerOption.draggable = draggable;
-    this.updateDraggable();
-  }
-  getDraggable() {
-    return this.markerOption.draggable;
-  }
-  getExtData() {
-    return this.markerOption.extData;
-  }
-  setExtData(data) {
-    this.markerOption.extData = data;
-  }
-  update() {
-    if (!this.mapsService) {
-      return;
-    }
-    const {
-      element,
-      anchor
-    } = this.markerOption;
-    this.updatePosition();
-    DOM.setTransform(element, `${anchorTranslate[anchor]}`);
-  }
-  //天地图在开始缩放时触发 更新目标位置时添加过渡效果
-  updatePositionWhenZoom(ev) {
-    if (!this.mapsService) {
-      return;
-    }
-    const {
-      element,
-      offsets
-    } = this.markerOption;
-    const {
-      lng,
-      lat
-    } = this.lngLat;
-    if (!this.visible) {
-      return;
-    }
-    if (element) {
-      element.style.display = 'block';
-      element.style.whiteSpace = 'nowrap';
-      const {
-        containerHeight,
-        containerWidth,
-        bounds
-      } = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize();
-      if (!bounds) {
-        return;
-      }
-      const map = ev.map;
-      const center = ev.center;
-      const zoom = ev.zoom;
-      const projectedCenter = map.DE(this.lngLat, zoom, center);
-      projectedCenter.x = Math.round(projectedCenter.x + offsets[0]);
-      projectedCenter.y = Math.round(projectedCenter.y - offsets[1]);
-      // 当前可视区域包含跨日界线
-      if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
-        if (projectedCenter.x > containerWidth) {
-          // 日界线右侧点左移
-          const newPos = this.mapsService.lngLatToContainer([lng - 360, lat]);
-          projectedCenter.x = newPos.x;
-        }
-        if (projectedCenter.x < 0) {
-          // 日界线左侧点右移
-          const newPos = this.mapsService.lngLatToContainer([lng + 360, lat]);
-          projectedCenter.x = newPos.x;
-        }
-      }
-      if (projectedCenter.x > containerWidth || projectedCenter.x < 0 || projectedCenter.y > containerHeight || projectedCenter.y < 0) {
-        element.style.display = 'none';
-      }
-      element.style.left = projectedCenter.x + 'px';
-      element.style.top = projectedCenter.y + 'px';
-      element.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)';
-    }
-  }
-  onMapClick(e) {
-    const {
-      element
-    } = this.markerOption;
-    if (this.popup && element) {
-      this.togglePopup();
-    }
-  }
-  getCurrentContainerSize() {
-    const container = this.mapsService.getContainer();
-    return {
-      containerHeight: (container === null || container === void 0 ? void 0 : container.scrollHeight) || 0,
-      containerWidth: (container === null || container === void 0 ? void 0 : container.scrollWidth) || 0,
-      bounds: this.mapsService.getBounds()
-    };
-  }
-  updateDraggable() {
-    const {
-      element
-    } = this.markerOption;
-    element === null || element === void 0 || element.removeEventListener('mousedown', this.onMarkerDragStart);
-    this.mapsService.off('mousemove', this.onMarkerDragMove);
-    document.removeEventListener('mouseup', this.onMarkerDragEnd);
-    if (this.markerOption.draggable) {
-      element === null || element === void 0 || element.addEventListener('mousedown', this.onMarkerDragStart);
-    }
-  }
-  updatePosition() {
-    if (!this.mapsService) {
-      return;
-    }
-    const {
-      element,
-      offsets
-    } = this.markerOption;
-    const {
-      lng,
-      lat
-    } = this.lngLat;
-    const pos = this.mapsService.lngLatToContainer([lng, lat]);
-    if (!this.visible) {
-      // remain hidden until show() is called
-      if (element) {
-        element.style.display = 'none';
-      }
-      return;
-    }
-    if (element) {
-      element.style.display = 'block';
-      element.style.whiteSpace = 'nowrap';
-      const {
-        containerHeight,
-        containerWidth,
-        bounds
-      } = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize();
-      if (!bounds) {
-        return;
-      }
-      // 当前可视区域包含跨日界线
-      if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
-        if (pos.x > containerWidth) {
-          // 日界线右侧点左移
-          const newPos = this.mapsService.lngLatToContainer([lng - 360, lat]);
-          pos.x = newPos.x;
-        }
-        if (pos.x < 0) {
-          // 日界线左侧点右移
-          const newPos = this.mapsService.lngLatToContainer([lng + 360, lat]);
-          pos.x = newPos.x;
-        }
-      }
-      if (this.markerOption.overflowHide) {
-        // 不在当前可视区域内隐藏点
-        if (pos.x > containerWidth || pos.x < 0 || pos.y > containerHeight || pos.y < 0) {
-          element.style.display = 'none';
-        }
-      }
-      element.style.left = pos.x + offsets[0] + 'px';
-      element.style.top = pos.y - offsets[1] + 'px';
-    }
-  }
-  init() {
-    let {
-      element
-    } = this.markerOption;
-    const {
-      color,
-      anchor
-    } = this.markerOption;
-    if (!element) {
-      element = DOM.create('div');
-      this.markerOption.element = element;
-      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      svg.setAttributeNS(null, 'display', 'block');
-      svg.setAttributeNS(null, 'height', '48px');
-      svg.setAttributeNS(null, 'width', '48px');
-      svg.setAttributeNS(null, 'viewBox', '0 0 1024 1024');
-      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      path.setAttributeNS(null, 'd', 'M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z');
-      path.setAttributeNS(null, 'fill', color);
-      svg.appendChild(path);
-      element.appendChild(svg);
-    }
-    DOM.addClass(element, 'l7-marker');
-    Object.keys(this.markerOption.style || {}).forEach(
-    // @ts-ignore
-    key => {
-      var _this$markerOption, _this$markerOption2;
-      const value = ((_this$markerOption = this.markerOption) === null || _this$markerOption === void 0 ? void 0 : _this$markerOption.style) && ((_this$markerOption2 = this.markerOption) === null || _this$markerOption2 === void 0 ? void 0 : _this$markerOption2.style[key]);
-      if (element) {
-        // @ts-ignore
-        element.style[key] = value;
-      }
-    });
-    applyAnchorClass(element, anchor, 'marker');
-  }
-  registerMarkerEvent(element) {
-    element.addEventListener('click', this.onMapClick);
-    element.addEventListener('mousemove', this.eventHandle);
-    element.addEventListener('click', this.eventHandle);
-    element.addEventListener('mousedown', this.eventHandle);
-    element.addEventListener('mouseup', this.eventHandle);
-    element.addEventListener('dblclick', this.eventHandle);
-    element.addEventListener('contextmenu', this.eventHandle);
-    element.addEventListener('mouseover', this.eventHandle);
-    element.addEventListener('mouseout', this.eventHandle);
-    element.addEventListener('touchstart', this.eventHandle);
-    element.addEventListener('touchend', this.eventHandle);
-  }
-  unRegisterMarkerEvent() {
-    const element = this.getElement();
-    element.removeEventListener('click', this.onMapClick);
-    element.removeEventListener('mousemove', this.eventHandle);
-    element.removeEventListener('click', this.eventHandle);
-    element.removeEventListener('mousedown', this.eventHandle);
-    element.removeEventListener('mouseup', this.eventHandle);
-    element.removeEventListener('dblclick', this.eventHandle);
-    element.removeEventListener('contextmenu', this.eventHandle);
-    element.removeEventListener('mouseover', this.eventHandle);
-    element.removeEventListener('mouseout', this.eventHandle);
-    element.removeEventListener('touchstart', this.eventHandle);
-    element.removeEventListener('touchend', this.eventHandle);
-  }
-  polyfillEvent(e) {
-    if (!this.mapsService || this.mapsService.getType() !== 'amap') {
-      return;
-    }
-    if (!isPC()) {
-      if (e.type === 'touchstart') {
-        this.touchStartTime = Date.now();
-      }
-      if (e.type === 'touchend' && Date.now() - this.touchStartTime < 300) {
-        this.emit('click', {
-          target: e,
-          data: this.markerOption.extData,
-          lngLat: this.lngLat
-        });
-      }
-    }
-  }
-}

package/es/popup/layerPopup.d.ts

@@ -1,105 +0,0 @@
-import type { ILayer, IPopupOption, L7Container } from '@antv/l7-core';
-import { DOM } from '@antv/l7-utils';
-import Popup from './popup';
-type ElementType = DOM.ElementType;
-export type LayerField = {
-    field: string;
-    formatField?: ElementType | ((field: string, feature: any) => ElementType);
-    formatValue?: ElementType | ((value: any, feature: any) => ElementType);
-    getValue?: (feature: any) => any;
-};
-export type LayerPopupConfigItem = {
-    layer: ILayer | string;
-    fields?: Array<LayerField | string>;
-    title?: ElementType | ((feature: any) => ElementType);
-    customContent?: ElementType | ((feature: any) => ElementType);
-};
-export interface ILayerPopupOption extends IPopupOption {
-    config?: LayerPopupConfigItem[];
-    items?: LayerPopupConfigItem[];
-    trigger?: 'hover' | 'click' | 'touchend' | 'touchstart';
-}
-type LayerMapInfo = {
-    onMouseMove?: (layer: ILayer, e: any) => void;
-    onMouseOut?: (layer: ILayer, e: any) => void;
-    onClick?: (layer: ILayer, e: any) => void;
-    onSourceUpdate?: (layer: ILayer) => void;
-} & Partial<LayerPopupConfigItem>;
-export { LayerPopup };
-export default class LayerPopup extends Popup<ILayerPopupOption> {
-    /**
-     * 用于统计当前帧当中，layer 被点击的次数
-     */
-    protected layerClickCountByFrame: number;
-    /**
-     * 用于保存图层对应的事件回调以及配置信息
-     * @protected
-     */
-    protected layerConfigMap: WeakMap<ILayer, LayerMapInfo>;
-    /**
-     * 当期正在展示的图层以及对应元素 id 的信息
-     * @protected
-     */
-    protected displayFeatureInfo?: {
-        layer: ILayer;
-        featureId: number;
-    };
-    protected get layerConfigItems(): LayerPopupConfigItem[];
-    /**
-     * 根据环境获取实际的触发事件
-     * 当 trigger 为 'click' 时，移动端使用 'touchend'，PC 端使用 'click'
-     * @protected
-     */
-    protected getActualTriggerEvent(): 'hover' | 'click' | 'touchend' | 'touchstart';
-    addTo(scene: L7Container): this;
-    remove(): this;
-    setOptions(option: Partial<ILayerPopupOption>): this;
-    protected getDefault(option: Partial<ILayerPopupOption>): ILayerPopupOption;
-    /**
-     * 绑定对应的图层事件
-     * @protected
-     */
-    protected bindLayerEvent(): void;
-    /**
-     * 解绑对应的图层事件
-     * @protected
-     */
-    protected unbindLayerEvent(): void;
-    protected onLayerMouseMove(layer: ILayer, e: any): void;
-    protected onLayerMouseOut(layer: ILayer): void;
-    protected onLayerClick: (layer: ILayer, e: any) => void;
-    protected onSceneClick: () => void;
-    protected onSourceUpdate(): void;
-    /**
-     * 通过当前图层和对应选中的元素获取气泡展示的 HTML 内容
-     * @param layer
-     * @param e
-     * @protected
-     */
-    protected getLayerInfoFrag(layer: ILayer, e: any): {
-        title: DocumentFragment | undefined;
-        content: DocumentFragment;
-    };
-    /**
-     * 通过 Layer 配置访问到真实的 Layer 实例
-     * @param configItem
-     * @protected
-     */
-    protected getLayerByConfig(configItem: LayerPopupConfigItem): ILayer | undefined;
-    /**
-     * 判断当前展示的 Feature 是否和上一次查看的一致
-     * @param layer
-     * @param featureId
-     * @protected
-     */
-    protected isSameFeature(layer: ILayer, featureId: number): boolean | undefined;
-    protected setDisplayFeatureInfo(displayFeatureInfo?: {
-        layer: ILayer;
-        featureId: number;
-    }): void;
-    protected onLayerHide: () => void;
-    /**
-     * 覆盖 Popup 中的默认的 closeOnClick 行为
-     */
-    protected updateCloseOnClick: () => void;
-}