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

package/lib/popup/popup.js

@@ -1,388 +1,651 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/popup/popup.ts
-var popup_exports = {};
-__export(popup_exports, {
-  Popup: () => Popup,
-  default: () => Popup
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(popup_exports);
-var import_l7_core = require("@antv/l7-core");
-var import_l7_utils = require("@antv/l7-utils");
-var import_eventemitter3 = require("eventemitter3");
-var import_icon = require("../utils/icon");
-var Popup = class extends import_eventemitter3.EventEmitter {
-  constructor(cfg) {
-    super();
-    this.isShow = true;
-    this.onMouseMove = (e) => {
-      const container = this.mapsService.getMapContainer();
-      const { left = 0, top = 0 } = (container == null ? void 0 : container.getBoundingClientRect()) ?? {};
-      this.setPopupPosition(e.clientX - left, e.clientY - top);
-    };
-    this.updateLngLatPosition = () => {
-      if (!this.mapsService || this.popupOption.followCursor) {
+exports.default = exports.Popup = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+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 _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 _l7Core = require("@antv/l7-core");
+
+var _l7Utils = require("@antv/l7-utils");
+
+var _eventemitter = require("eventemitter3");
+
+var _icon = require("../utils/icon");
+
+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 Popup = /*#__PURE__*/function (_EventEmitter) {
+  (0, _inherits2.default)(Popup, _EventEmitter);
+
+  var _super = _createSuper(Popup);
+
+  function Popup(cfg) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Popup);
+    _this = _super.call(this);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isShow", true);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseMove", function (e) {
+      var _container$getBoundin;
+
+      var container = _this.mapsService.getMapContainer();
+
+      var _ref = (_container$getBoundin = container === null || container === void 0 ? void 0 : container.getBoundingClientRect()) !== null && _container$getBoundin !== void 0 ? _container$getBoundin : {},
+          _ref$left = _ref.left,
+          left = _ref$left === void 0 ? 0 : _ref$left,
+          _ref$top = _ref.top,
+          top = _ref$top === void 0 ? 0 : _ref$top;
+
+      _this.setPopupPosition(e.clientX - left, e.clientY - top);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateLngLatPosition", function () {
+      if (!_this.mapsService || _this.popupOption.followCursor) {
         return;
       }
-      const { lng, lat } = this.lngLat;
-      const { x, y } = this.mapsService.lngLatToContainer([lng, lat]);
-      this.setPopupPosition(x, y);
-    };
-    this.onKeyDown = (e) => {
+
+      var _this$lngLat = _this.lngLat,
+          lng = _this$lngLat.lng,
+          lat = _this$lngLat.lat;
+
+      var _this$mapsService$lng = _this.mapsService.lngLatToContainer([lng, lat]),
+          x = _this$mapsService$lng.x,
+          y = _this$mapsService$lng.y;
+
+      _this.setPopupPosition(x, y);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (e) {
       if (e.keyCode === 27) {
-        this.remove();
+        _this.remove();
       }
-    };
-    this.onCloseButtonClick = (e) => {
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCloseButtonClick", function (e) {
       if (e.stopPropagation) {
         e.stopPropagation();
       }
-      this.remove();
-    };
-    this.update = () => {
-      const hasPosition = !!this.lngLat;
-      const {
-        className,
-        style,
-        maxWidth,
-        anchor,
-        stopPropagation
-      } = this.popupOption;
-      if (!this.mapsService || !hasPosition || !this.content) {
+
+      _this.remove();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "update", function () {
+      var hasPosition = !!_this.lngLat;
+      var _this$popupOption = _this.popupOption,
+          className = _this$popupOption.className,
+          style = _this$popupOption.style,
+          maxWidth = _this$popupOption.maxWidth,
+          anchor = _this$popupOption.anchor,
+          stopPropagation = _this$popupOption.stopPropagation;
+
+      if (!_this.mapsService || !hasPosition || !_this.content) {
         return;
       }
-      const popupContainer = this.mapsService.getMarkerContainer();
-      if (!this.container && popupContainer) {
-        this.container = import_l7_utils.DOM.create("div", `l7-popup ${className ?? ""} ${!this.isShow ? "l7-popup-hide" : ""}`, popupContainer);
+
+      var popupContainer = _this.mapsService.getMarkerContainer(); // 如果当前没有创建 Popup 容器则创建
+
+
+      if (!_this.container && popupContainer) {
+        _this.container = _l7Utils.DOM.create('div', "l7-popup ".concat(className !== null && className !== void 0 ? className : '', " ").concat(!_this.isShow ? 'l7-popup-hide' : ''), popupContainer);
+
         if (style) {
-          this.container.setAttribute("style", style);
+          _this.container.setAttribute('style', style);
         }
-        this.tip = import_l7_utils.DOM.create("div", "l7-popup-tip", this.container);
-        this.container.appendChild(this.content);
+
+        _this.tip = _l7Utils.DOM.create('div', 'l7-popup-tip', _this.container);
+
+        _this.container.appendChild(_this.content); // 高德地图需要阻止事件冒泡 // 测试mapbox 地图不需要添加
+
+
         if (stopPropagation) {
-          ["mousemove", "mousedown", "mouseup", "click", "dblclick"].forEach((type) => {
-            this.container.addEventListener(type, (e) => {
+          ['mousemove', 'mousedown', 'mouseup', 'click', 'dblclick'].forEach(function (type) {
+            _this.container.addEventListener(type, function (e) {
               e.stopPropagation();
             });
           });
         }
-        this.container.style.whiteSpace = "nowrap";
-      }
-      if (maxWidth && this.container.style.maxWidth !== maxWidth) {
-        this.container.style.maxWidth = maxWidth;
-      }
-      this.updateLngLatPosition();
-      import_l7_utils.DOM.setTransform(this.container, `${import_l7_utils.anchorTranslate[anchor]}`);
-      (0, import_l7_utils.applyAnchorClass)(this.container, anchor, "popup");
-    };
-    this.popupOption = {
-      ...this.getDefault(cfg ?? {}),
-      ...cfg
-    };
-    const { lngLat } = this.popupOption;
+
+        _this.container.style.whiteSpace = 'nowrap';
+      } // 设置 Popup 的最大宽度
+
+
+      if (maxWidth && _this.container.style.maxWidth !== maxWidth) {
+        _this.container.style.maxWidth = maxWidth;
+      }
+
+      _this.updateLngLatPosition();
+
+      _l7Utils.DOM.setTransform(_this.container, "".concat(_l7Utils.anchorTranslate[anchor]));
+
+      (0, _l7Utils.applyAnchorClass)(_this.container, anchor, 'popup');
+    });
+    _this.popupOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this.getDefault(cfg !== null && cfg !== void 0 ? cfg : {})), cfg);
+    var lngLat = _this.popupOption.lngLat;
+
     if (lngLat) {
-      this.lngLat = lngLat;
-    }
-  }
-  get lngLat() {
-    return this.popupOption.lngLat ?? {
-      lng: 0,
-      lat: 0
-    };
-  }
-  set lngLat(newLngLat) {
-    this.popupOption.lngLat = newLngLat;
-  }
-  getIsShow() {
-    return this.isShow;
-  }
-  addTo(scene) {
-    this.mapsService = scene.get(import_l7_core.TYPES.IMapService);
-    this.sceneService = scene.get(import_l7_core.TYPES.ISceneService);
-    this.layerService = scene.get(import_l7_core.TYPES.ILayerService);
-    this.mapsService.on("camerachange", this.update);
-    this.mapsService.on("viewchange", this.update);
-    this.scene = scene;
-    this.update();
-    this.updateCloseOnClick();
-    this.updateCloseOnEsc();
-    this.updateFollowCursor();
-    const { html, text } = this.popupOption;
-    if (html) {
-      this.setHTML(html);
-    } else if (text) {
-      this.setText(text);
+      _this.lngLat = lngLat;
     }
-    this.emit("open");
-    return this;
+
+    return _this;
   }
-  remove() {
-    if (!this.isOpen()) {
-      return;
-    }
-    if (this.content) {
-      import_l7_utils.DOM.remove(this.content);
-    }
-    if (this.container) {
-      import_l7_utils.DOM.remove(this.container);
-      delete this.container;
+
+  (0, _createClass2.default)(Popup, [{
+    key: "lngLat",
+    get:
+    /**
+     * 配置
+     * @protected
+     */
+
+    /**
+     * 关闭按钮对应的 DOM
+     * @protected
+     */
+
+    /**
+     * Popup 的总容器 DOM，包含 content 和 tip
+     * @protected
+     */
+
+    /**
+     * popup 气泡容器
+     * @protected
+     */
+
+    /**
+     * popup 气泡标题
+     * @protected
+     */
+
+    /**
+     * popup 内容容器
+     * @protected
+     */
+
+    /**
+     * popup 内容标题
+     * @protected
+     */
+
+    /**
+     * 气泡箭头对应的 DOM
+     * @protected
+     */
+
+    /**
+     * 当前是否展示
+     * @protected
+     */
+    function get() {
+      var _this$popupOption$lng;
+
+      return (_this$popupOption$lng = this.popupOption.lngLat) !== null && _this$popupOption$lng !== void 0 ? _this$popupOption$lng : {
+        lng: 0,
+        lat: 0
+      };
+    },
+    set: function set(newLngLat) {
+      this.popupOption.lngLat = newLngLat;
     }
-    if (this.mapsService) {
-      this.mapsService.off("camerachange", this.update);
-      this.mapsService.off("viewchange", this.update);
-      this.updateCloseOnClick(true);
-      this.updateCloseOnEsc(true);
-      this.updateFollowCursor(true);
-      delete this.mapsService;
+  }, {
+    key: "getIsShow",
+    value: function getIsShow() {
+      return this.isShow;
     }
-    this.emit("close");
-    return this;
-  }
-  getOptions() {
-    return this.popupOption;
-  }
-  setOptions(option) {
-    this.popupOption = {
-      ...this.popupOption,
-      ...option
-    };
-    if (this.checkUpdateOption(option, [
-      "closeButton",
-      "closeButtonOffsets",
-      "maxWidth",
-      "anchor",
-      "stopPropagation",
-      "className",
-      "style",
-      "lngLat",
-      "offsets",
-      "title"
-    ])) {
+  }, {
+    key: "addTo",
+    value: function addTo(scene) {
+      this.mapsService = scene.get(_l7Core.TYPES.IMapService);
+      this.sceneService = scene.get(_l7Core.TYPES.ISceneService);
+      this.layerService = scene.get(_l7Core.TYPES.ILayerService);
+      this.mapsService.on('camerachange', this.update);
+      this.mapsService.on('viewchange', this.update);
+      this.scene = scene;
+      this.update();
+      this.updateCloseOnClick();
+      this.updateCloseOnEsc();
+      this.updateFollowCursor();
+      var _this$popupOption2 = this.popupOption,
+          html = _this$popupOption2.html,
+          text = _this$popupOption2.text;
+
+      if (html) {
+        this.setHTML(html);
+      } else if (text) {
+        this.setText(text);
+      }
+
+      this.emit('open');
+      return this;
+    } // 移除popup
+
+  }, {
+    key: "remove",
+    value: function remove() {
+      if (!this.isOpen()) {
+        return;
+      }
+
+      if (this.content) {
+        _l7Utils.DOM.remove(this.content);
+      }
+
       if (this.container) {
-        import_l7_utils.DOM.remove(this.container);
-        this.container = void 0;
+        _l7Utils.DOM.remove(this.container); // @ts-ignore
+
+
+        delete this.container;
       }
-      if (this.popupOption.html) {
-        this.setHTML(this.popupOption.html);
-      } else if (this.popupOption.text) {
-        this.setText(this.popupOption.text);
+
+      if (this.mapsService) {
+        // TODO: mapbox AMap 事件同步
+        this.mapsService.off('camerachange', this.update);
+        this.mapsService.off('viewchange', this.update);
+        this.updateCloseOnClick(true);
+        this.updateCloseOnEsc(true);
+        this.updateFollowCursor(true); // @ts-ignore
+
+        delete this.mapsService;
       }
+
+      this.emit('close');
+      return this;
     }
-    if (this.checkUpdateOption(option, ["closeOnEsc"])) {
-      this.updateCloseOnEsc();
+    /**
+     * 获取 option 配置
+     */
+
+  }, {
+    key: "getOptions",
+    value: function getOptions() {
+      return this.popupOption;
     }
-    if (this.checkUpdateOption(option, ["closeOnClick"])) {
-      this.updateCloseOnClick();
+  }, {
+    key: "setOptions",
+    value: function setOptions(option) {
+      this.popupOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.popupOption), option);
+
+      if (this.checkUpdateOption(option, ['closeButton', 'closeButtonOffsets', 'maxWidth', 'anchor', 'stopPropagation', 'className', 'style', 'lngLat', 'offsets', 'title'])) {
+        if (this.container) {
+          _l7Utils.DOM.remove(this.container); // @ts-ignore
+
+
+          this.container = undefined;
+        }
+
+        if (this.popupOption.html) {
+          this.setHTML(this.popupOption.html);
+        } else if (this.popupOption.text) {
+          this.setText(this.popupOption.text);
+        }
+      }
+
+      if (this.checkUpdateOption(option, ['closeOnEsc'])) {
+        this.updateCloseOnEsc();
+      }
+
+      if (this.checkUpdateOption(option, ['closeOnClick'])) {
+        this.updateCloseOnClick();
+      }
+
+      if (this.checkUpdateOption(option, ['followCursor'])) {
+        this.updateFollowCursor();
+      }
+
+      if (this.checkUpdateOption(option, ['html']) && option.html) {
+        this.setHTML(option.html);
+      } else if (this.checkUpdateOption(option, ['text']) && option.text) {
+        this.setText(option.text);
+      }
+
+      if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) {
+        this.setLnglat(option.lngLat);
+      }
+
+      return this;
     }
-    if (this.checkUpdateOption(option, ["followCursor"])) {
-      this.updateFollowCursor();
+  }, {
+    key: "open",
+    value: function open() {
+      this.addTo(this.scene);
+      return this;
     }
-    if (this.checkUpdateOption(option, ["html"]) && option.html) {
-      this.setHTML(option.html);
-    } else if (this.checkUpdateOption(option, ["text"]) && option.text) {
-      this.setText(option.text);
+  }, {
+    key: "close",
+    value: function close() {
+      this.remove();
+      return this;
     }
-    if (this.checkUpdateOption(option, ["lngLat"]) && option.lngLat) {
-      this.setLnglat(option.lngLat);
+  }, {
+    key: "show",
+    value: function show() {
+      if (this.isShow) {
+        return;
+      }
+
+      if (this.container) {
+        _l7Utils.DOM.removeClass(this.container, 'l7-popup-hide');
+      }
+
+      this.isShow = true;
+      this.emit('show');
+      return this;
     }
-    return this;
-  }
-  open() {
-    this.addTo(this.scene);
-    return this;
-  }
-  close() {
-    this.remove();
-    return this;
-  }
-  show() {
-    if (this.isShow) {
-      return;
+  }, {
+    key: "hide",
+    value: function hide() {
+      if (!this.isShow) {
+        return;
+      }
+
+      if (this.container) {
+        _l7Utils.DOM.addClass(this.container, 'l7-popup-hide');
+      }
+
+      this.isShow = false;
+      this.emit('hide');
+      return this;
     }
-    if (this.container) {
-      import_l7_utils.DOM.removeClass(this.container, "l7-popup-hide");
+    /**
+     * 设置 HTML 内容
+     * @param html
+     */
+
+  }, {
+    key: "setHTML",
+    value: function setHTML(html) {
+      this.popupOption.html = html;
+      return this.setDOMContent(this.getPopupHTMLFragment(html));
     }
-    this.isShow = true;
-    this.emit("show");
-    return this;
-  }
-  hide() {
-    if (!this.isShow) {
-      return;
+    /**
+     * 设置 Popup 展示文本
+     * @param text
+     */
+
+  }, {
+    key: "setText",
+    value: function setText(text) {
+      this.popupOption.text = text;
+      return this.setDOMContent(window.document.createTextNode(text));
     }
-    if (this.container) {
-      import_l7_utils.DOM.addClass(this.container, "l7-popup-hide");
+    /**
+     * 将地图自动平移到气泡位置
+     */
+
+  }, {
+    key: "panToPopup",
+    value: function panToPopup() {
+      var _this$lngLat2 = this.lngLat,
+          lng = _this$lngLat2.lng,
+          lat = _this$lngLat2.lat;
+
+      if (this.popupOption.autoPan) {
+        this.mapsService.panTo([lng, lat]);
+      }
+
+      return this;
     }
-    this.isShow = false;
-    this.emit("hide");
-    return this;
-  }
-  setHTML(html) {
-    this.popupOption.html = html;
-    return this.setDOMContent(this.getPopupHTMLFragment(html));
-  }
-  setText(text) {
-    this.popupOption.text = text;
-    return this.setDOMContent(window.document.createTextNode(text));
-  }
-  panToPopup() {
-    const { lng, lat } = this.lngLat;
-    if (this.popupOption.autoPan) {
-      this.mapsService.panTo([lng, lat]);
+  }, {
+    key: "setLngLat",
+    value: function setLngLat(lngLat) {
+      return this.setLnglat(lngLat);
     }
-    return this;
-  }
-  setLngLat(lngLat) {
-    return this.setLnglat(lngLat);
-  }
-  setLnglat(lngLat) {
-    this.lngLat = lngLat;
-    if (Array.isArray(lngLat)) {
-      this.lngLat = {
-        lng: lngLat[0],
-        lat: lngLat[1]
-      };
+    /**
+     * 设置 Popup 所在经纬度
+     * @param lngLat
+     */
+
+  }, {
+    key: "setLnglat",
+    value: function setLnglat(lngLat) {
+      var _this2 = this;
+
+      this.lngLat = lngLat;
+
+      if (Array.isArray(lngLat)) {
+        this.lngLat = {
+          lng: lngLat[0],
+          lat: lngLat[1]
+        };
+      }
+
+      if (this.mapsService) {
+        // 防止事件重复监听
+        this.mapsService.off('camerachange', this.update);
+        this.mapsService.off('viewchange', this.update);
+        this.mapsService.on('camerachange', this.update);
+        this.mapsService.on('viewchange', this.update);
+      }
+
+      this.update();
+
+      if (this.popupOption.autoPan) {
+        setTimeout(function () {
+          _this2.panToPopup();
+        }, 0);
+      }
+
+      return this;
     }
-    if (this.mapsService) {
-      this.mapsService.off("camerachange", this.update);
-      this.mapsService.off("viewchange", this.update);
-      this.mapsService.on("camerachange", this.update);
-      this.mapsService.on("viewchange", this.update);
+    /**
+     * 获取 Popup 所在经纬度
+     */
+
+  }, {
+    key: "getLnglat",
+    value: function getLnglat() {
+      return this.lngLat;
     }
-    this.update();
-    if (this.popupOption.autoPan) {
-      setTimeout(() => {
-        this.panToPopup();
-      }, 0);
+    /**
+     * 设置 Popup 最大宽度
+     * @param maxWidth
+     */
+
+  }, {
+    key: "setMaxWidth",
+    value: function setMaxWidth(maxWidth) {
+      this.popupOption.maxWidth = maxWidth;
+      this.update();
+      return this;
     }
-    return this;
-  }
-  getLnglat() {
-    return this.lngLat;
-  }
-  setMaxWidth(maxWidth) {
-    this.popupOption.maxWidth = maxWidth;
-    this.update();
-    return this;
-  }
-  isOpen() {
-    return !!this.mapsService;
-  }
-  getDefault(option) {
-    return {
-      closeButton: true,
-      closeOnClick: true,
-      maxWidth: "240px",
-      offsets: [0, 0],
-      anchor: import_l7_utils.anchorType.BOTTOM,
-      stopPropagation: true,
-      autoPan: false,
-      autoClose: true,
-      closeOnEsc: false,
-      followCursor: false
-    };
-  }
-  setDOMContent(htmlNode) {
-    this.createContent();
-    this.contentPanel.appendChild(htmlNode);
-    this.update();
-    return this;
-  }
-  updateCloseOnClick(onlyClear) {
-    this.mapsService.off("click", this.onCloseButtonClick);
-    if (this.popupOption.closeOnClick && !onlyClear) {
-      this.mapsService.on("click", this.onCloseButtonClick);
+  }, {
+    key: "isOpen",
+    value: function isOpen() {
+      return !!this.mapsService;
     }
-  }
-  updateCloseOnEsc(onlyClear) {
-    window.removeEventListener("keydown", this.onKeyDown);
-    if (this.popupOption.closeOnEsc && !onlyClear) {
-      window.addEventListener("keydown", this.onKeyDown);
+  }, {
+    key: "getDefault",
+    value: function getDefault(option) {
+      // tslint:disable-next-line:no-object-literal-type-assertion
+      return {
+        closeButton: true,
+        closeOnClick: true,
+        maxWidth: '240px',
+        offsets: [0, 0],
+        anchor: _l7Utils.anchorType.BOTTOM,
+        stopPropagation: true,
+        autoPan: false,
+        autoClose: true,
+        closeOnEsc: false,
+        followCursor: false
+      };
     }
-  }
-  updateFollowCursor(onlyClear) {
-    const container = this.mapsService.getContainer();
-    container.removeEventListener("mousemove", this.onMouseMove);
-    if (this.popupOption.followCursor && !onlyClear) {
-      container.addEventListener("mousemove", this.onMouseMove);
+    /**
+     * 设置 Popup 内容 HTML
+     * @param htmlNode
+     */
+
+  }, {
+    key: "setDOMContent",
+    value: function setDOMContent(htmlNode) {
+      this.createContent();
+      this.contentPanel.appendChild(htmlNode);
+      this.update();
+      return this;
     }
-  }
-  createContent() {
-    var _a;
-    if (this.content) {
-      import_l7_utils.DOM.remove(this.content);
+    /**
+     * 绑定地图点击事件触发销毁 Popup
+     * @protected
+     */
+
+  }, {
+    key: "updateCloseOnClick",
+    value: function updateCloseOnClick(onlyClear) {
+      this.mapsService.off('click', this.onCloseButtonClick);
+
+      if (this.popupOption.closeOnClick && !onlyClear) {
+        this.mapsService.on('click', this.onCloseButtonClick);
+      }
     }
-    this.content = import_l7_utils.DOM.create("div", "l7-popup-content", this.container);
-    if (this.popupOption.title) {
-      this.contentTitle = import_l7_utils.DOM.create("div", "l7-popup-content__title", this.content);
-      (_a = this.contentTitle) == null ? void 0 : _a.append(this.getPopupHTMLFragment(this.popupOption.title));
-    } else {
-      this.contentTitle = void 0;
+  }, {
+    key: "updateCloseOnEsc",
+    value: function updateCloseOnEsc(onlyClear) {
+      window.removeEventListener('keydown', this.onKeyDown);
+
+      if (this.popupOption.closeOnEsc && !onlyClear) {
+        window.addEventListener('keydown', this.onKeyDown);
+      }
     }
-    if (this.popupOption.closeButton) {
-      const closeButton = (0, import_icon.createL7Icon)("l7-icon-guanbi");
-      import_l7_utils.DOM.addClass(closeButton, "l7-popup-close-button");
-      this.content.appendChild(closeButton);
-      if (this.popupOption.closeButtonOffsets) {
-        closeButton.style.right = this.popupOption.closeButtonOffsets[0] + "px";
-        closeButton.style.top = this.popupOption.closeButtonOffsets[1] + "px";
-      }
-      closeButton.setAttribute("aria-label", "Close popup");
-      closeButton.addEventListener("click", this.onCloseButtonClick);
-      this.closeButton = closeButton;
-    } else {
-      this.closeButton = void 0;
+  }, {
+    key: "updateFollowCursor",
+    value: function updateFollowCursor(onlyClear) {
+      var container = this.mapsService.getContainer();
+      container.removeEventListener('mousemove', this.onMouseMove);
+
+      if (this.popupOption.followCursor && !onlyClear) {
+        container.addEventListener('mousemove', this.onMouseMove);
+      }
     }
-    this.contentPanel = import_l7_utils.DOM.create("div", "l7-popup-content__panel", this.content);
-  }
-  setPopupPosition(left, top) {
-    if (this.container) {
-      const { offsets } = this.popupOption;
-      this.container.style.left = left + offsets[0] + "px";
-      this.container.style.top = top - offsets[1] + "px";
+  }, {
+    key: "createContent",
+    value:
+    /**
+     * 创建 Popup 内容容器的 DOM （在每次 setHTML 或 setText 时都会被调用）
+     * @protected
+     */
+    function createContent() {
+      if (this.content) {
+        _l7Utils.DOM.remove(this.content);
+      }
+
+      this.content = _l7Utils.DOM.create('div', 'l7-popup-content', this.container);
+
+      if (this.popupOption.title) {
+        var _this$contentTitle;
+
+        this.contentTitle = _l7Utils.DOM.create('div', 'l7-popup-content__title', this.content);
+        (_this$contentTitle = this.contentTitle) === null || _this$contentTitle === void 0 ? void 0 : _this$contentTitle.append(this.getPopupHTMLFragment(this.popupOption.title));
+      } else {
+        this.contentTitle = undefined;
+      }
+
+      if (this.popupOption.closeButton) {
+        var closeButton = (0, _icon.createL7Icon)('l7-icon-guanbi');
+
+        _l7Utils.DOM.addClass(closeButton, 'l7-popup-close-button');
+
+        this.content.appendChild(closeButton);
+
+        if (this.popupOption.closeButtonOffsets) {
+          // 关闭按钮的偏移
+          closeButton.style.right = this.popupOption.closeButtonOffsets[0] + 'px';
+          closeButton.style.top = this.popupOption.closeButtonOffsets[1] + 'px';
+        } // this.closeButton.type = 'button';
+
+
+        closeButton.setAttribute('aria-label', 'Close popup');
+        closeButton.addEventListener('click', this.onCloseButtonClick);
+        this.closeButton = closeButton;
+      } else {
+        this.closeButton = undefined;
+      }
+
+      this.contentPanel = _l7Utils.DOM.create('div', 'l7-popup-content__panel', this.content);
     }
-  }
-  checkUpdateOption(option, keys) {
-    return keys.some((key) => key in option);
-  }
-  getPopupHTMLFragment(html) {
-    const frag = window.document.createDocumentFragment();
-    const temp = window.document.createElement("body");
-    let child;
-    if (typeof html === "string") {
-      temp.innerHTML = html;
-    } else if (Array.isArray(html)) {
-      temp.append(...html);
-    } else if (html instanceof HTMLElement) {
-      temp.append(html);
+  }, {
+    key: "setPopupPosition",
+    value:
+    /**
+     * 设置 Popup 相对于地图容器的 Position
+     * @param left
+     * @param top
+     * @protected
+     */
+    function setPopupPosition(left, top) {
+      if (this.container) {
+        var offsets = this.popupOption.offsets;
+        this.container.style.left = left + offsets[0] + 'px';
+        this.container.style.top = top - offsets[1] + 'px';
+      }
+    }
+    /**
+     * 检查当前传入 option 是否包含 keys 字段
+     * @param option
+     * @param keys
+     * @protected
+     */
+
+  }, {
+    key: "checkUpdateOption",
+    value: function checkUpdateOption(option, keys) {
+      return keys.some(function (key) {
+        return key in option;
+      });
     }
-    while (true) {
-      child = temp.firstChild;
-      if (!child) {
-        break;
+    /**
+     * 根据参数 HTML 片段返回对应的 Fragment
+     * @param html
+     * @protected
+     */
+
+  }, {
+    key: "getPopupHTMLFragment",
+    value: function getPopupHTMLFragment(html) {
+      var frag = window.document.createDocumentFragment();
+      var temp = window.document.createElement('body');
+      var child;
+
+      if (typeof html === 'string') {
+        temp.innerHTML = html;
+      } else if (Array.isArray(html)) {
+        temp.append.apply(temp, (0, _toConsumableArray2.default)(html));
+      } else if (html instanceof HTMLElement) {
+        temp.append(html);
+      }
+
+      while (true) {
+        child = temp.firstChild;
+
+        if (!child) {
+          break;
+        }
+
+        frag.appendChild(child);
       }
-      frag.appendChild(child);
+
+      return frag;
     }
-    return frag;
-  }
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Popup
-});
+  }]);
+  return Popup;
+}(_eventemitter.EventEmitter);
+
+exports.default = exports.Popup = Popup;