@antv/l7-component 2.9.37 → 2.10.1

package/es/popup/layerPopup.d.ts

@@ -0,0 +1,78 @@
+import { ILayer, IPopupOption } from '@antv/l7-core';
+import { BaseLayer } from '@antv/l7-layers';
+import { Container } from 'inversify';
+import Popup from './popup';
+export declare type LayerField = {
+    field: string;
+    formatField?: (field: string) => string;
+    formatValue?: (value: any) => any;
+    getValue?: (feature: any) => any;
+};
+export declare type LayerPopupConfigItem = {
+    layer: BaseLayer | string;
+    fields: Array<LayerField | string>;
+};
+export interface ILayerPopupOption extends IPopupOption {
+    config: LayerPopupConfigItem[];
+    trigger: 'hover' | 'click';
+}
+declare type LayerMapInfo = {
+    onMouseMove?: (layer: BaseLayer, e: any) => void;
+    onMouseOut?: (layer: BaseLayer, e: any) => void;
+    onClick?: (layer: BaseLayer, e: any) => void;
+    onSourceUpdate?: (layer: BaseLayer) => void;
+} & Partial<LayerPopupConfigItem>;
+export { LayerPopup };
+export default class LayerPopup extends Popup<ILayerPopupOption> {
+    /**
+     * 用于保存图层对应的事件回调以及配置信息
+     * @protected
+     */
+    protected layerConfigMap: WeakMap<ILayer, LayerMapInfo>;
+    /**
+     * 当期正在展示的图层以及对应元素 id 的信息
+     * @protected
+     */
+    protected displayFeatureInfo?: {
+        layer: ILayer;
+        featureId: number;
+    };
+    addTo(scene: Container): 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, e: any): void;
+    protected onLayerClick(layer: ILayer, e: any): void;
+    protected onSourceUpdate(layer: ILayer): void;
+    /**
+     * 通过当前图层和对应选中的元素获取气泡展示的 HTML 内容
+     * @param layer
+     * @param e
+     * @protected
+     */
+    protected getLayerInfoFrag(layer: ILayer, e: any): DocumentFragment;
+    /**
+     * 通过 Layer 配置访问到真实的 Layer 实例
+     * @param config
+     * @protected
+     */
+    protected getLayerByConfig(config: LayerPopupConfigItem): ILayer | undefined;
+    /**
+     * 判断当前展示的 Feature 是否和上一次查看的一致
+     * @param layer
+     * @param featureId
+     * @protected
+     */
+    protected isSameFeature(layer: ILayer, featureId: number): boolean | undefined;
+}

package/es/popup/layerPopup.js

@@ -0,0 +1,308 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _get from "@babel/runtime/helpers/get";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/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; } }
+
+// @ts-ignore
+// tslint:disable-next-line:no-implicit-dependencies
+import { DOM } from '@antv/l7-utils';
+import { get } from 'lodash'; // import { Container } from 'inversify';
+
+import Popup from "./popup";
+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));
+
+    _defineProperty(_assertThisInitialized(_this), "layerConfigMap", new WeakMap());
+
+    return _this;
+  }
+
+  _createClass(LayerPopup, [{
+    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 _this$popupOption = this.popupOption,
+          config = _this$popupOption.config,
+          trigger = _this$popupOption.trigger;
+      config.forEach(function (configItem) {
+        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.getSource();
+
+        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;
+
+      var config = this.popupOption.config;
+      config.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$getSource;
+
+          layer === null || layer === void 0 ? void 0 : (_layer$getSource = layer.getSource()) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.off('update', onSourceUpdate);
+        }
+      });
+    }
+  }, {
+    key: "onLayerMouseMove",
+    value: function onLayerMouseMove(layer, e) {
+      if (!this.isSameFeature(layer, e.featureId)) {
+        var frag = this.getLayerInfoFrag(layer, e);
+        this.setDOMContent(frag);
+        this.displayFeatureInfo = {
+          layer: layer,
+          featureId: e.featureId
+        };
+      }
+
+      if (!this.isShow) {
+        this.show();
+      }
+    }
+  }, {
+    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 frag = this.getLayerInfoFrag(layer, e);
+        this.setDOMContent(frag);
+        this.setLnglat(e.lngLat);
+        this.show();
+        this.displayFeatureInfo = {
+          layer: layer,
+          featureId: e.featureId
+        };
+      }
+    }
+  }, {
+    key: "onSourceUpdate",
+    value: function onSourceUpdate(layer) {
+      var _this$displayFeatureI;
+
+      if (((_this$displayFeatureI = this.displayFeatureInfo) === null || _this$displayFeatureI === void 0 ? void 0 : _this$displayFeatureI.layer) === 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 frag = document.createDocumentFragment();
+
+      if (layerInfo) {
+        var _feature = e.feature;
+
+        if (_feature.type === 'Feature' && 'properties' in _feature && 'geometry' in _feature) {
+          _feature = _feature.properties;
+        }
+
+        var fields = layerInfo.fields;
+        fields === null || fields === void 0 ? void 0 : fields.forEach(function (fieldConfig) {
+          var _ref = typeof fieldConfig === 'string' ? {
+            field: fieldConfig
+          } : fieldConfig,
+              field = _ref.field,
+              formatField = _ref.formatField,
+              formatValue = _ref.formatValue,
+              getValue = _ref.getValue;
+
+          var row = DOM.create('div', 'l7-layer-popup__row');
+          var value = getValue ? getValue(e.feature) : get(_feature, field);
+          row.innerHTML = "".concat(formatField ? formatField(field) : field, ": ").concat(formatValue ? formatValue(value) : value);
+          frag.appendChild(row);
+        });
+      }
+
+      return frag;
+    }
+    /**
+     * 通过 Layer 配置访问到真实的 Layer 实例
+     * @param config
+     * @protected
+     */
+
+  }, {
+    key: "getLayerByConfig",
+    value: function getLayerByConfig(config) {
+      var layer = config.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

@@ -0,0 +1,147 @@
+import { ILayerService, ILngLat, IMapService, IPopup, IPopupOption, ISceneService, PopupHTML } from '@antv/l7-core';
+import { EventEmitter } from 'eventemitter3';
+import { Container } from 'inversify';
+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;
+    /**
+     * popup 内容标题
+     * @protected
+     */
+    protected title: 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: PopupHTML): this;
+    /**
+     * 设置 Popup 展示文本
+     * @param text
+     */
+    setText(text: string): this;
+    /**
+     * 将地图自动平移到气泡位置
+     */
+    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 htmlNode
+     */
+    protected setDOMContent(htmlNode: ChildNode | DocumentFragment): 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;
+    /**
+     * 根据参数 HTML 片段返回对应的 Fragment
+     * @param html
+     * @protected
+     */
+    protected getPopupHTMLFragment(html: PopupHTML): DocumentFragment;
+}