@antv/l7-component 2.18.0 → 2.18.2

package/es/popup/layerPopup.js

@@ -1,312 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _get from "@babel/runtime/helpers/esm/get";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-import { DOM, lodashUtil } from '@antv/l7-utils';
-// import { Container } from 'inversify';
-import Popup from "./popup";
-var get = lodashUtil.get;
-export { LayerPopup };
-var LayerPopup = /*#__PURE__*/function (_Popup) {
-  _inherits(LayerPopup, _Popup);
-  var _super = _createSuper(LayerPopup);
-  function LayerPopup() {
-    var _this;
-    _classCallCheck(this, LayerPopup);
-    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));
-    /**
-     * 用于保存图层对应的事件回调以及配置信息
-     * @protected
-     */
-    _defineProperty(_assertThisInitialized(_this), "layerConfigMap", new WeakMap());
-    return _this;
-  }
-  _createClass(LayerPopup, [{
-    key: "layerConfigItems",
-    get:
-    /**
-     * 当期正在展示的图层以及对应元素 id 的信息
-     * @protected
-     */
-
-    function get() {
-      var _ref;
-      var _this$popupOption = this.popupOption,
-        config = _this$popupOption.config,
-        items = _this$popupOption.items;
-      return (_ref = config !== null && config !== void 0 ? config : items) !== null && _ref !== void 0 ? _ref : [];
-    }
-  }, {
-    key: "addTo",
-    value: function addTo(scene) {
-      _get(_getPrototypeOf(LayerPopup.prototype), "addTo", this).call(this, scene);
-      this.bindLayerEvent();
-      this.hide();
-      return this;
-    }
-  }, {
-    key: "remove",
-    value: function remove() {
-      _get(_getPrototypeOf(LayerPopup.prototype), "remove", this).call(this);
-      this.unbindLayerEvent();
-      return this;
-    }
-  }, {
-    key: "setOptions",
-    value: function setOptions(option) {
-      this.unbindLayerEvent();
-      _get(_getPrototypeOf(LayerPopup.prototype), "setOptions", this).call(this, option);
-      this.bindLayerEvent();
-      return this;
-    }
-  }, {
-    key: "getDefault",
-    value: function getDefault(option) {
-      var isClickTrigger = option.trigger === 'click';
-      return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(LayerPopup.prototype), "getDefault", this).call(this, option)), {}, {
-        trigger: 'hover',
-        followCursor: !isClickTrigger,
-        lngLat: {
-          lng: 0,
-          lat: 0
-        },
-        offsets: [0, 10],
-        closeButton: false,
-        closeOnClick: false,
-        autoClose: false,
-        closeOnEsc: false
-      });
-    }
-
-    /**
-     * 绑定对应的图层事件
-     * @protected
-     */
-  }, {
-    key: "bindLayerEvent",
-    value: function bindLayerEvent() {
-      var _this2 = this;
-      var trigger = this.popupOption.trigger;
-      this.layerConfigItems.forEach(function (configItem) {
-        var _layer$getSource;
-        var layer = _this2.getLayerByConfig(configItem);
-        if (!layer) {
-          return;
-        }
-        var layerInfo = _objectSpread({}, configItem);
-        if (trigger === 'hover') {
-          var onMouseMove = _this2.onLayerMouseMove.bind(_this2, layer);
-          var onMouseOut = _this2.onLayerMouseOut.bind(_this2, layer);
-          layerInfo.onMouseMove = onMouseMove;
-          layerInfo.onMouseOut = onMouseOut;
-          layer === null || layer === void 0 ? void 0 : layer.on('mousemove', onMouseMove);
-          layer === null || layer === void 0 ? void 0 : layer.on('mouseout', onMouseOut);
-        } else {
-          var onClick = _this2.onLayerClick.bind(_this2, layer);
-          layerInfo.onClick = onClick;
-          layer === null || layer === void 0 ? void 0 : layer.on('click', onClick);
-        }
-        var source = layer === null || layer === void 0 ? void 0 : (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
-        var onSourceUpdate = _this2.onSourceUpdate.bind(_this2, layer);
-        source === null || source === void 0 ? void 0 : source.on('update', onSourceUpdate);
-        layerInfo.onSourceUpdate = onSourceUpdate;
-        _this2.layerConfigMap.set(layer, layerInfo);
-      });
-    }
-
-    /**
-     * 解绑对应的图层事件
-     * @protected
-     */
-  }, {
-    key: "unbindLayerEvent",
-    value: function unbindLayerEvent() {
-      var _this3 = this;
-      this.layerConfigItems.forEach(function (configItem) {
-        var layer = _this3.getLayerByConfig(configItem);
-        var layerInfo = layer && _this3.layerConfigMap.get(layer);
-        if (!layerInfo) {
-          return;
-        }
-        var onMouseMove = layerInfo.onMouseMove,
-          onMouseOut = layerInfo.onMouseOut,
-          onClick = layerInfo.onClick,
-          onSourceUpdate = layerInfo.onSourceUpdate;
-        if (onMouseMove) {
-          layer.off('mousemove', onMouseMove);
-        }
-        if (onMouseOut) {
-          layer.off('mouseout', onMouseOut);
-        }
-        if (onClick) {
-          layer.off('click', onClick);
-        }
-        if (onSourceUpdate) {
-          var _layer$getSource2;
-          layer === null || layer === void 0 ? void 0 : (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 ? void 0 : _layer$getSource2.off('update', onSourceUpdate);
-        }
-      });
-    }
-  }, {
-    key: "onLayerMouseMove",
-    value: function onLayerMouseMove(layer, e) {
-      if (!this.isSameFeature(layer, e.featureId)) {
-        var _this$getLayerInfoFra = this.getLayerInfoFrag(layer, e),
-          title = _this$getLayerInfoFra.title,
-          content = _this$getLayerInfoFra.content;
-        this.setDOMContent(content);
-        this.setTitle(title);
-        this.displayFeatureInfo = {
-          layer: layer,
-          featureId: e.featureId
-        };
-        this.show();
-      }
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  }, {
-    key: "onLayerMouseOut",
-    value: function onLayerMouseOut(layer, e) {
-      this.displayFeatureInfo = undefined;
-      if (this.isShow) {
-        this.hide();
-      }
-    }
-  }, {
-    key: "onLayerClick",
-    value: function onLayerClick(layer, e) {
-      if (this.isShow && this.isSameFeature(layer, e.featureId)) {
-        this.hide();
-      } else {
-        var _this$getLayerInfoFra2 = this.getLayerInfoFrag(layer, e),
-          title = _this$getLayerInfoFra2.title,
-          content = _this$getLayerInfoFra2.content;
-        this.setDOMContent(content);
-        this.setLnglat(e.lngLat);
-        this.setTitle(title);
-        this.displayFeatureInfo = {
-          layer: layer,
-          featureId: e.featureId
-        };
-        this.show();
-      }
-    }
-  }, {
-    key: "onSourceUpdate",
-    value: function onSourceUpdate(layer) {
-      this.hide();
-      this.displayFeatureInfo = undefined;
-    }
-
-    /**
-     * 通过当前图层和对应选中的元素获取气泡展示的 HTML 内容
-     * @param layer
-     * @param e
-     * @protected
-     */
-  }, {
-    key: "getLayerInfoFrag",
-    value: function getLayerInfoFrag(layer, e) {
-      var layerInfo = this.layerConfigMap.get(layer);
-      var titleFrag;
-      var contentFrag = document.createDocumentFragment();
-      if (layerInfo) {
-        var _feature = e.feature;
-        if (_feature.type === 'Feature' && 'properties' in _feature && 'geometry' in _feature) {
-          _feature = _feature.properties;
-        }
-        var title = layerInfo.title,
-          fields = layerInfo.fields,
-          customContent = layerInfo.customContent;
-        if (title) {
-          titleFrag = document.createDocumentFragment();
-          var titleElement = title instanceof Function ? title(_feature) : title;
-          DOM.appendElementType(titleFrag, titleElement);
-        }
-        if (customContent) {
-          var content = customContent instanceof Function ? customContent(_feature) : customContent;
-          DOM.appendElementType(contentFrag, content);
-        } else if (fields !== null && fields !== void 0 && fields.length) {
-          fields === null || fields === void 0 ? void 0 : fields.forEach(function (fieldConfig) {
-            var _ref3, _ref4;
-            var _ref2 = typeof fieldConfig === 'string' ?
-              // tslint:disable-next-line:no-object-literal-type-assertion
-              {
-                field: fieldConfig
-              } : fieldConfig,
-              field = _ref2.field,
-              formatField = _ref2.formatField,
-              formatValue = _ref2.formatValue,
-              getValue = _ref2.getValue;
-            var row = DOM.create('div', 'l7-layer-popup__row');
-            var value = getValue ? getValue(e.feature) : get(_feature, field);
-            var fieldElement = (_ref3 = formatField instanceof Function ? formatField(field, _feature) : formatField) !== null && _ref3 !== void 0 ? _ref3 : field;
-            var valueElement = (_ref4 = formatValue instanceof Function ? formatValue(value, _feature) : formatValue) !== null && _ref4 !== void 0 ? _ref4 : value;
-            var fieldSpan = DOM.create('span', 'l7-layer-popup__key', row);
-            DOM.appendElementType(fieldSpan, fieldElement);
-            DOM.appendElementType(fieldSpan, document.createTextNode('：'));
-            var valueSpan = DOM.create('span', 'l7-layer-popup__value', row);
-
-            // 当 value 中每项元素均为基础数据类型时，用逗号隔开
-            if (Array.isArray(valueElement) && valueElement.every(function (item) {
-              return !(item instanceof Object);
-            })) {
-              valueElement = valueElement.map(function (item) {
-                return String(item);
-              }).join(',');
-            }
-            DOM.appendElementType(valueSpan, valueElement);
-            contentFrag.appendChild(row);
-          });
-        }
-      }
-      return {
-        title: titleFrag,
-        content: contentFrag
-      };
-    }
-
-    /**
-     * 通过 Layer 配置访问到真实的 Layer 实例
-     * @param configItem
-     * @protected
-     */
-  }, {
-    key: "getLayerByConfig",
-    value: function getLayerByConfig(configItem) {
-      var 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
-     */
-  }, {
-    key: "isSameFeature",
-    value: function isSameFeature(layer, featureId) {
-      var displayFeatureInfo = this.displayFeatureInfo;
-      return displayFeatureInfo && layer === displayFeatureInfo.layer && featureId === displayFeatureInfo.featureId;
-    }
-  }]);
-  return LayerPopup;
-}(Popup);
-export { LayerPopup as default };

package/es/popup/popup.d.ts

@@ -1,139 +0,0 @@
-import { ILayerService, ILngLat, IMapService, IPopup, IPopupOption, ISceneService } from '@antv/l7-core';
-import { DOM } from '@antv/l7-utils';
-import { EventEmitter } from 'eventemitter3';
-import { Container } from 'inversify';
-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: Container;
-    /**
-     * 关闭按钮对应的 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;
-    protected get lngLat(): ILngLat;
-    protected set lngLat(newLngLat: ILngLat);
-    constructor(cfg?: Partial<O>);
-    getIsShow(): boolean;
-    addTo(scene: Container): 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 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;
-    protected update: () => void;
-    /**
-     * 设置 Popup 相对于地图容器的 Position
-     * @param left
-     * @param top
-     * @protected
-     */
-    protected setPopupPosition(left: number, top: number): void;
-    /**
-     * 检查当前传入 option 是否包含 keys 字段
-     * @param option
-     * @param keys
-     * @protected
-     */
-    protected checkUpdateOption(option: Partial<O>, keys: Array<keyof O>): boolean;
-}