@antv/l7-component 2.9.32-alpha.4 → 2.9.32-alpha.5

package/lib/popup/layerPopup.js

@@ -1,200 +1,317 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/popup/layerPopup.ts
-var layerPopup_exports = {};
-__export(layerPopup_exports, {
-  LayerPopup: () => LayerPopup,
-  default: () => LayerPopup
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(layerPopup_exports);
-var import_l7_utils = require("@antv/l7-utils");
-var import_lodash = require("lodash");
-var import_popup = __toESM(require("./popup"));
-var LayerPopup = class extends import_popup.default {
-  constructor() {
-    super(...arguments);
-    this.layerConfigMap = /* @__PURE__ */ new WeakMap();
-  }
-  addTo(scene) {
-    super.addTo(scene);
-    this.bindLayerEvent();
-    this.hide();
-    return this;
-  }
-  remove() {
-    super.remove();
-    this.unbindLayerEvent();
-    return this;
-  }
-  setOptions(option) {
-    this.unbindLayerEvent();
-    super.setOptions(option);
-    this.bindLayerEvent();
-    return this;
-  }
-  getDefault(option) {
-    const isClickTrigger = option.trigger === "click";
-    return {
-      ...super.getDefault(option),
-      trigger: "hover",
-      followCursor: !isClickTrigger,
-      lngLat: {
-        lng: 0,
-        lat: 0
-      },
-      offsets: [0, 10],
-      closeButton: false,
-      closeOnClick: false,
-      autoClose: false,
-      closeOnEsc: false
-    };
-  }
-  bindLayerEvent() {
-    const { config, trigger } = this.popupOption;
-    config.forEach((configItem) => {
-      const layer = this.getLayerByConfig(configItem);
-      if (!layer) {
-        return;
-      }
-      const layerInfo = {
-        ...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 ? void 0 : layer.on("mousemove", onMouseMove);
-        layer == null ? void 0 : layer.on("mouseout", onMouseOut);
-      } else {
-        const onClick = this.onLayerClick.bind(this, layer);
-        layerInfo.onClick = onClick;
-        layer == null ? void 0 : layer.on("click", onClick);
-      }
-      const source = layer.getSource();
-      const onSourceUpdate = this.onSourceUpdate.bind(this, layer);
-      source == null ? void 0 : source.on("update", onSourceUpdate);
-      layerInfo.onSourceUpdate = onSourceUpdate;
-      this.layerConfigMap.set(layer, layerInfo);
-    });
+exports.default = exports.LayerPopup = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _l7Utils = require("@antv/l7-utils");
+
+var _lodash = require("lodash");
+
+var _popup = _interopRequireDefault(require("./popup"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var LayerPopup = /*#__PURE__*/function (_Popup) {
+  (0, _inherits2.default)(LayerPopup, _Popup);
+
+  var _super = _createSuper(LayerPopup);
+
+  function LayerPopup() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "layerConfigMap", new WeakMap());
+    return _this;
   }
-  unbindLayerEvent() {
-    const { config } = this.popupOption;
-    config.forEach((configItem) => {
-      var _a;
-      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("click", onClick);
+
+  (0, _createClass2.default)(LayerPopup, [{
+    key: "addTo",
+    value: function addTo(scene) {
+      (0, _get2.default)((0, _getPrototypeOf2.default)(LayerPopup.prototype), "addTo", this).call(this, scene);
+      this.bindLayerEvent();
+      this.hide();
+      return this;
+    }
+  }, {
+    key: "remove",
+    value: function remove() {
+      (0, _get2.default)((0, _getPrototypeOf2.default)(LayerPopup.prototype), "remove", this).call(this);
+      this.unbindLayerEvent();
+      return this;
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions(option) {
+      this.unbindLayerEvent();
+      (0, _get2.default)((0, _getPrototypeOf2.default)(LayerPopup.prototype), "setOptions", this).call(this, option);
+      this.bindLayerEvent();
+      return this;
+    }
+  }, {
+    key: "getDefault",
+    value: function getDefault(option) {
+      var isClickTrigger = option.trigger === 'click';
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(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 = (0, _objectSpread2.default)({}, 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 (onSourceUpdate) {
-        (_a = layer == null ? void 0 : layer.getSource()) == null ? void 0 : _a.off("update", onSourceUpdate);
+
+      if (!this.isShow) {
+        this.show();
       }
-    });
-  }
-  onLayerMouseMove(layer, e) {
-    if (!this.isSameFeature(layer, e.featureId)) {
-      const frag = this.getLayerInfoFrag(layer, e);
-      this.setDOMContent(frag);
-      this.displayFeatureInfo = {
-        layer,
-        featureId: e.featureId
-      };
-    }
-    if (!this.isShow) {
-      this.show();
     }
-  }
-  onLayerMouseOut(layer, e) {
-    this.displayFeatureInfo = void 0;
-    if (this.isShow) {
-      this.hide();
+  }, {
+    key: "onLayerMouseOut",
+    value: function onLayerMouseOut(layer, e) {
+      this.displayFeatureInfo = undefined;
+
+      if (this.isShow) {
+        this.hide();
+      }
     }
-  }
-  onLayerClick(layer, e) {
-    if (this.isShow && this.isSameFeature(layer, e.featureId)) {
-      this.hide();
-    } else {
-      const frag = this.getLayerInfoFrag(layer, e);
-      this.setDOMContent(frag);
-      this.setLnglat(e.lngLat);
-      this.show();
-      this.displayFeatureInfo = {
-        layer,
-        featureId: e.featureId
-      };
+  }, {
+    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
+        };
+      }
     }
-  }
-  onSourceUpdate(layer) {
-    var _a;
-    if (((_a = this.displayFeatureInfo) == null ? void 0 : _a.layer) === layer) {
-      this.hide();
-      this.displayFeatureInfo = void 0;
+  }, {
+    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;
+      }
     }
-  }
-  getLayerInfoFrag(layer, e) {
-    const layerInfo = this.layerConfigMap.get(layer);
-    const frag = document.createDocumentFragment();
-    if (layerInfo) {
-      let feature = e.feature;
-      if (feature.type === "Feature" && "properties" in feature && "geometry" in feature) {
-        feature = feature.properties;
+    /**
+     * 通过当前图层和对应选中的元素获取气泡展示的 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 = _l7Utils.DOM.create('div', 'l7-layer-popup__row');
+
+          var value = getValue ? getValue(e.feature) : (0, _lodash.get)(_feature, field);
+          row.innerHTML = "".concat(formatField ? formatField(field) : field, ": ").concat(formatValue ? formatValue(value) : value);
+          frag.appendChild(row);
+        });
       }
-      const { fields } = layerInfo;
-      fields == null ? void 0 : fields.forEach((fieldConfig) => {
-        const { field, formatField, formatValue, getValue } = typeof fieldConfig === "string" ? { field: fieldConfig } : fieldConfig;
-        const row = import_l7_utils.DOM.create("div", "l7-layer-popup__row");
-        const value = getValue ? getValue(e.feature) : (0, import_lodash.get)(feature, field);
-        row.innerHTML = `${formatField ? formatField(field) : field}: ${formatValue ? formatValue(value) : value}`;
-        frag.appendChild(row);
-      });
+
+      return frag;
     }
-    return frag;
-  }
-  getLayerByConfig(config) {
-    const layer = config.layer;
-    if (layer instanceof Object) {
-      return layer;
+    /**
+     * 通过 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);
+      }
     }
-    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;
     }
-  }
-  isSameFeature(layer, featureId) {
-    const displayFeatureInfo = this.displayFeatureInfo;
-    return displayFeatureInfo && layer === displayFeatureInfo.layer && featureId === displayFeatureInfo.featureId;
-  }
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  LayerPopup
-});
+  }]);
+  return LayerPopup;
+}(_popup.default);
+
+exports.default = exports.LayerPopup = LayerPopup;