@antv/l7-component 2.21.0 → 2.21.2

package/lib/popup/popup.js

@@ -6,616 +6,558 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Popup = 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 _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 _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 = exports.default = exports.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);
+class Popup extends _eventemitter.EventEmitter {
+  get lngLat() {
+    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 lngLat(newLngLat) {
+    this.popupOption.lngLat = newLngLat;
+  }
+  constructor(cfg) {
+    super();
     /**
      * 配置
      * @protected
      */
+    (0, _defineProperty2.default)(this, "popupOption", void 0);
+    (0, _defineProperty2.default)(this, "mapsService", void 0);
+    (0, _defineProperty2.default)(this, "sceneService", void 0);
+    (0, _defineProperty2.default)(this, "layerService", void 0);
+    (0, _defineProperty2.default)(this, "scene", void 0);
     /**
      * 关闭按钮对应的 DOM
      * @protected
      */
+    (0, _defineProperty2.default)(this, "closeButton", void 0);
     /**
      * Popup 的总容器 DOM，包含 content 和 tip
      * @protected
      */
+    (0, _defineProperty2.default)(this, "container", void 0);
     /**
      * popup 气泡容器
      * @protected
      */
+    (0, _defineProperty2.default)(this, "content", void 0);
     /**
      * popup 气泡标题
      * @protected
      */
+    (0, _defineProperty2.default)(this, "contentTitle", void 0);
     /**
      * popup 内容容器
      * @protected
      */
+    (0, _defineProperty2.default)(this, "contentPanel", void 0);
     /**
      * 气泡箭头对应的 DOM
      * @protected
      */
+    (0, _defineProperty2.default)(this, "tip", void 0);
     /**
      * 当前是否展示
      * @protected
      */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isShow", true);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseMove", function (e) {
+    (0, _defineProperty2.default)(this, "isShow", true);
+    (0, _defineProperty2.default)(this, "onMouseMove", 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);
+      const container = this.mapsService.getMapContainer();
+      const {
+        left = 0,
+        top = 0
+      } = (_container$getBoundin = container === null || container === void 0 ? void 0 : container.getBoundingClientRect()) !== null && _container$getBoundin !== void 0 ? _container$getBoundin : {};
+      this.setPopupPosition(e.clientX - left, e.clientY - top);
     });
     /**
      * 将经纬度转换成对应的像素偏移位置
      * @protected
      */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateLngLatPosition", function () {
-      if (!_this.mapsService || _this.popupOption.followCursor) {
+    (0, _defineProperty2.default)(this, "updateLngLatPosition", () => {
+      if (!this.mapsService || this.popupOption.followCursor) {
         return;
       }
-      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);
+      const {
+        lng,
+        lat
+      } = this.lngLat;
+      const {
+        x,
+        y
+      } = this.mapsService.lngLatToContainer([lng, lat]);
+      this.setPopupPosition(x, y);
     });
     //zoom时计算PopUp的位置并更新
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateLngLatPositionWhenZoom", function (ev) {
-      if (!_this.mapsService || _this.popupOption.followCursor) {
+    (0, _defineProperty2.default)(this, "updateLngLatPositionWhenZoom", ev => {
+      if (!this.mapsService || this.popupOption.followCursor) {
         return;
       }
-      var map = ev.map;
-      var viewHalf = map.getSize();
+      const map = ev.map;
+      const viewHalf = map.getSize();
       viewHalf.x = viewHalf.x / 2;
       viewHalf.y = viewHalf.y / 2;
-      var center = ev.center;
-      var zoom = ev.zoom;
-      var projectedCenter = map.DE(_this.lngLat, zoom, center);
+      const center = ev.center;
+      const zoom = ev.zoom;
+      const projectedCenter = map.DE(this.lngLat, zoom, center);
       projectedCenter.x = Math.round(projectedCenter.x);
       projectedCenter.y = Math.round(projectedCenter.y);
-      _this.setPopupPosition(projectedCenter.x, projectedCenter.y, true);
+      this.setPopupPosition(projectedCenter.x, projectedCenter.y, true);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (e) {
+    (0, _defineProperty2.default)(this, "onKeyDown", e => {
       if (e.keyCode === 27) {
-        _this.remove();
+        this.remove();
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCloseButtonClick", function (e) {
+    (0, _defineProperty2.default)(this, "onCloseButtonClick", e => {
       if (e.stopPropagation) {
         e.stopPropagation();
       }
-      _this.hide();
+      this.hide();
     });
     //更新位置 支持zoom时更新
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updatePosition", function (ev) {
-      var zoom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      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) {
+    (0, _defineProperty2.default)(this, "updatePosition", (ev, zoom = true) => {
+      const hasPosition = !!this.lngLat;
+      const {
+        className,
+        style,
+        maxWidth,
+        anchor,
+        stopPropagation
+      } = this.popupOption;
+      if (!this.mapsService || !hasPosition || !this.content) {
         return;
       }
-      var popupContainer = _this.mapsService.getMarkerContainer();
+      const 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 (!this.container && popupContainer) {
+        this.container = _l7Utils.DOM.create('div', `l7-popup ${className !== null && className !== void 0 ? className : ''} ${!this.isShow ? 'l7-popup-hide' : ''}`, popupContainer);
         if (style) {
-          _this.container.setAttribute('style', style);
+          this.container.setAttribute('style', style);
         }
-        _this.tip = _l7Utils.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(function (type) {
-            _this.container.addEventListener(type, function (e) {
+          ['mousemove', 'mousedown', 'mouseup', 'click', 'dblclick'].forEach(type => {
+            this.container.addEventListener(type, e => {
               e.stopPropagation();
             });
           });
         }
-        _this.container.style.whiteSpace = 'nowrap';
+        this.container.style.whiteSpace = 'nowrap';
       }
       if (zoom) {
-        _this.updateLngLatPositionWhenZoom(ev);
+        this.updateLngLatPositionWhenZoom(ev);
       } else {
-        _this.updateLngLatPosition();
+        this.updateLngLatPosition();
       }
-      _l7Utils.DOM.setTransform(_this.container, "".concat(_l7Utils.anchorTranslate[anchor]));
-      (0, _l7Utils.applyAnchorClass)(_this.container, anchor, 'popup');
+      _l7Utils.DOM.setTransform(this.container, `${_l7Utils.anchorTranslate[anchor]}`);
+      (0, _l7Utils.applyAnchorClass)(this.container, anchor, 'popup');
       if (maxWidth) {
-        var _this$container$getBo = _this.container.getBoundingClientRect(),
-          width = _this$container$getBo.width;
+        const {
+          width
+        } = this.container.getBoundingClientRect();
         if (width > parseFloat(maxWidth)) {
-          _this.container.style.width = maxWidth;
+          this.container.style.width = maxWidth;
         }
       } else {
-        _this.container.style.removeProperty('width');
+        this.container.style.removeProperty('width');
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateWhenZoom", function (ev) {
-      _this.updatePosition(ev, true);
+    (0, _defineProperty2.default)(this, "updateWhenZoom", ev => {
+      this.updatePosition(ev, true);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "update", function () {
-      _this.updatePosition(null, false);
+    (0, _defineProperty2.default)(this, "update", () => {
+      this.updatePosition(null, false);
     });
-    _this.popupOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this.getDefault(cfg !== null && cfg !== void 0 ? cfg : {})), cfg);
-    var lngLat = _this.popupOption.lngLat;
+    this.popupOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.getDefault(cfg !== null && cfg !== void 0 ? cfg : {})), cfg);
+    const {
+      lngLat
+    } = this.popupOption;
     if (lngLat) {
-      _this.lngLat = lngLat;
+      this.lngLat = lngLat;
     }
-    return _this;
   }
-  (0, _createClass2.default)(Popup, [{
-    key: "lngLat",
-    get: 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;
+  getIsShow() {
+    return this.isShow;
+  }
+  addTo(scene) {
+    this.mapsService = scene.mapService;
+    this.sceneService = scene.sceneService;
+    this.layerService = scene.layerService;
+    //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现
+    // this.mapsService.on('zoomchange', this.updateWhenZoom);
+    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,
+      title
+    } = this.popupOption;
+    if (html) {
+      this.setHTML(html);
+    } else if (text) {
+      this.setText(text);
     }
-  }, {
-    key: "getIsShow",
-    value: function getIsShow() {
-      return this.isShow;
+    if (title) {
+      this.setTitle(title);
     }
-  }, {
-    key: "addTo",
-    value: function addTo(scene) {
-      this.mapsService = scene.mapService;
-      this.sceneService = scene.sceneService;
-      this.layerService = scene.layerService;
-      //天地图仅监听zoomchange 不注册camerachane,对于平移,在mapsService中实现
-      // this.mapsService.on('zoomchange', this.updateWhenZoom);
-      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,
-        title = _this$popupOption2.title;
-      if (html) {
-        this.setHTML(html);
-      } else if (text) {
-        this.setText(text);
-      }
-      if (title) {
-        this.setTitle(title);
-      }
-      this.emit('open');
-      return this;
+    this.emit('open');
+    return this;
+  }
+
+  // 移除popup
+  remove() {
+    if (!(this !== null && this !== void 0 && this.isOpen())) {
+      return;
     }
+    if (this.content) {
+      _l7Utils.DOM.remove(this.content);
+    }
+    if (this.container) {
+      _l7Utils.DOM.remove(this.container);
+      // @ts-ignore
+      delete this.container;
+    }
+    if (this.mapsService) {
+      // TODO: mapbox AMap 事件同步
+      this.mapsService.off('camerachange', this.update);
+      this.mapsService.off('viewchange', this.update);
+      //天地图的缩放事件
+      // this.mapsService.off('zoomchange', this.updateWhenZoom);
+      this.updateCloseOnClick(true);
+      this.updateCloseOnEsc(true);
+      this.updateFollowCursor(true);
+      // @ts-ignore
+      delete this.mapsService;
+    }
+    this.emit('close');
+    return this;
+  }
 
-    // 移除popup
-  }, {
-    key: "remove",
-    value: function remove() {
-      if (!(this !== null && this !== void 0 && this.isOpen())) {
-        return;
-      }
-      if (this.content) {
-        _l7Utils.DOM.remove(this.content);
-      }
+  /**
+   * 获取 option 配置
+   */
+  getOptions() {
+    return this.popupOption;
+  }
+  setOptions(option) {
+    this.show();
+    this.popupOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.popupOption), option);
+    if (this.checkUpdateOption(option, ['html', 'text', 'title', 'closeButton', 'closeButtonOffsets', 'maxWidth', 'anchor', 'stopPropagation', 'className', 'style', 'lngLat', 'offsets'])) {
       if (this.container) {
         _l7Utils.DOM.remove(this.container);
         // @ts-ignore
-        delete this.container;
-      }
-      if (this.mapsService) {
-        // TODO: mapbox AMap 事件同步
-        this.mapsService.off('camerachange', this.update);
-        this.mapsService.off('viewchange', this.update);
-        //天地图的缩放事件
-        // this.mapsService.off('zoomchange', this.updateWhenZoom);
-        this.updateCloseOnClick(true);
-        this.updateCloseOnEsc(true);
-        this.updateFollowCursor(true);
-        // @ts-ignore
-        delete this.mapsService;
-      }
-      this.emit('close');
-      return this;
-    }
-
-    /**
-     * 获取 option 配置
-     */
-  }, {
-    key: "getOptions",
-    value: function getOptions() {
-      return this.popupOption;
-    }
-  }, {
-    key: "setOptions",
-    value: function setOptions(option) {
-      this.show();
-      this.popupOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.popupOption), option);
-      if (this.checkUpdateOption(option, ['html', 'text', 'title', 'closeButton', 'closeButtonOffsets', 'maxWidth', 'anchor', 'stopPropagation', 'className', 'style', 'lngLat', 'offsets'])) {
-        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.popupOption.title) {
-          this.setTitle(this.popupOption.title);
-        }
-      }
-      if (this.checkUpdateOption(option, ['closeOnEsc'])) {
-        this.updateCloseOnEsc();
-      }
-      if (this.checkUpdateOption(option, ['closeOnClick'])) {
-        this.updateCloseOnClick();
+        this.container = undefined;
       }
-      if (this.checkUpdateOption(option, ['followCursor'])) {
-        this.updateFollowCursor();
+      if (this.popupOption.html) {
+        this.setHTML(this.popupOption.html);
+      } else if (this.popupOption.text) {
+        this.setText(this.popupOption.text);
       }
-      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.popupOption.title) {
+        this.setTitle(this.popupOption.title);
       }
-      if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) {
-        this.setLnglat(option.lngLat);
-      }
-      return this;
     }
-  }, {
-    key: "open",
-    value: function open() {
-      this.addTo(this.scene);
-      return this;
+    if (this.checkUpdateOption(option, ['closeOnEsc'])) {
+      this.updateCloseOnEsc();
     }
-  }, {
-    key: "close",
-    value: function close() {
-      this.remove();
-      return this;
+    if (this.checkUpdateOption(option, ['closeOnClick'])) {
+      this.updateCloseOnClick();
     }
-  }, {
-    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;
+    if (this.checkUpdateOption(option, ['followCursor'])) {
+      this.updateFollowCursor();
     }
-  }, {
-    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.checkUpdateOption(option, ['html']) && option.html) {
+      this.setHTML(option.html);
+    } else if (this.checkUpdateOption(option, ['text']) && option.text) {
+      this.setText(option.text);
     }
-
-    /**
-     * 设置 HTML 内容
-     * @param html
-     */
-  }, {
-    key: "setHTML",
-    value: function setHTML(html) {
-      this.popupOption.html = html;
-      return this.setDOMContent(html);
+    if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) {
+      this.setLnglat(option.lngLat);
     }
-
-    /**
-     * 设置 Popup 展示文本
-     * @param text
-     */
-  }, {
-    key: "setText",
-    value: function setText(text) {
-      this.popupOption.text = text;
-      return this.setDOMContent(window.document.createTextNode(text));
+    return this;
+  }
+  open() {
+    this.addTo(this.scene);
+    return this;
+  }
+  close() {
+    this.remove();
+    return this;
+  }
+  show() {
+    if (this.isShow) {
+      return;
     }
-  }, {
-    key: "setTitle",
-    value: function setTitle(title) {
-      this.show();
-      this.popupOption.title = title;
-      if (title) {
-        if (!this.contentTitle) {
-          this.contentTitle = _l7Utils.DOM.create('div', 'l7-popup-content__title');
-          if (this.content.firstChild) {
-            this.content.insertBefore(this.contentTitle, this.content.firstChild);
-          } else {
-            this.content.append(this.contentTitle);
-          }
-        }
-        _l7Utils.DOM.clearChildren(this.contentTitle);
-        _l7Utils.DOM.appendElementType(this.contentTitle, title);
-      } else if (this.contentTitle) {
-        _l7Utils.DOM.remove(this.contentTitle);
-        this.contentTitle = undefined;
-      }
+    if (this.container) {
+      _l7Utils.DOM.removeClass(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 = true;
+    this.emit('show');
+    return this;
+  }
+  hide() {
+    if (!this.isShow) {
+      return;
     }
-  }, {
-    key: "setLngLat",
-    value: function setLngLat(lngLat) {
-      return this.setLnglat(lngLat);
+    if (this.container) {
+      _l7Utils.DOM.addClass(this.container, 'l7-popup-hide');
     }
+    this.isShow = false;
+    this.emit('hide');
+    return this;
+  }
 
-    /**
-     * 设置 Popup 所在经纬度
-     * @param lngLat
-     */
-  }, {
-    key: "setLnglat",
-    value: function setLnglat(lngLat) {
-      var _this2 = this;
-      this.show();
-      this.lngLat = lngLat;
-      if (Array.isArray(lngLat)) {
-        this.lngLat = {
-          lng: lngLat[0],
-          lat: lngLat[1]
-        };
-      }
-      if (this.mapsService) {
-        // 防止事件重复监听
-        // this.mapsService.off('zoonanim', this.updateWhenZoom);
-        this.mapsService.off('camerachange', this.update);
-        this.mapsService.off('viewchange', this.update);
+  /**
+   * 设置 HTML 内容
+   * @param html
+   */
+  setHTML(html) {
+    this.popupOption.html = html;
+    return this.setDOMContent(html);
+  }
 
-        // this.mapsService.on('zoonanim', this.updateWhenZoom);
-        this.mapsService.on('camerachange', this.update);
-        this.mapsService.on('viewchange', this.update);
-      }
-      this.update();
-      if (this.popupOption.autoPan) {
-        setTimeout(function () {
-          _this2.panToPopup();
-        }, 0);
+  /**
+   * 设置 Popup 展示文本
+   * @param text
+   */
+  setText(text) {
+    this.popupOption.text = text;
+    return this.setDOMContent(window.document.createTextNode(text));
+  }
+  setTitle(title) {
+    this.show();
+    this.popupOption.title = title;
+    if (title) {
+      if (!this.contentTitle) {
+        this.contentTitle = _l7Utils.DOM.create('div', 'l7-popup-content__title');
+        if (this.content.firstChild) {
+          this.content.insertBefore(this.contentTitle, this.content.firstChild);
+        } else {
+          this.content.append(this.contentTitle);
+        }
       }
-      return this;
+      _l7Utils.DOM.clearChildren(this.contentTitle);
+      _l7Utils.DOM.appendElementType(this.contentTitle, title);
+    } else if (this.contentTitle) {
+      _l7Utils.DOM.remove(this.contentTitle);
+      this.contentTitle = undefined;
     }
+  }
 
-    /**
-     * 获取 Popup 所在经纬度
-     */
-  }, {
-    key: "getLnglat",
-    value: function getLnglat() {
-      return this.lngLat;
+  /**
+   * 将地图自动平移到气泡位置
+   */
+  panToPopup() {
+    const {
+      lng,
+      lat
+    } = this.lngLat;
+    if (this.popupOption.autoPan) {
+      this.mapsService.panTo([lng, lat]);
     }
+    return this;
+  }
+  setLngLat(lngLat) {
+    return this.setLnglat(lngLat);
+  }
 
-    /**
-     * 设置 Popup 最大宽度
-     * @param maxWidth
-     */
-  }, {
-    key: "setMaxWidth",
-    value: function setMaxWidth(maxWidth) {
-      this.popupOption.maxWidth = maxWidth;
-      this.update();
-      return this;
-    }
-  }, {
-    key: "isOpen",
-    value: function isOpen() {
-      return !!this.mapsService;
-    }
-  }, {
-    key: "getDefault",
-    value:
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    function getDefault(option) {
-      // tslint:disable-next-line:no-object-literal-type-assertion
-      return {
-        closeButton: true,
-        closeOnClick: false,
-        maxWidth: '240px',
-        offsets: [0, 0],
-        anchor: _l7Utils.anchorType.BOTTOM,
-        stopPropagation: true,
-        autoPan: false,
-        autoClose: true,
-        closeOnEsc: false,
-        followCursor: false
+  /**
+   * 设置 Popup 所在经纬度
+   * @param lngLat
+   */
+  setLnglat(lngLat) {
+    this.show();
+    this.lngLat = lngLat;
+    if (Array.isArray(lngLat)) {
+      this.lngLat = {
+        lng: lngLat[0],
+        lat: lngLat[1]
       };
     }
+    if (this.mapsService) {
+      // 防止事件重复监听
+      // this.mapsService.off('zoonanim', this.updateWhenZoom);
+      this.mapsService.off('camerachange', this.update);
+      this.mapsService.off('viewchange', this.update);
 
-    /**
-     * 设置 Popup 内容 HTML
-     * @param element
-     */
-  }, {
-    key: "setDOMContent",
-    value: function setDOMContent(element) {
-      this.show();
-      this.createContent();
-      _l7Utils.DOM.appendElementType(this.contentPanel, element);
-      this.update();
-      return this;
+      // this.mapsService.on('zoonanim', this.updateWhenZoom);
+      this.mapsService.on('camerachange', this.update);
+      this.mapsService.on('viewchange', this.update);
+    }
+    this.update();
+    if (this.popupOption.autoPan) {
+      setTimeout(() => {
+        this.panToPopup();
+      }, 0);
     }
+    return this;
+  }
 
-    /**
-     * 绑定地图点击事件触发销毁 Popup
-     * @protected
-     */
-  }, {
-    key: "updateCloseOnClick",
-    value: function updateCloseOnClick(onlyClear) {
-      var _this3 = this;
-      var mapsService = this.mapsService;
-      if (mapsService) {
-        mapsService === null || mapsService === void 0 || mapsService.off('click', this.onCloseButtonClick);
-        if (this.popupOption.closeOnClick && !onlyClear) {
-          requestAnimationFrame(function () {
-            mapsService === null || mapsService === void 0 || mapsService.on('click', _this3.onCloseButtonClick);
-          });
-        }
+  /**
+   * 获取 Popup 所在经纬度
+   */
+  getLnglat() {
+    return this.lngLat;
+  }
+
+  /**
+   * 设置 Popup 最大宽度
+   * @param maxWidth
+   */
+  setMaxWidth(maxWidth) {
+    this.popupOption.maxWidth = maxWidth;
+    this.update();
+    return this;
+  }
+  isOpen() {
+    return !!this.mapsService;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getDefault(option) {
+    // tslint:disable-next-line:no-object-literal-type-assertion
+    return {
+      closeButton: true,
+      closeOnClick: false,
+      maxWidth: '240px',
+      offsets: [0, 0],
+      anchor: _l7Utils.anchorType.BOTTOM,
+      stopPropagation: true,
+      autoPan: false,
+      autoClose: true,
+      closeOnEsc: false,
+      followCursor: false
+    };
+  }
+
+  /**
+   * 设置 Popup 内容 HTML
+   * @param element
+   */
+  setDOMContent(element) {
+    this.show();
+    this.createContent();
+    _l7Utils.DOM.appendElementType(this.contentPanel, element);
+    this.update();
+    return this;
+  }
+
+  /**
+   * 绑定地图点击事件触发销毁 Popup
+   * @protected
+   */
+  updateCloseOnClick(onlyClear) {
+    const mapsService = this.mapsService;
+    if (mapsService) {
+      mapsService === null || mapsService === void 0 || mapsService.off('click', this.onCloseButtonClick);
+      if (this.popupOption.closeOnClick && !onlyClear) {
+        requestAnimationFrame(() => {
+          mapsService === null || mapsService === void 0 || mapsService.on('click', this.onCloseButtonClick);
+        });
       }
     }
-  }, {
-    key: "updateCloseOnEsc",
-    value: function updateCloseOnEsc(onlyClear) {
-      window.removeEventListener('keydown', this.onKeyDown);
-      if (this.popupOption.closeOnEsc && !onlyClear) {
-        window.addEventListener('keydown', this.onKeyDown);
-      }
+  }
+  updateCloseOnEsc(onlyClear) {
+    window.removeEventListener('keydown', this.onKeyDown);
+    if (this.popupOption.closeOnEsc && !onlyClear) {
+      window.addEventListener('keydown', this.onKeyDown);
     }
-  }, {
-    key: "updateFollowCursor",
-    value: function updateFollowCursor(onlyClear) {
-      var _this$mapsService;
-      var container = (_this$mapsService = this.mapsService) === null || _this$mapsService === void 0 ? void 0 : _this$mapsService.getContainer();
-      if (container) {
-        container === null || container === void 0 || container.removeEventListener('mousemove', this.onMouseMove);
-        if (this.popupOption.followCursor && !onlyClear) {
-          container === null || container === void 0 || container.addEventListener('mousemove', this.onMouseMove);
-        }
+  }
+  updateFollowCursor(onlyClear) {
+    var _this$mapsService;
+    const container = (_this$mapsService = this.mapsService) === null || _this$mapsService === void 0 ? void 0 : _this$mapsService.getContainer();
+    if (container) {
+      container === null || container === void 0 || container.removeEventListener('mousemove', this.onMouseMove);
+      if (this.popupOption.followCursor && !onlyClear) {
+        container === null || container === void 0 || container.addEventListener('mousemove', this.onMouseMove);
       }
     }
-  }, {
-    key: "createContent",
-    value:
-    /**
-     * 创建 Popup 内容容器的 DOM （在每次 setHTML 或 setText 时都会被调用）
-     * @protected
-     */
-    function createContent() {
-      var _this4 = this;
-      if (this.content) {
-        _l7Utils.DOM.remove(this.content);
+  }
+  /**
+   * 创建 Popup 内容容器的 DOM （在每次 setHTML 或 setText 时都会被调用）
+   * @protected
+   */
+  createContent() {
+    if (this.content) {
+      _l7Utils.DOM.remove(this.content);
+    }
+    this.contentTitle = undefined;
+    this.content = _l7Utils.DOM.create('div', 'l7-popup-content', this.container);
+    this.setTitle(this.popupOption.title);
+    if (this.popupOption.closeButton) {
+      const 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.contentTitle = undefined;
-      this.content = _l7Utils.DOM.create('div', 'l7-popup-content', this.container);
-      this.setTitle(this.popupOption.title);
-      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', function () {
-          _this4.hide();
-        });
+      // this.closeButton.type = 'button';
+      closeButton.setAttribute('aria-label', 'Close popup');
+      closeButton.addEventListener('click', () => {
+        this.hide();
+      });
 
-        // 防止点击 Popup 关闭按钮时，触发 Layer click 事件
-        closeButton.addEventListener('pointerup', function (e) {
-          e.stopPropagation();
-        });
-        closeButton.addEventListener('pointerdown', function (e) {
-          e.stopPropagation();
-        });
-        this.closeButton = closeButton;
-      } else {
-        this.closeButton = undefined;
-      }
-      this.contentPanel = _l7Utils.DOM.create('div', 'l7-popup-content__panel', this.content);
+      // 防止点击 Popup 关闭按钮时，触发 Layer click 事件
+      closeButton.addEventListener('pointerup', e => {
+        e.stopPropagation();
+      });
+      closeButton.addEventListener('pointerdown', e => {
+        e.stopPropagation();
+      });
+      this.closeButton = closeButton;
+    } else {
+      this.closeButton = undefined;
     }
-  }, {
-    key: "setPopupPosition",
-    value:
-    /**
-     * 设置 Popup 相对于地图容器的 Position
-     * @param {Number} left
-     * @param {Number} top
-     * @param {Boolean} [useTransition=false] 是否使用过度效果
-     * @protected
-     */
-    function setPopupPosition(left, top) {
-      var useTransition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      if (this.container) {
-        var offsets = this.popupOption.offsets;
-        this.container.style.left = left + offsets[0] + 'px';
-        this.container.style.top = top - offsets[1] + 'px';
-        if (useTransition) {
-          this.container.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)';
-        } else {
-          this.container.style.transition = '';
-        }
+    this.contentPanel = _l7Utils.DOM.create('div', 'l7-popup-content__panel', this.content);
+  }
+  /**
+   * 设置 Popup 相对于地图容器的 Position
+   * @param {Number} left
+   * @param {Number} top
+   * @param {Boolean} [useTransition=false] 是否使用过度效果
+   * @protected
+   */
+  setPopupPosition(left, top, useTransition = false) {
+    if (this.container) {
+      const {
+        offsets
+      } = this.popupOption;
+      this.container.style.left = left + offsets[0] + 'px';
+      this.container.style.top = top - offsets[1] + 'px';
+      if (useTransition) {
+        this.container.style.transition = 'left 0.25s cubic-bezier(0,0,0.25,1), top 0.25s cubic-bezier(0,0,0.25,1)';
+      } else {
+        this.container.style.transition = '';
       }
     }
+  }
 
-    /**
-     * 检查当前传入 option 是否包含 keys 字段
-     * @param option
-     * @param keys
-     * @protected
-     */
-  }, {
-    key: "checkUpdateOption",
-    value: function checkUpdateOption(option, keys) {
-      return keys.some(function (key) {
-        return key in option;
-      });
-    }
-  }]);
-  return Popup;
-}(_eventemitter.EventEmitter);
+  /**
+   * 检查当前传入 option 是否包含 keys 字段
+   * @param option
+   * @param keys
+   * @protected
+   */
+  checkUpdateOption(option, keys) {
+    return keys.some(key => key in option);
+  }
+}
+exports.default = exports.Popup = Popup;