@antv/l7-component 2.11.2 → 2.11.4

package/es/popup/layerPopup.d.ts

@@ -1,15 +1,19 @@
 import { ILayer, IPopupOption } from '@antv/l7-core';
+import { DOM } from '@antv/l7-utils';
 import { Container } from 'inversify';
 import Popup from './popup';
+type ElementType = DOM.ElementType;
 export type LayerField = {
     field: string;
-    formatField?: ((field: string) => string) | string;
-    formatValue?: ((value: any) => any) | string;
+    formatField?: ElementType | ((field: string, feature: any) => ElementType);
+    formatValue?: ElementType | ((value: any, feature: any) => ElementType);
     getValue?: (feature: any) => any;
 };
 export type LayerPopupConfigItem = {
     layer: ILayer | string;
-    fields: Array<LayerField | string>;
+    fields?: Array<LayerField | string>;
+    title?: ElementType | ((feature: any) => ElementType);
+    customContent?: ElementType | ((feature: any) => ElementType);
 };
 export interface ILayerPopupOption extends IPopupOption {
     config?: LayerPopupConfigItem[];
@@ -62,7 +66,10 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
      * @param e
      * @protected
      */
-    protected getLayerInfoFrag(layer: ILayer, e: any): DocumentFragment;
+    protected getLayerInfoFrag(layer: ILayer, e: any): {
+        title: DocumentFragment | undefined;
+        content: DocumentFragment;
+    };
     /**
      * 通过 Layer 配置访问到真实的 Layer 实例
      * @param configItem

package/es/popup/layerPopup.js

@@ -89,6 +89,7 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
         },
         offsets: [0, 10],
         closeButton: false,
+        closeOnClick: false,
         autoClose: false,
         closeOnEsc: false
       });
@@ -188,15 +189,16 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     key: "onLayerMouseMove",
     value: function onLayerMouseMove(layer, e) {
       if (!this.isSameFeature(layer, e.featureId)) {
-        var frag = this.getLayerInfoFrag(layer, e);
-        this.setDOMContent(frag);
+        var _this$getLayerInfoFra = this.getLayerInfoFrag(layer, e),
+            title = _this$getLayerInfoFra.title,
+            content = _this$getLayerInfoFra.content;
+
+        this.setDOMContent(content);
+        this.setTitle(title);
         this.displayFeatureInfo = {
           layer: layer,
           featureId: e.featureId
         };
-      }
-
-      if (!this.isShow) {
         this.show();
       }
     } // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -216,14 +218,18 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
       if (this.isShow && this.isSameFeature(layer, e.featureId)) {
         this.hide();
       } else {
-        var frag = this.getLayerInfoFrag(layer, e);
-        this.setDOMContent(frag);
+        var _this$getLayerInfoFra2 = this.getLayerInfoFrag(layer, e),
+            title = _this$getLayerInfoFra2.title,
+            content = _this$getLayerInfoFra2.content;
+
+        this.setDOMContent(content);
         this.setLnglat(e.lngLat);
-        this.show();
+        this.setTitle(title);
         this.displayFeatureInfo = {
           layer: layer,
           featureId: e.featureId
         };
+        this.show();
       }
     }
   }, {
@@ -247,7 +253,8 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     key: "getLayerInfoFrag",
     value: function getLayerInfoFrag(layer, e) {
       var layerInfo = this.layerConfigMap.get(layer);
-      var frag = document.createDocumentFragment();
+      var titleFrag;
+      var contentFrag = document.createDocumentFragment();
 
       if (layerInfo) {
         var _feature = e.feature;
@@ -256,29 +263,50 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
           _feature = _feature.properties;
         }
 
-        var fields = layerInfo.fields;
-        fields === null || fields === void 0 ? void 0 : fields.forEach(function (fieldConfig) {
-          var _ref3, _ref4;
-
-          var _ref2 = typeof fieldConfig === 'string' ? // tslint:disable-next-line:no-object-literal-type-assertion
-          {
-            field: fieldConfig
-          } : fieldConfig,
-              field = _ref2.field,
-              formatField = _ref2.formatField,
-              formatValue = _ref2.formatValue,
-              getValue = _ref2.getValue;
-
-          var row = DOM.create('div', 'l7-layer-popup__row');
-          var value = getValue ? getValue(e.feature) : get(_feature, field);
-          var fieldText = (_ref3 = formatField instanceof Function ? formatField(field) : formatField) !== null && _ref3 !== void 0 ? _ref3 : field;
-          var valueText = (_ref4 = formatValue instanceof Function ? formatValue(value) : formatValue) !== null && _ref4 !== void 0 ? _ref4 : value;
-          row.innerHTML = "<span class=\"l7-layer-popup__key\">".concat(fieldText, "</span>: <span class=\"l7-layer-popup__value\">").concat(valueText, "</span>");
-          frag.appendChild(row);
-        });
+        var title = layerInfo.title,
+            fields = layerInfo.fields,
+            customContent = layerInfo.customContent;
+
+        if (title) {
+          titleFrag = document.createDocumentFragment();
+          var titleElement = title instanceof Function ? title(_feature) : title;
+          DOM.appendElementType(titleFrag, titleElement);
+        }
+
+        if (customContent) {
+          var content = customContent instanceof Function ? customContent(_feature) : customContent;
+          DOM.appendElementType(contentFrag, content);
+        } else if (fields !== null && fields !== void 0 && fields.length) {
+          fields === null || fields === void 0 ? void 0 : fields.forEach(function (fieldConfig) {
+            var _ref3, _ref4;
+
+            var _ref2 = typeof fieldConfig === 'string' ? // tslint:disable-next-line:no-object-literal-type-assertion
+            {
+              field: fieldConfig
+            } : fieldConfig,
+                field = _ref2.field,
+                formatField = _ref2.formatField,
+                formatValue = _ref2.formatValue,
+                getValue = _ref2.getValue;
+
+            var row = DOM.create('div', 'l7-layer-popup__row');
+            var value = getValue ? getValue(e.feature) : get(_feature, field);
+            var fieldElement = (_ref3 = formatField instanceof Function ? formatField(field, _feature) : formatField) !== null && _ref3 !== void 0 ? _ref3 : field;
+            var valueElement = (_ref4 = formatValue instanceof Function ? formatValue(value, _feature) : formatValue) !== null && _ref4 !== void 0 ? _ref4 : value;
+            var fieldSpan = DOM.create('span', 'l7-layer-popup__key', row);
+            DOM.appendElementType(fieldSpan, fieldElement);
+            DOM.appendElementType(fieldSpan, document.createTextNode('：'));
+            var valueSpan = DOM.create('span', 'l7-layer-popup__value', row);
+            DOM.appendElementType(valueSpan, valueElement);
+            contentFrag.appendChild(row);
+          });
+        }
       }
 
-      return frag;
+      return {
+        title: titleFrag,
+        content: contentFrag
+      };
     }
     /**
      * 通过 Layer 配置访问到真实的 Layer 实例

package/es/popup/popup.d.ts

@@ -1,6 +1,8 @@
-import { ILayerService, ILngLat, IMapService, IPopup, IPopupOption, ISceneService, PopupHTML } from '@antv/l7-core';
+import { ILayerService, ILngLat, IMapService, IPopup, IPopupOption, ISceneService } from '@antv/l7-core';
+import { DOM } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
 import { Container } from 'inversify';
+type ElementType = DOM.ElementType;
 export { Popup };
 export default class Popup<O extends IPopupOption = IPopupOption> extends EventEmitter implements IPopup {
     /**
@@ -37,11 +39,6 @@ export default class Popup<O extends IPopupOption = IPopupOption> extends EventE
      * @protected
      */
     protected contentPanel: HTMLElement;
-    /**
-     * popup 内容标题
-     * @protected
-     */
-    protected title: HTMLElement;
     /**
      * 气泡箭头对应的 DOM
      * @protected
@@ -71,12 +68,13 @@ export default class Popup<O extends IPopupOption = IPopupOption> extends EventE
      * 设置 HTML 内容
      * @param html
      */
-    setHTML(html: PopupHTML): this;
+    setHTML(html: ElementType): this;
     /**
      * 设置 Popup 展示文本
      * @param text
      */
     setText(text: string): this;
+    setTitle(title?: ElementType): void;
     /**
      * 将地图自动平移到气泡位置
      */
@@ -106,9 +104,9 @@ export default class Popup<O extends IPopupOption = IPopupOption> extends EventE
     protected getDefault(option: Partial<O>): O;
     /**
      * 设置 Popup 内容 HTML
-     * @param htmlNode
+     * @param element
      */
-    protected setDOMContent(htmlNode: ChildNode | DocumentFragment): this;
+    protected setDOMContent(element: ElementType): this;
     /**
      * 绑定地图点击事件触发销毁 Popup
      * @protected
@@ -138,10 +136,4 @@ export default class Popup<O extends IPopupOption = IPopupOption> extends EventE
      * @protected
      */
     protected checkUpdateOption(option: Partial<O>, keys: Array<keyof O>): boolean;
-    /**
-     * 根据参数 HTML 片段返回对应的 Fragment
-     * @param html
-     * @protected
-     */
-    protected getPopupHTMLFragment(html: PopupHTML): DocumentFragment;
 }

package/es/popup/popup.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
@@ -169,11 +168,6 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
      * @protected
      */
 
-    /**
-     * popup 内容标题
-     * @protected
-     */
-
     /**
      * 气泡箭头对应的 DOM
      * @protected
@@ -215,7 +209,8 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       this.updateFollowCursor();
       var _this$popupOption2 = this.popupOption,
           html = _this$popupOption2.html,
-          text = _this$popupOption2.text;
+          text = _this$popupOption2.text,
+          title = _this$popupOption2.title;
 
       if (html) {
         this.setHTML(html);
@@ -223,6 +218,10 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         this.setText(text);
       }
 
+      if (title) {
+        this.setTitle(title);
+      }
+
       this.emit('open');
       return this;
     } // 移除popup
@@ -273,13 +272,17 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       this.show();
       this.popupOption = _objectSpread(_objectSpread({}, this.popupOption), option);
 
-      if (this.checkUpdateOption(option, ['closeButton', 'closeButtonOffsets', 'maxWidth', 'anchor', 'stopPropagation', 'className', 'style', 'lngLat', 'offsets', 'title'])) {
+      if (this.checkUpdateOption(option, ['closeButton', 'closeButtonOffsets', 'maxWidth', 'anchor', 'stopPropagation', 'className', 'style', 'lngLat', 'offsets'])) {
         if (this.container) {
           DOM.remove(this.container); // @ts-ignore
 
           this.container = undefined;
         }
 
+        if (this.popupOption.title) {
+          this.setTitle(this.popupOption.title);
+        }
+
         if (this.popupOption.html) {
           this.setHTML(this.popupOption.html);
         } else if (this.popupOption.text) {
@@ -305,6 +308,10 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         this.setText(option.text);
       }
 
+      if (this.checkUpdateOption(option, ['title'])) {
+        this.setTitle(option.title);
+      }
+
       if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) {
         this.setLnglat(option.lngLat);
       }
@@ -362,7 +369,7 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     key: "setHTML",
     value: function setHTML(html) {
       this.popupOption.html = html;
-      return this.setDOMContent(this.getPopupHTMLFragment(html));
+      return this.setDOMContent(html);
     }
     /**
      * 设置 Popup 展示文本
@@ -375,6 +382,29 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       this.popupOption.text = text;
       return this.setDOMContent(window.document.createTextNode(text));
     }
+  }, {
+    key: "setTitle",
+    value: function setTitle(title) {
+      this.show();
+
+      if (title) {
+        if (!this.contentTitle) {
+          this.contentTitle = 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);
+          }
+        }
+
+        DOM.clearChildren(this.contentTitle);
+        DOM.appendElementType(this.contentTitle, title);
+      } else if (this.contentTitle) {
+        DOM.remove(this.contentTitle);
+        this.contentTitle = undefined;
+      }
+    }
     /**
      * 将地图自动平移到气泡位置
      */
@@ -481,15 +511,15 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     }
     /**
      * 设置 Popup 内容 HTML
-     * @param htmlNode
+     * @param element
      */
 
   }, {
     key: "setDOMContent",
-    value: function setDOMContent(htmlNode) {
+    value: function setDOMContent(element) {
       this.show();
       this.createContent();
-      this.contentPanel.appendChild(htmlNode);
+      DOM.appendElementType(this.contentPanel, element);
       this.update();
       return this;
     }
@@ -553,17 +583,9 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         DOM.remove(this.content);
       }
 
+      this.contentTitle = undefined;
       this.content = DOM.create('div', 'l7-popup-content', this.container);
 
-      if (this.popupOption.title) {
-        var _this$contentTitle;
-
-        this.contentTitle = 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 = createL7Icon('l7-icon-guanbi');
         DOM.addClass(closeButton, 'l7-popup-close-button');
@@ -617,39 +639,6 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         return key in option;
       });
     }
-    /**
-     * 根据参数 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, _toConsumableArray(html));
-      } else if (html instanceof HTMLElement) {
-        temp.append(html);
-      }
-
-      while (true) {
-        child = temp.firstChild;
-
-        if (!child) {
-          break;
-        }
-
-        frag.appendChild(child);
-      }
-
-      return frag;
-    }
   }]);
 
   return Popup;

package/lib/popup/layerPopup.js

@@ -100,6 +100,7 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
         },
         offsets: [0, 10],
         closeButton: false,
+        closeOnClick: false,
         autoClose: false,
         closeOnEsc: false
       });
@@ -199,15 +200,16 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     key: "onLayerMouseMove",
     value: function onLayerMouseMove(layer, e) {
       if (!this.isSameFeature(layer, e.featureId)) {
-        var frag = this.getLayerInfoFrag(layer, e);
-        this.setDOMContent(frag);
+        var _this$getLayerInfoFra = this.getLayerInfoFrag(layer, e),
+            title = _this$getLayerInfoFra.title,
+            content = _this$getLayerInfoFra.content;
+
+        this.setDOMContent(content);
+        this.setTitle(title);
         this.displayFeatureInfo = {
           layer: layer,
           featureId: e.featureId
         };
-      }
-
-      if (!this.isShow) {
         this.show();
       }
     } // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -227,14 +229,18 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
       if (this.isShow && this.isSameFeature(layer, e.featureId)) {
         this.hide();
       } else {
-        var frag = this.getLayerInfoFrag(layer, e);
-        this.setDOMContent(frag);
+        var _this$getLayerInfoFra2 = this.getLayerInfoFrag(layer, e),
+            title = _this$getLayerInfoFra2.title,
+            content = _this$getLayerInfoFra2.content;
+
+        this.setDOMContent(content);
         this.setLnglat(e.lngLat);
-        this.show();
+        this.setTitle(title);
         this.displayFeatureInfo = {
           layer: layer,
           featureId: e.featureId
         };
+        this.show();
       }
     }
   }, {
@@ -258,7 +264,8 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
     key: "getLayerInfoFrag",
     value: function getLayerInfoFrag(layer, e) {
       var layerInfo = this.layerConfigMap.get(layer);
-      var frag = document.createDocumentFragment();
+      var titleFrag;
+      var contentFrag = document.createDocumentFragment();
 
       if (layerInfo) {
         var _feature = e.feature;
@@ -267,30 +274,59 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
           _feature = _feature.properties;
         }
 
-        var fields = layerInfo.fields;
-        fields === null || fields === void 0 ? void 0 : fields.forEach(function (fieldConfig) {
-          var _ref3, _ref4;
-
-          var _ref2 = typeof fieldConfig === 'string' ? // tslint:disable-next-line:no-object-literal-type-assertion
-          {
-            field: fieldConfig
-          } : fieldConfig,
-              field = _ref2.field,
-              formatField = _ref2.formatField,
-              formatValue = _ref2.formatValue,
-              getValue = _ref2.getValue;
-
-          var row = _l7Utils.DOM.create('div', 'l7-layer-popup__row');
-
-          var value = getValue ? getValue(e.feature) : (0, _lodash.get)(_feature, field);
-          var fieldText = (_ref3 = formatField instanceof Function ? formatField(field) : formatField) !== null && _ref3 !== void 0 ? _ref3 : field;
-          var valueText = (_ref4 = formatValue instanceof Function ? formatValue(value) : formatValue) !== null && _ref4 !== void 0 ? _ref4 : value;
-          row.innerHTML = "<span class=\"l7-layer-popup__key\">".concat(fieldText, "</span>: <span class=\"l7-layer-popup__value\">").concat(valueText, "</span>");
-          frag.appendChild(row);
-        });
+        var title = layerInfo.title,
+            fields = layerInfo.fields,
+            customContent = layerInfo.customContent;
+
+        if (title) {
+          titleFrag = document.createDocumentFragment();
+          var titleElement = title instanceof Function ? title(_feature) : title;
+
+          _l7Utils.DOM.appendElementType(titleFrag, titleElement);
+        }
+
+        if (customContent) {
+          var content = customContent instanceof Function ? customContent(_feature) : customContent;
+
+          _l7Utils.DOM.appendElementType(contentFrag, content);
+        } else if (fields !== null && fields !== void 0 && fields.length) {
+          fields === null || fields === void 0 ? void 0 : fields.forEach(function (fieldConfig) {
+            var _ref3, _ref4;
+
+            var _ref2 = typeof fieldConfig === 'string' ? // tslint:disable-next-line:no-object-literal-type-assertion
+            {
+              field: fieldConfig
+            } : fieldConfig,
+                field = _ref2.field,
+                formatField = _ref2.formatField,
+                formatValue = _ref2.formatValue,
+                getValue = _ref2.getValue;
+
+            var row = _l7Utils.DOM.create('div', 'l7-layer-popup__row');
+
+            var value = getValue ? getValue(e.feature) : (0, _lodash.get)(_feature, field);
+            var fieldElement = (_ref3 = formatField instanceof Function ? formatField(field, _feature) : formatField) !== null && _ref3 !== void 0 ? _ref3 : field;
+            var valueElement = (_ref4 = formatValue instanceof Function ? formatValue(value, _feature) : formatValue) !== null && _ref4 !== void 0 ? _ref4 : value;
+
+            var fieldSpan = _l7Utils.DOM.create('span', 'l7-layer-popup__key', row);
+
+            _l7Utils.DOM.appendElementType(fieldSpan, fieldElement);
+
+            _l7Utils.DOM.appendElementType(fieldSpan, document.createTextNode('：'));
+
+            var valueSpan = _l7Utils.DOM.create('span', 'l7-layer-popup__value', row);
+
+            _l7Utils.DOM.appendElementType(valueSpan, valueElement);
+
+            contentFrag.appendChild(row);
+          });
+        }
       }
 
-      return frag;
+      return {
+        title: titleFrag,
+        content: contentFrag
+      };
     }
     /**
      * 通过 Layer 配置访问到真实的 Layer 实例

package/lib/popup/popup.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 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"));
@@ -181,11 +179,6 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
      * @protected
      */
 
-    /**
-     * popup 内容标题
-     * @protected
-     */
-
     /**
      * 气泡箭头对应的 DOM
      * @protected
@@ -227,7 +220,8 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       this.updateFollowCursor();
       var _this$popupOption2 = this.popupOption,
           html = _this$popupOption2.html,
-          text = _this$popupOption2.text;
+          text = _this$popupOption2.text,
+          title = _this$popupOption2.title;
 
       if (html) {
         this.setHTML(html);
@@ -235,6 +229,10 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         this.setText(text);
       }
 
+      if (title) {
+        this.setTitle(title);
+      }
+
       this.emit('open');
       return this;
     } // 移除popup
@@ -286,7 +284,7 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       this.show();
       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.checkUpdateOption(option, ['closeButton', 'closeButtonOffsets', 'maxWidth', 'anchor', 'stopPropagation', 'className', 'style', 'lngLat', 'offsets'])) {
         if (this.container) {
           _l7Utils.DOM.remove(this.container); // @ts-ignore
 
@@ -294,6 +292,10 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
           this.container = undefined;
         }
 
+        if (this.popupOption.title) {
+          this.setTitle(this.popupOption.title);
+        }
+
         if (this.popupOption.html) {
           this.setHTML(this.popupOption.html);
         } else if (this.popupOption.text) {
@@ -319,6 +321,10 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         this.setText(option.text);
       }
 
+      if (this.checkUpdateOption(option, ['title'])) {
+        this.setTitle(option.title);
+      }
+
       if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) {
         this.setLnglat(option.lngLat);
       }
@@ -376,7 +382,7 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     key: "setHTML",
     value: function setHTML(html) {
       this.popupOption.html = html;
-      return this.setDOMContent(this.getPopupHTMLFragment(html));
+      return this.setDOMContent(html);
     }
     /**
      * 设置 Popup 展示文本
@@ -389,6 +395,31 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
       this.popupOption.text = text;
       return this.setDOMContent(window.document.createTextNode(text));
     }
+  }, {
+    key: "setTitle",
+    value: function setTitle(title) {
+      this.show();
+
+      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;
+      }
+    }
     /**
      * 将地图自动平移到气泡位置
      */
@@ -495,15 +526,17 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     }
     /**
      * 设置 Popup 内容 HTML
-     * @param htmlNode
+     * @param element
      */
 
   }, {
     key: "setDOMContent",
-    value: function setDOMContent(htmlNode) {
+    value: function setDOMContent(element) {
       this.show();
       this.createContent();
-      this.contentPanel.appendChild(htmlNode);
+
+      _l7Utils.DOM.appendElementType(this.contentPanel, element);
+
       this.update();
       return this;
     }
@@ -567,17 +600,9 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         _l7Utils.DOM.remove(this.content);
       }
 
+      this.contentTitle = undefined;
       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');
 
@@ -633,39 +658,6 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
         return key in option;
       });
     }
-    /**
-     * 根据参数 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);
-      }
-
-      return frag;
-    }
   }]);
   return Popup;
 }(_eventemitter.EventEmitter);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.11.2",
+  "version": "2.11.4",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,8 +26,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "2.11.2",
-    "@antv/l7-utils": "2.11.2",
+    "@antv/l7-core": "2.11.4",
+    "@antv/l7-utils": "2.11.4",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",
@@ -36,11 +36,11 @@
     "supercluster": "^7.0.0"
   },
   "devDependencies": {
-    "@antv/l7-test-utils": "2.11.2",
+    "@antv/l7-test-utils": "2.11.4",
     "gcoord": "^0.3.2",
     "less": "^4.1.3"
   },
-  "gitHead": "736a5ea590dca72c2ac2b0ded9f371ad4c95a72a",
+  "gitHead": "ba7891204096a2d565fffdf27210ed98e7d26ebf",
   "publishConfig": {
     "access": "public"
   }