@antv/l7-component 2.25.7 → 2.25.10

package/lib/popup/layerPopup.js

@@ -0,0 +1,348 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LayerPopup = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _l7Utils = require("@antv/l7-utils");
+var _popup = _interopRequireDefault(require("./popup"));
+const {
+  get
+} = _l7Utils.lodashUtil;
+class LayerPopup extends _popup.default {
+  constructor(...args) {
+    super(...args);
+    /**
+     * 用于统计当前帧当中，layer 被点击的次数
+     */
+    (0, _defineProperty2.default)(this, "layerClickCountByFrame", 0);
+    /**
+     * 用于保存图层对应的事件回调以及配置信息
+     * @protected
+     */
+    (0, _defineProperty2.default)(this, "layerConfigMap", new WeakMap());
+    /**
+     * 当期正在展示的图层以及对应元素 id 的信息
+     * @protected
+     */
+    (0, _defineProperty2.default)(this, "displayFeatureInfo", void 0);
+    (0, _defineProperty2.default)(this, "onLayerClick", (layer, e) => {
+      requestAnimationFrame(() => {
+        if (this.popupOption.closeOnClick) {
+          this.layerClickCountByFrame++;
+        }
+        if (this.isShow && this.isSameFeature(layer, e.featureId)) {
+          this.hide();
+        } else {
+          const {
+            title,
+            content
+          } = this.getLayerInfoFrag(layer, e);
+          this.setDOMContent(content);
+          this.setLnglat(e.lngLat);
+          this.setTitle(title);
+          this.setDisplayFeatureInfo({
+            layer,
+            featureId: e.featureId
+          });
+          this.show();
+        }
+      });
+    });
+    (0, _defineProperty2.default)(this, "onSceneClick", () => {
+      this.layerClickCountByFrame = 0;
+      requestAnimationFrame(() => {
+        if (!this.layerClickCountByFrame) {
+          this.hide();
+        }
+      });
+    });
+    (0, _defineProperty2.default)(this, "onLayerHide", () => {
+      this.hide();
+      this.setDisplayFeatureInfo(undefined);
+    });
+    /**
+     * 覆盖 Popup 中的默认的 closeOnClick 行为
+     */
+    // tslint:disable-next-line:no-empty
+    (0, _defineProperty2.default)(this, "updateCloseOnClick", () => {});
+  }
+  get layerConfigItems() {
+    var _ref;
+    const {
+      config,
+      items
+    } = this.popupOption;
+    return (_ref = config !== null && config !== void 0 ? config : items) !== null && _ref !== void 0 ? _ref : [];
+  }
+
+  /**
+   * 根据环境获取实际的触发事件
+   * 当 trigger 为 'click' 时，移动端使用 'touchend'，PC 端使用 'click'
+   * @protected
+   */
+  getActualTriggerEvent() {
+    var _this$popupOption$tri;
+    const trigger = (_this$popupOption$tri = this.popupOption.trigger) !== null && _this$popupOption$tri !== void 0 ? _this$popupOption$tri : 'hover';
+    if (trigger === 'click') {
+      return (0, _l7Utils.isPC)() ? 'click' : 'touchend';
+    }
+    return trigger;
+  }
+  addTo(scene) {
+    super.addTo(scene);
+    this.bindLayerEvent();
+    this.hide();
+    return this;
+  }
+  remove() {
+    super.remove();
+    this.unbindLayerEvent();
+    return this;
+  }
+  setOptions(option) {
+    this.unbindLayerEvent();
+    const newOption = (0, _objectSpread2.default)({}, option);
+    const trigger = newOption.trigger || this.popupOption.trigger;
+    const items = newOption.items || this.popupOption.items;
+    const isEmptyItems = (items === null || items === void 0 ? void 0 : items.length) === 0;
+    newOption.followCursor = trigger === 'hover' && !isEmptyItems;
+    const isShow = this.isShow;
+    super.setOptions(newOption);
+    this.bindLayerEvent();
+    if (isEmptyItems || !isShow) {
+      this.hide();
+    }
+    return this;
+  }
+  getDefault(option) {
+    var _option$trigger;
+    // trigger 默认值为 'hover'
+    const trigger = (_option$trigger = option.trigger) !== null && _option$trigger !== void 0 ? _option$trigger : 'hover';
+    const isHoverTrigger = trigger === 'hover';
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, super.getDefault(option)), {}, {
+      trigger,
+      followCursor: isHoverTrigger,
+      lngLat: {
+        lng: 0,
+        lat: 0
+      },
+      offsets: [0, 10],
+      closeButton: false,
+      closeOnClick: true,
+      autoClose: false,
+      closeOnEsc: false
+    });
+  }
+
+  /**
+   * 绑定对应的图层事件
+   * @protected
+   */
+  bindLayerEvent() {
+    const {
+      trigger,
+      closeOnClick
+    } = this.popupOption;
+    const actualTrigger = this.getActualTriggerEvent();
+    this.layerConfigItems.forEach(configItem => {
+      var _layer$getSource;
+      const layer = this.getLayerByConfig(configItem);
+      if (!layer) {
+        return;
+      }
+      const layerInfo = (0, _objectSpread2.default)({}, configItem);
+      if (trigger === 'hover') {
+        const onMouseMove = this.onLayerMouseMove.bind(this, layer);
+        const onMouseOut = this.onLayerMouseOut.bind(this, layer);
+        layerInfo.onMouseMove = onMouseMove;
+        layerInfo.onMouseOut = onMouseOut;
+        layer === null || layer === void 0 || layer.on('mousemove', onMouseMove);
+        layer === null || layer === void 0 || layer.on('mouseout', onMouseOut);
+      } else {
+        var _this$mapsService;
+        const onLayerClick = this.onLayerClick.bind(this, layer);
+        layerInfo.onClick = onLayerClick;
+        layer === null || layer === void 0 || layer.on(actualTrigger, onLayerClick);
+        const mapContainer = (_this$mapsService = this.mapsService) === null || _this$mapsService === void 0 ? void 0 : _this$mapsService.getMapContainer();
+        if (mapContainer && closeOnClick) {
+          mapContainer.addEventListener(actualTrigger, this.onSceneClick);
+        }
+      }
+      const source = layer === null || layer === void 0 || (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
+      const onSourceUpdate = this.onSourceUpdate.bind(this);
+      source === null || source === void 0 || source.on('update', onSourceUpdate);
+      layerInfo.onSourceUpdate = onSourceUpdate;
+      this.layerConfigMap.set(layer, layerInfo);
+    });
+  }
+
+  /**
+   * 解绑对应的图层事件
+   * @protected
+   */
+  unbindLayerEvent() {
+    const actualTrigger = this.getActualTriggerEvent();
+    this.layerConfigItems.forEach(configItem => {
+      var _this$mapsService2;
+      const layer = this.getLayerByConfig(configItem);
+      const layerInfo = layer && this.layerConfigMap.get(layer);
+      if (!layerInfo) {
+        return;
+      }
+      const {
+        onMouseMove,
+        onMouseOut,
+        onClick,
+        onSourceUpdate
+      } = layerInfo;
+      if (onMouseMove) {
+        layer.off('mousemove', onMouseMove);
+      }
+      if (onMouseOut) {
+        layer.off('mouseout', onMouseOut);
+      }
+      if (onClick) {
+        layer.off(actualTrigger, onClick);
+      }
+      if (onSourceUpdate) {
+        var _layer$getSource2;
+        layer === null || layer === void 0 || (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 || _layer$getSource2.off('update', onSourceUpdate);
+      }
+      const mapContainer = (_this$mapsService2 = this.mapsService) === null || _this$mapsService2 === void 0 ? void 0 : _this$mapsService2.getMapContainer();
+      if (mapContainer) {
+        mapContainer.removeEventListener(actualTrigger, this.onSceneClick);
+      }
+    });
+  }
+  onLayerMouseMove(layer, e) {
+    if (!this.isSameFeature(layer, e.featureId)) {
+      const {
+        title,
+        content
+      } = this.getLayerInfoFrag(layer, e);
+      this.setDOMContent(content);
+      this.setTitle(title);
+      this.setDisplayFeatureInfo({
+        layer,
+        featureId: e.featureId
+      });
+      this.show();
+    }
+  }
+  onLayerMouseOut(layer) {
+    this.setDisplayFeatureInfo(undefined);
+    if (this.isShow) {
+      this.hide();
+    }
+  }
+  onSourceUpdate() {
+    this.hide();
+    this.setDisplayFeatureInfo(undefined);
+  }
+
+  /**
+   * 通过当前图层和对应选中的元素获取气泡展示的 HTML 内容
+   * @param layer
+   * @param e
+   * @protected
+   */
+  getLayerInfoFrag(layer, e) {
+    const layerInfo = this.layerConfigMap.get(layer);
+    let titleFrag;
+    const contentFrag = document.createDocumentFragment();
+    if (layerInfo) {
+      let feature = e.feature;
+      if (feature.type === 'Feature' && 'properties' in feature && 'geometry' in feature) {
+        feature = feature.properties;
+      }
+      const {
+        title,
+        fields,
+        customContent
+      } = layerInfo;
+      if (title) {
+        titleFrag = document.createDocumentFragment();
+        const titleElement = title instanceof Function ? title(feature) : title;
+        _l7Utils.DOM.appendElementType(titleFrag, titleElement);
+      }
+      if (customContent) {
+        const content = customContent instanceof Function ? customContent(feature) : customContent;
+        _l7Utils.DOM.appendElementType(contentFrag, content);
+      } else if (fields !== null && fields !== void 0 && fields.length) {
+        fields === null || fields === void 0 || fields.forEach(fieldConfig => {
+          var _ref2, _ref3;
+          const {
+            field,
+            formatField,
+            formatValue,
+            getValue
+          } = typeof fieldConfig === 'string' ?
+          // tslint:disable-next-line:no-object-literal-type-assertion
+          {
+            field: fieldConfig
+          } : fieldConfig;
+          const row = _l7Utils.DOM.create('div', 'l7-layer-popup__row');
+          const value = getValue ? getValue(e.feature) : get(feature, field);
+          const fieldElement = (_ref2 = formatField instanceof Function ? formatField(field, feature) : formatField) !== null && _ref2 !== void 0 ? _ref2 : field;
+          let valueElement = (_ref3 = formatValue instanceof Function ? formatValue(value, feature) : formatValue) !== null && _ref3 !== void 0 ? _ref3 : value;
+          const fieldSpan = _l7Utils.DOM.create('span', 'l7-layer-popup__key', row);
+          _l7Utils.DOM.appendElementType(fieldSpan, fieldElement);
+          _l7Utils.DOM.appendElementType(fieldSpan, document.createTextNode('：'));
+          const valueSpan = _l7Utils.DOM.create('span', 'l7-layer-popup__value', row);
+
+          // 当 value 中每项元素均为基础数据类型时，用逗号隔开
+          if (Array.isArray(valueElement) && valueElement.every(item => !(item instanceof Object))) {
+            valueElement = valueElement.map(item => String(item)).join(',');
+          }
+          _l7Utils.DOM.appendElementType(valueSpan, valueElement);
+          contentFrag.appendChild(row);
+        });
+      }
+    }
+    return {
+      title: titleFrag,
+      content: contentFrag
+    };
+  }
+
+  /**
+   * 通过 Layer 配置访问到真实的 Layer 实例
+   * @param configItem
+   * @protected
+   */
+  getLayerByConfig(configItem) {
+    const layer = configItem.layer;
+    if (layer instanceof Object) {
+      return layer;
+    }
+    if (typeof layer === 'string') {
+      return this.layerService.getLayer(layer) || this.layerService.getLayerByName(layer);
+    }
+  }
+
+  /**
+   * 判断当前展示的 Feature 是否和上一次查看的一致
+   * @param layer
+   * @param featureId
+   * @protected
+   */
+  isSameFeature(layer, featureId) {
+    const displayFeatureInfo = this.displayFeatureInfo;
+    return displayFeatureInfo && layer === displayFeatureInfo.layer && featureId === displayFeatureInfo.featureId;
+  }
+  setDisplayFeatureInfo(displayFeatureInfo) {
+    const oldDisplayFeatureInfo = this.displayFeatureInfo;
+    if (oldDisplayFeatureInfo) {
+      oldDisplayFeatureInfo.layer.off('hide', this.onLayerHide);
+    }
+    if (displayFeatureInfo) {
+      displayFeatureInfo.layer.on('hide', this.onLayerHide);
+    }
+    this.displayFeatureInfo = displayFeatureInfo;
+  }
+}
+exports.default = exports.LayerPopup = LayerPopup;

package/lib/popup/popup.d.ts

@@ -0,0 +1,147 @@
+import type { ILayerService, ILngLat, IMapService, IPopup, IPopupOption, ISceneService, L7Container } from '@antv/l7-core';
+import { DOM } from '@antv/l7-utils';
+import { EventEmitter } from 'eventemitter3';
+type ElementType = DOM.ElementType;
+export { Popup };
+export default class Popup<O extends IPopupOption = IPopupOption> extends EventEmitter implements IPopup {
+    /**
+     * 配置
+     * @protected
+     */
+    protected popupOption: O;
+    protected mapsService: IMapService;
+    protected sceneService: ISceneService;
+    protected layerService: ILayerService;
+    protected scene: L7Container;
+    /**
+     * 关闭按钮对应的 DOM
+     * @protected
+     */
+    protected closeButton?: HTMLElement | SVGElement;
+    /**
+     * Popup 的总容器 DOM，包含 content 和 tip
+     * @protected
+     */
+    protected container: HTMLElement;
+    /**
+     * popup 气泡容器
+     * @protected
+     */
+    protected content: HTMLElement;
+    /**
+     * popup 气泡标题
+     * @protected
+     */
+    protected contentTitle?: HTMLElement;
+    /**
+     * popup 内容容器
+     * @protected
+     */
+    protected contentPanel: HTMLElement;
+    /**
+     * 气泡箭头对应的 DOM
+     * @protected
+     */
+    protected tip: HTMLElement;
+    /**
+     * 当前是否展示
+     * @protected
+     */
+    protected isShow: boolean;
+    /**
+     * RAF 节流 ID
+     * @protected
+     */
+    protected rafId: number | null;
+    protected get lngLat(): ILngLat;
+    protected set lngLat(newLngLat: ILngLat);
+    constructor(cfg?: Partial<O>);
+    getIsShow(): boolean;
+    addTo(scene: L7Container): this;
+    remove(): this | undefined;
+    /**
+     * 获取 option 配置
+     */
+    getOptions(): O;
+    setOptions(option: Partial<O>): this;
+    open(): this;
+    close(): this;
+    show(): this | undefined;
+    hide(): this | undefined;
+    /**
+     * 设置 HTML 内容
+     * @param html
+     */
+    setHTML(html: ElementType): this;
+    /**
+     * 设置 Popup 展示文本
+     * @param text
+     */
+    setText(text: string): this;
+    setTitle(title?: ElementType): void;
+    /**
+     * 将地图自动平移到气泡位置
+     */
+    panToPopup(): this;
+    setLngLat(lngLat: ILngLat | [number, number]): this;
+    /**
+     * 设置 Popup 所在经纬度
+     * @param lngLat
+     */
+    setLnglat(lngLat: ILngLat | [number, number]): this;
+    /**
+     * 获取 Popup 所在经纬度
+     */
+    getLnglat(): ILngLat;
+    /**
+     * 设置 Popup 最大宽度
+     * @param maxWidth
+     */
+    setMaxWidth(maxWidth: string): this;
+    isOpen(): boolean;
+    protected onMouseMove: (e: MouseEvent) => void;
+    /**
+     * 将经纬度转换成对应的像素偏移位置
+     * @protected
+     */
+    protected updateLngLatPosition: () => void;
+    protected updateLngLatPositionWhenZoom: (ev: any) => void;
+    protected getDefault(option: Partial<O>): O;
+    /**
+     * 设置 Popup 内容 HTML
+     * @param element
+     */
+    protected setDOMContent(element: ElementType): this;
+    /**
+     * 绑定地图点击事件触发销毁 Popup
+     * @protected
+     */
+    protected updateCloseOnClick(onlyClear?: boolean): void;
+    protected updateCloseOnEsc(onlyClear?: boolean): void;
+    protected updateFollowCursor(onlyClear?: boolean): void;
+    protected onKeyDown: (e: KeyboardEvent) => void;
+    /**
+     * 创建 Popup 内容容器的 DOM （在每次 setHTML 或 setText 时都会被调用）
+     * @protected
+     */
+    protected createContent(): void;
+    protected onCloseButtonClick: (e: Event) => void;
+    private updatePosition;
+    protected updateWhenZoom: (ev: any) => void;
+    protected update: () => void;
+    /**
+     * 设置 Popup 相对于地图容器的 Position
+     * @param {Number} left
+     * @param {Number} top
+     * @param {Boolean} [useTransition=false] 是否使用过度效果
+     * @protected
+     */
+    protected setPopupPosition(left: number, top: number, useTransition?: boolean): void;
+    /**
+     * 检查当前传入 option 是否包含 keys 字段
+     * @param option
+     * @param keys
+     * @protected
+     */
+    protected checkUpdateOption(option: Partial<O>, keys: Array<keyof O>): boolean;
+}