@antv/l7-component 2.11.1 → 2.11.3

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
@@ -270,15 +269,20 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "setOptions",
     value: function setOptions(option) {
+      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) {
@@ -304,9 +308,12 @@ 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);
-        this.show();
       }
 
       return this;
@@ -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;
+      }
+    }
     /**
      * 将地图自动平移到气泡位置
      */
@@ -407,6 +437,7 @@ var Popup = /*#__PURE__*/function (_EventEmitter) {
     value: function setLnglat(lngLat) {
       var _this2 = this;
 
+      this.show();
       this.lngLat = lngLat;
 
       if (Array.isArray(lngLat)) {
@@ -480,14 +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;
     }
@@ -551,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');
@@ -615,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/control/logo.js

@@ -43,7 +43,7 @@ var Logo = /*#__PURE__*/function (_Control) {
       return {
         position: _baseControl.PositionType.BOTTOMLEFT,
         name: 'logo',
-        href: 'https://l7.antv.vision/',
+        href: 'https://l7.antv.antgroup.com/',
         img: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GRb1TKp4HcMAAAAAAAAAAAAAARQnAQ'
       };
     }

package/lib/css/index.css

@@ -422,7 +422,6 @@
   z-index: 5;
   display: -webkit-flex;
   display: flex;
-  pointer-events: none;
   will-change: transform;
 }
 .l7-popup.l7-popup-hide {
@@ -431,15 +430,18 @@
 .l7-popup .l7-popup-content {
   position: relative;
   padding: 16px;
+  font-size: 14px;
   background: #fff;
   border-radius: 3px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  pointer-events: auto;
-  font-size: 14px;
 }
 .l7-popup .l7-popup-content .l7-popup-content__title {
-  font-weight: bold;
   margin-bottom: 8px;
+  font-weight: bold;
+}
+.l7-popup .l7-popup-content .l7-popup-content__title,
+.l7-popup .l7-popup-content .l7-popup-content__panel {
+  white-space: break-spaces;
 }
 .l7-popup .l7-popup-content .l7-popup-close-button {
   position: absolute;
@@ -447,16 +449,17 @@
   right: 0;
   width: 18px;
   height: 18px;
+  padding: 0;
+  font-size: 14px;
   line-height: 18px;
   text-align: center;
-  padding: 0;
   background-color: transparent;
   border: 0;
   border-radius: 0 3px 0 0;
   cursor: pointer;
-  font-size: 14px;
 }
 .l7-popup .l7-popup-tip {
+  position: relative;
   z-index: 1;
   width: 0;
   height: 0;
@@ -468,12 +471,22 @@
   -webkit-flex-direction: column-reverse;
   flex-direction: column-reverse;
 }
+.l7-popup.l7-popup-anchor-bottom .l7-popup-tip,
+.l7-popup.l7-popup-anchor-bottom-left .l7-popup-tip,
+.l7-popup.l7-popup-anchor-bottom-right .l7-popup-tip {
+  bottom: 1px;
+}
 .l7-popup.l7-popup-anchor-top,
 .l7-popup.l7-popup-anchor-top-left,
 .l7-popup.l7-popup-anchor-top-right {
   -webkit-flex-direction: column;
   flex-direction: column;
 }
+.l7-popup.l7-popup-anchor-top .l7-popup-tip,
+.l7-popup.l7-popup-anchor-top-left .l7-popup-tip,
+.l7-popup.l7-popup-anchor-top-right .l7-popup-tip {
+  top: 1px;
+}
 .l7-popup.l7-popup-anchor-left {
   -webkit-flex-direction: row;
   flex-direction: row;
@@ -483,6 +496,7 @@
   flex-direction: row-reverse;
 }
 .l7-popup-anchor-top .l7-popup-tip {
+  position: relative;
   -webkit-align-self: center;
   align-self: center;
   border-top: none;
@@ -529,6 +543,7 @@
   border-left: none;
 }
 .l7-popup-anchor-right .l7-popup-tip {
+  right: 1px;
   -webkit-align-self: center;
   align-self: center;
   border-right: none;

package/lib/css/popup.less

@@ -7,7 +7,6 @@
   z-index: 5;
   display: -webkit-flex;
   display: flex;
-  pointer-events: none;
   will-change: transform;
   &.l7-popup-hide {
     display: none;
@@ -16,15 +15,19 @@
   .l7-popup-content {
     position: relative;
     padding: 16px;
+    font-size: 14px;
     background: #fff;
     border-radius: 3px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    pointer-events: auto;
-    font-size: 14px;
 
     .l7-popup-content__title {
-      font-weight: bold;
       margin-bottom: 8px;
+      font-weight: bold;
+    }
+
+    .l7-popup-content__title,
+    .l7-popup-content__panel {
+      white-space: break-spaces;
     }
 
     .l7-popup-close-button {
@@ -33,18 +36,19 @@
       right: 0;
       width: 18px;
       height: 18px;
+      padding: 0;
+      font-size: 14px;
       line-height: 18px;
       text-align: center;
-      padding: 0;
       background-color: transparent;
       border: 0;
       border-radius: 0 3px 0 0;
       cursor: pointer;
-      font-size: 14px;
     }
   }
 
   .l7-popup-tip {
+    position: relative;
     z-index: 1;
     width: 0;
     height: 0;
@@ -56,6 +60,9 @@
   &.l7-popup-anchor-bottom-right {
     -webkit-flex-direction: column-reverse;
     flex-direction: column-reverse;
+    .l7-popup-tip {
+      bottom: 1px;
+    }
   }
 
   &.l7-popup-anchor-top,
@@ -63,6 +70,9 @@
   &.l7-popup-anchor-top-right {
     -webkit-flex-direction: column;
     flex-direction: column;
+    .l7-popup-tip {
+      top: 1px;
+    }
   }
 
   &.l7-popup-anchor-left {
@@ -77,6 +87,7 @@
 }
 
 .l7-popup-anchor-top .l7-popup-tip {
+  position: relative;
   -webkit-align-self: center;
   align-self: center;
   border-top: none;
@@ -130,6 +141,7 @@
 }
 
 .l7-popup-anchor-right .l7-popup-tip {
+  right: 1px;
   -webkit-align-self: center;
   align-self: center;
   border-right: none;

package/lib/index.js

@@ -251,4 +251,4 @@ function loadStyles(css, doc) {
   return style;
 }
 
-loadStyles(".l7-marker-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.l7-marker {\n  position: absolute !important;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  cursor: pointer;\n}\n.l7-marker-cluster {\n  width: 40px;\n  height: 40px;\n  background-color: rgba(181, 226, 140, 0.6);\n  background-clip: padding-box;\n  border-radius: 20px;\n}\n.l7-marker-cluster div {\n  width: 30px;\n  height: 30px;\n  margin-top: 5px;\n  margin-left: 5px;\n  font: 12px 'Helvetica Neue', Arial, Helvetica, sans-serif;\n  text-align: center;\n  background-color: rgba(110, 204, 57, 0.6);\n  border-radius: 15px;\n}\n.l7-marker-cluster span {\n  line-height: 30px;\n}\n.l7-touch .l7-control-attribution,\n.l7-touch .l7-control-layers,\n.l7-touch .l7-bar {\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n.l7-touch .l7-control-layers,\n.l7-touch .l7-bar {\n  background-clip: padding-box;\n  border: 2px solid rgba(0, 0, 0, 0.2);\n}\n.mapboxgl-ctrl-logo,\n.amap-logo {\n  display: none !important;\n}\n.l7-select-box {\n  border: 3px dashed gray;\n  border-radius: 2px;\n  position: absolute;\n  z-index: 1000;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n.l7-control-container {\n  font: 12px/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif;\n}\n.l7-control-container .l7-control {\n  position: relative;\n  z-index: 800;\n  float: left;\n  clear: both;\n  color: #595959;\n  font-size: 12px;\n  pointer-events: visiblePainted;\n  /* IE 9-10 doesn't have auto */\n  pointer-events: auto;\n}\n.l7-control-container .l7-control.l7-control--hide {\n  display: none;\n}\n.l7-control-container .l7-top {\n  top: 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  z-index: 1000;\n  pointer-events: none;\n}\n.l7-control-container .l7-top .l7-control:not(.l7-control--hide) {\n  margin-top: 8px;\n}\n.l7-control-container .l7-right {\n  right: 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  z-index: 1000;\n  pointer-events: none;\n}\n.l7-control-container .l7-right .l7-control:not(.l7-control--hide) {\n  margin-right: 8px;\n}\n.l7-control-container .l7-bottom {\n  bottom: 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  z-index: 1000;\n  pointer-events: none;\n}\n.l7-control-container .l7-bottom .l7-control:not(.l7-control--hide) {\n  margin-bottom: 8px;\n}\n.l7-control-container .l7-left {\n  left: 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  z-index: 1000;\n  pointer-events: none;\n}\n.l7-control-container .l7-left .l7-control:not(.l7-control--hide) {\n  margin-left: 8px;\n}\n.l7-control-container .l7-center {\n  position: absolute;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n.l7-control-container .l7-center.l7-top,\n.l7-control-container .l7-center.l7-bottom {\n  width: 100%;\n}\n.l7-control-container .l7-center.l7-left,\n.l7-control-container .l7-center.l7-right {\n  height: 100%;\n}\n.l7-control-container .l7-center .l7-control {\n  margin-right: 8px;\n  margin-bottom: 8px;\n}\n.l7-control-container .l7-row {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: row;\n          flex-direction: row;\n}\n.l7-control-container .l7-row.l7-top {\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n}\n.l7-control-container .l7-row.l7-bottom {\n  -webkit-box-align: end;\n      -ms-flex-align: end;\n          align-items: flex-end;\n}\n.l7-control-container .l7-column {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n.l7-control-container .l7-column.l7-left {\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n}\n.l7-control-container .l7-column.l7-right {\n  -webkit-box-align: end;\n      -ms-flex-align: end;\n          align-items: flex-end;\n}\n.l7-button-control {\n  min-width: 28px;\n  height: 28px;\n  background-color: #fff;\n  border-width: 0;\n  border-radius: 2px;\n  outline: 0;\n  cursor: pointer;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  padding: 0 6px;\n  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n  line-height: 16px;\n}\n.l7-button-control .l7-iconfont {\n  fill: #595959;\n  color: #595959;\n  width: 16px;\n  height: 16px;\n}\n.l7-button-control.l7-button-control--row {\n  padding: 0 16px 0 13px;\n}\n.l7-button-control.l7-button-control--row * + .l7-button-control__text {\n  margin-left: 8px;\n}\n.l7-button-control.l7-button-control--column {\n  height: 44px;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n.l7-button-control.l7-button-control--column .l7-iconfont {\n  margin-top: 3px;\n}\n.l7-button-control.l7-button-control--column .l7-button-control__text {\n  margin-top: 3px;\n  font-size: 10px;\n  -webkit-transform: scale(0.83333);\n          transform: scale(0.83333);\n}\n.l7-button-control:not(:disabled):hover {\n  background-color: #f3f3f3;\n}\n.l7-button-control:not(:disabled):active {\n  background-color: #f3f3f3;\n}\n.l7-button-control:disabled {\n  background-color: #fafafa;\n  color: #bdbdbd;\n  cursor: not-allowed;\n}\n.l7-button-control:disabled .l7-iconfont {\n  fill: #bdbdbd;\n  color: #bdbdbd;\n}\n.l7-button-control:disabled:hover {\n  background-color: #fafafa;\n}\n.l7-button-control:disabled:active {\n  background-color: #fafafa;\n}\n.l7-popper {\n  position: absolute;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  z-index: 5;\n  color: #595959;\n}\n.l7-popper.l7-popper-hide {\n  display: none;\n}\n.l7-popper .l7-popper-content {\n  min-height: 28px;\n  background: #fff;\n  border-radius: 2px;\n  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n}\n.l7-popper .l7-popper-arrow {\n  width: 0;\n  height: 0;\n  border-width: 4px;\n  border-style: solid;\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-left-color: transparent;\n  border-right-color: transparent;\n  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n}\n.l7-popper.l7-popper-left {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: row;\n          flex-direction: row;\n}\n.l7-popper.l7-popper-left .l7-popper-arrow {\n  border-left-color: #fff;\n  margin: 10px 0;\n}\n.l7-popper.l7-popper-right {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: row-reverse;\n          flex-direction: row-reverse;\n}\n.l7-popper.l7-popper-right .l7-popper-arrow {\n  border-right-color: #fff;\n  margin: 10px 0;\n}\n.l7-popper.l7-popper-top {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n.l7-popper.l7-popper-top .l7-popper-arrow {\n  border-top-color: #fff;\n  margin: 0 10px;\n}\n.l7-popper.l7-popper-bottom {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: column-reverse;\n          flex-direction: column-reverse;\n}\n.l7-popper.l7-popper-bottom .l7-popper-arrow {\n  border-bottom-color: #fff;\n  margin: 0 10px;\n}\n.l7-popper.l7-popper-start {\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n}\n.l7-popper.l7-popper-end {\n  -webkit-box-align: end;\n      -ms-flex-align: end;\n          align-items: flex-end;\n}\n.l7-select-control--normal {\n  padding: 4px 0;\n}\n.l7-select-control--normal .l7-select-control-item {\n  height: 24px;\n  line-height: 24px;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  padding: 0 16px;\n  font-size: 12px;\n}\n.l7-select-control--normal .l7-select-control-item > * + * {\n  margin-left: 6px;\n}\n.l7-select-control--normal .l7-select-control-item input[type='checkbox'] {\n  height: 14px;\n  width: 14px;\n}\n.l7-select-control--normal .l7-select-control-item:hover {\n  background-color: #f3f3f3;\n}\n.l7-select-control--image {\n  padding: 12px 12px 0 12px;\n  width: 474px;\n  height: 320px;\n  overflow: auto;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n}\n.l7-select-control--image .l7-select-control-item {\n  margin-right: 12px;\n  border-radius: 2px;\n  overflow: hidden;\n  border: 1px solid #fff;\n  -webkit-box-sizing: content-box;\n          box-sizing: content-box;\n  width: calc((100% - 36px) / 3);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  margin-bottom: 12px;\n  position: relative;\n  font-size: 12px;\n}\n.l7-select-control--image .l7-select-control-item img {\n  width: 142px;\n  height: 80px;\n}\n.l7-select-control--image .l7-select-control-item input[type='checkbox'] {\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.l7-select-control--image .l7-select-control-item .l7-select-control-item-row {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  line-height: 26px;\n}\n.l7-select-control--image .l7-select-control-item .l7-select-control-item-row > * + * {\n  margin-left: 8px;\n}\n.l7-select-control--image .l7-select-control-item.l7-select-control-item-active {\n  border-color: #0370fe;\n}\n.l7-select-control--image .l7-select-control-item:nth-child(3n) {\n  margin-right: 0;\n}\n.l7-select-control-item {\n  cursor: pointer;\n}\n.l7-select-control-item input[type='checkbox'] {\n  margin: 0;\n  cursor: pointer;\n}\n.l7-select-control--multiple .l7-select-control-item:hover {\n  background-color: transparent;\n}\n.l7-control-logo {\n  width: 89px;\n  height: 16px;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.l7-control-logo img {\n  height: 100%;\n  width: 100%;\n}\n.l7-control-logo .l7-control-logo-link {\n  display: block;\n  cursor: pointer;\n}\n.l7-control-logo .l7-control-logo-link img {\n  cursor: pointer;\n}\n.l7-control-mouse-location {\n  background-color: #fff;\n  border-radius: 2px;\n  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n  padding: 2px 4px;\n  min-width: 130px;\n}\n.l7-control-zoom {\n  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n  border-radius: 2px;\n  overflow: hidden;\n}\n.l7-control-zoom .l7-button-control {\n  -webkit-box-shadow: 0 0 0;\n          box-shadow: 0 0 0;\n  border-radius: 0;\n  font-size: 16px;\n}\n.l7-control-zoom .l7-button-control .l7-iconfont {\n  width: 14px;\n  height: 14px;\n}\n.l7-control-zoom .l7-button-control:first-child {\n  border-bottom: 1px solid #f0f0f0;\n}\n.l7-control-scale {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n.l7-control-scale .l7-control-scale-line {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  padding: 2px 5px 1px;\n  overflow: hidden;\n  color: #595959;\n  font-size: 10px;\n  line-height: 1.1;\n  white-space: nowrap;\n  background: #fff;\n  border: 2px solid #000;\n  border-top: 0;\n  -webkit-transition: width 0.1s;\n  transition: width 0.1s;\n}\n.l7-control-scale .l7-control-scale-line + .l7-control-scale .l7-control-scale-line {\n  margin-top: -2px;\n  border-top: 2px solid #777;\n  border-bottom: none;\n}\n.l7-right .l7-control-scale {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: end;\n      -ms-flex-align: end;\n          align-items: flex-end;\n}\n.l7-right .l7-control-scale .l7-control-scale-line {\n  text-align: right;\n}\n.l7-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  will-change: transform;\n}\n.l7-popup.l7-popup-hide {\n  display: none;\n}\n.l7-popup .l7-popup-content {\n  position: relative;\n  padding: 16px;\n  background: #fff;\n  border-radius: 3px;\n  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  pointer-events: auto;\n  font-size: 14px;\n}\n.l7-popup .l7-popup-content .l7-popup-content__title {\n  font-weight: bold;\n  margin-bottom: 8px;\n}\n.l7-popup .l7-popup-content .l7-popup-close-button {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 18px;\n  height: 18px;\n  line-height: 18px;\n  text-align: center;\n  padding: 0;\n  background-color: transparent;\n  border: 0;\n  border-radius: 0 3px 0 0;\n  cursor: pointer;\n  font-size: 14px;\n}\n.l7-popup .l7-popup-tip {\n  z-index: 1;\n  width: 0;\n  height: 0;\n  border: 10px solid transparent;\n}\n.l7-popup.l7-popup-anchor-bottom,\n.l7-popup.l7-popup-anchor-bottom-left,\n.l7-popup.l7-popup-anchor-bottom-right {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: column-reverse;\n          flex-direction: column-reverse;\n}\n.l7-popup.l7-popup-anchor-top,\n.l7-popup.l7-popup-anchor-top-left,\n.l7-popup.l7-popup-anchor-top-right {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n.l7-popup.l7-popup-anchor-left {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: row;\n          flex-direction: row;\n}\n.l7-popup.l7-popup-anchor-right {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: row-reverse;\n          flex-direction: row-reverse;\n}\n.l7-popup-anchor-top .l7-popup-tip {\n  -webkit-align-self: center;\n  -ms-flex-item-align: center;\n      align-self: center;\n  border-top: none;\n  border-bottom-color: #fff;\n}\n.l7-popup-anchor-top-left .l7-popup-tip {\n  -webkit-align-self: flex-start;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n  border-top: none;\n  border-bottom-color: #fff;\n  border-left: none;\n}\n.l7-popup-anchor-top-right .l7-popup-tip {\n  -webkit-align-self: flex-end;\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n  border-top: none;\n  border-right: none;\n  border-bottom-color: #fff;\n}\n.l7-popup-anchor-bottom .l7-popup-tip {\n  -webkit-align-self: center;\n  -ms-flex-item-align: center;\n      align-self: center;\n  border-top-color: #fff;\n  border-bottom: none;\n}\n.l7-popup-anchor-bottom-left .l7-popup-tip {\n  -webkit-align-self: flex-start;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n  border-top-color: #fff;\n  border-bottom: none;\n  border-left: none;\n}\n.l7-popup-anchor-bottom-right .l7-popup-tip {\n  -webkit-align-self: flex-end;\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n  border-top-color: #fff;\n  border-right: none;\n  border-bottom: none;\n}\n.l7-popup-anchor-left .l7-popup-tip {\n  -webkit-align-self: center;\n  -ms-flex-item-align: center;\n      align-self: center;\n  border-right-color: #fff;\n  border-left: none;\n}\n.l7-popup-anchor-right .l7-popup-tip {\n  -webkit-align-self: center;\n  -ms-flex-item-align: center;\n      align-self: center;\n  border-right: none;\n  border-left-color: #fff;\n}\n.l7-popup-anchor-top-left .l7-popup-content {\n  border-top-left-radius: 0;\n}\n.l7-popup-anchor-top-right .l7-popup-content {\n  border-top-right-radius: 0;\n}\n.l7-popup-anchor-bottom-left .l7-popup-content {\n  border-bottom-left-radius: 0;\n}\n.l7-popup-anchor-bottom-right .l7-popup-content {\n  border-bottom-right-radius: 0;\n}\n.l7-popup-track-pointer {\n  display: none;\n}\n.l7-popup-track-pointer * {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: none;\n}\n.l7-map:hover .l7-popup-track-pointer {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n}\n.l7-map:active .l7-popup-track-pointer {\n  display: none;\n}\n.l7-layer-popup__row {\n  font-size: 12px;\n}\n.l7-layer-popup__row + .l7-layer-popup__row {\n  margin-top: 4px;\n}\n");
+loadStyles(".l7-marker-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.l7-marker {\n  position: absolute !important;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  cursor: pointer;\n}\n.l7-marker-cluster {\n  width: 40px;\n  height: 40px;\n  background-color: rgba(181, 226, 140, 0.6);\n  background-clip: padding-box;\n  border-radius: 20px;\n}\n.l7-marker-cluster div {\n  width: 30px;\n  height: 30px;\n  margin-top: 5px;\n  margin-left: 5px;\n  font: 12px 'Helvetica Neue', Arial, Helvetica, sans-serif;\n  text-align: center;\n  background-color: rgba(110, 204, 57, 0.6);\n  border-radius: 15px;\n}\n.l7-marker-cluster span {\n  line-height: 30px;\n}\n.l7-touch .l7-control-attribution,\n.l7-touch .l7-control-layers,\n.l7-touch .l7-bar {\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n.l7-touch .l7-control-layers,\n.l7-touch .l7-bar {\n  background-clip: padding-box;\n  border: 2px solid rgba(0, 0, 0, 0.2);\n}\n.mapboxgl-ctrl-logo,\n.amap-logo {\n  display: none !important;\n}\n.l7-select-box {\n  border: 3px dashed gray;\n  border-radius: 2px;\n  position: absolute;\n  z-index: 1000;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n.l7-control-container {\n  font: 12px/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif;\n}\n.l7-control-container .l7-control {\n  position: relative;\n  z-index: 800;\n  float: left;\n  clear: both;\n  color: #595959;\n  font-size: 12px;\n  pointer-events: visiblePainted;\n  /* IE 9-10 doesn't have auto */\n  pointer-events: auto;\n}\n.l7-control-container .l7-control.l7-control--hide {\n  display: none;\n}\n.l7-control-container .l7-top {\n  top: 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  z-index: 1000;\n  pointer-events: none;\n}\n.l7-control-container .l7-top .l7-control:not(.l7-control--hide) {\n  margin-top: 8px;\n}\n.l7-control-container .l7-right {\n  right: 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  z-index: 1000;\n  pointer-events: none;\n}\n.l7-control-container .l7-right .l7-control:not(.l7-control--hide) {\n  margin-right: 8px;\n}\n.l7-control-container .l7-bottom {\n  bottom: 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  z-index: 1000;\n  pointer-events: none;\n}\n.l7-control-container .l7-bottom .l7-control:not(.l7-control--hide) {\n  margin-bottom: 8px;\n}\n.l7-control-container .l7-left {\n  left: 0;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  z-index: 1000;\n  pointer-events: none;\n}\n.l7-control-container .l7-left .l7-control:not(.l7-control--hide) {\n  margin-left: 8px;\n}\n.l7-control-container .l7-center {\n  position: absolute;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n.l7-control-container .l7-center.l7-top,\n.l7-control-container .l7-center.l7-bottom {\n  width: 100%;\n}\n.l7-control-container .l7-center.l7-left,\n.l7-control-container .l7-center.l7-right {\n  height: 100%;\n}\n.l7-control-container .l7-center .l7-control {\n  margin-right: 8px;\n  margin-bottom: 8px;\n}\n.l7-control-container .l7-row {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: row;\n          flex-direction: row;\n}\n.l7-control-container .l7-row.l7-top {\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n}\n.l7-control-container .l7-row.l7-bottom {\n  -webkit-box-align: end;\n      -ms-flex-align: end;\n          align-items: flex-end;\n}\n.l7-control-container .l7-column {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n.l7-control-container .l7-column.l7-left {\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n}\n.l7-control-container .l7-column.l7-right {\n  -webkit-box-align: end;\n      -ms-flex-align: end;\n          align-items: flex-end;\n}\n.l7-button-control {\n  min-width: 28px;\n  height: 28px;\n  background-color: #fff;\n  border-width: 0;\n  border-radius: 2px;\n  outline: 0;\n  cursor: pointer;\n  -webkit-transition: all 0.2s;\n  transition: all 0.2s;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  padding: 0 6px;\n  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n  line-height: 16px;\n}\n.l7-button-control .l7-iconfont {\n  fill: #595959;\n  color: #595959;\n  width: 16px;\n  height: 16px;\n}\n.l7-button-control.l7-button-control--row {\n  padding: 0 16px 0 13px;\n}\n.l7-button-control.l7-button-control--row * + .l7-button-control__text {\n  margin-left: 8px;\n}\n.l7-button-control.l7-button-control--column {\n  height: 44px;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n.l7-button-control.l7-button-control--column .l7-iconfont {\n  margin-top: 3px;\n}\n.l7-button-control.l7-button-control--column .l7-button-control__text {\n  margin-top: 3px;\n  font-size: 10px;\n  -webkit-transform: scale(0.83333);\n          transform: scale(0.83333);\n}\n.l7-button-control:not(:disabled):hover {\n  background-color: #f3f3f3;\n}\n.l7-button-control:not(:disabled):active {\n  background-color: #f3f3f3;\n}\n.l7-button-control:disabled {\n  background-color: #fafafa;\n  color: #bdbdbd;\n  cursor: not-allowed;\n}\n.l7-button-control:disabled .l7-iconfont {\n  fill: #bdbdbd;\n  color: #bdbdbd;\n}\n.l7-button-control:disabled:hover {\n  background-color: #fafafa;\n}\n.l7-button-control:disabled:active {\n  background-color: #fafafa;\n}\n.l7-popper {\n  position: absolute;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  z-index: 5;\n  color: #595959;\n}\n.l7-popper.l7-popper-hide {\n  display: none;\n}\n.l7-popper .l7-popper-content {\n  min-height: 28px;\n  background: #fff;\n  border-radius: 2px;\n  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n}\n.l7-popper .l7-popper-arrow {\n  width: 0;\n  height: 0;\n  border-width: 4px;\n  border-style: solid;\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n  border-left-color: transparent;\n  border-right-color: transparent;\n  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n}\n.l7-popper.l7-popper-left {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: row;\n          flex-direction: row;\n}\n.l7-popper.l7-popper-left .l7-popper-arrow {\n  border-left-color: #fff;\n  margin: 10px 0;\n}\n.l7-popper.l7-popper-right {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: row-reverse;\n          flex-direction: row-reverse;\n}\n.l7-popper.l7-popper-right .l7-popper-arrow {\n  border-right-color: #fff;\n  margin: 10px 0;\n}\n.l7-popper.l7-popper-top {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n.l7-popper.l7-popper-top .l7-popper-arrow {\n  border-top-color: #fff;\n  margin: 0 10px;\n}\n.l7-popper.l7-popper-bottom {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: column-reverse;\n          flex-direction: column-reverse;\n}\n.l7-popper.l7-popper-bottom .l7-popper-arrow {\n  border-bottom-color: #fff;\n  margin: 0 10px;\n}\n.l7-popper.l7-popper-start {\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n}\n.l7-popper.l7-popper-end {\n  -webkit-box-align: end;\n      -ms-flex-align: end;\n          align-items: flex-end;\n}\n.l7-select-control--normal {\n  padding: 4px 0;\n}\n.l7-select-control--normal .l7-select-control-item {\n  height: 24px;\n  line-height: 24px;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  padding: 0 16px;\n  font-size: 12px;\n}\n.l7-select-control--normal .l7-select-control-item > * + * {\n  margin-left: 6px;\n}\n.l7-select-control--normal .l7-select-control-item input[type='checkbox'] {\n  height: 14px;\n  width: 14px;\n}\n.l7-select-control--normal .l7-select-control-item:hover {\n  background-color: #f3f3f3;\n}\n.l7-select-control--image {\n  padding: 12px 12px 0 12px;\n  width: 474px;\n  height: 320px;\n  overflow: auto;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n}\n.l7-select-control--image .l7-select-control-item {\n  margin-right: 12px;\n  border-radius: 2px;\n  overflow: hidden;\n  border: 1px solid #fff;\n  -webkit-box-sizing: content-box;\n          box-sizing: content-box;\n  width: calc((100% - 36px) / 3);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  margin-bottom: 12px;\n  position: relative;\n  font-size: 12px;\n}\n.l7-select-control--image .l7-select-control-item img {\n  width: 142px;\n  height: 80px;\n}\n.l7-select-control--image .l7-select-control-item input[type='checkbox'] {\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.l7-select-control--image .l7-select-control-item .l7-select-control-item-row {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  line-height: 26px;\n}\n.l7-select-control--image .l7-select-control-item .l7-select-control-item-row > * + * {\n  margin-left: 8px;\n}\n.l7-select-control--image .l7-select-control-item.l7-select-control-item-active {\n  border-color: #0370fe;\n}\n.l7-select-control--image .l7-select-control-item:nth-child(3n) {\n  margin-right: 0;\n}\n.l7-select-control-item {\n  cursor: pointer;\n}\n.l7-select-control-item input[type='checkbox'] {\n  margin: 0;\n  cursor: pointer;\n}\n.l7-select-control--multiple .l7-select-control-item:hover {\n  background-color: transparent;\n}\n.l7-control-logo {\n  width: 89px;\n  height: 16px;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.l7-control-logo img {\n  height: 100%;\n  width: 100%;\n}\n.l7-control-logo .l7-control-logo-link {\n  display: block;\n  cursor: pointer;\n}\n.l7-control-logo .l7-control-logo-link img {\n  cursor: pointer;\n}\n.l7-control-mouse-location {\n  background-color: #fff;\n  border-radius: 2px;\n  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n  padding: 2px 4px;\n  min-width: 130px;\n}\n.l7-control-zoom {\n  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n  border-radius: 2px;\n  overflow: hidden;\n}\n.l7-control-zoom .l7-button-control {\n  -webkit-box-shadow: 0 0 0;\n          box-shadow: 0 0 0;\n  border-radius: 0;\n  font-size: 16px;\n}\n.l7-control-zoom .l7-button-control .l7-iconfont {\n  width: 14px;\n  height: 14px;\n}\n.l7-control-zoom .l7-button-control:first-child {\n  border-bottom: 1px solid #f0f0f0;\n}\n.l7-control-scale {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n.l7-control-scale .l7-control-scale-line {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  padding: 2px 5px 1px;\n  overflow: hidden;\n  color: #595959;\n  font-size: 10px;\n  line-height: 1.1;\n  white-space: nowrap;\n  background: #fff;\n  border: 2px solid #000;\n  border-top: 0;\n  -webkit-transition: width 0.1s;\n  transition: width 0.1s;\n}\n.l7-control-scale .l7-control-scale-line + .l7-control-scale .l7-control-scale-line {\n  margin-top: -2px;\n  border-top: 2px solid #777;\n  border-bottom: none;\n}\n.l7-right .l7-control-scale {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: end;\n      -ms-flex-align: end;\n          align-items: flex-end;\n}\n.l7-right .l7-control-scale .l7-control-scale-line {\n  text-align: right;\n}\n.l7-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 5;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  will-change: transform;\n}\n.l7-popup.l7-popup-hide {\n  display: none;\n}\n.l7-popup .l7-popup-content {\n  position: relative;\n  padding: 16px;\n  font-size: 14px;\n  background: #fff;\n  border-radius: 3px;\n  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n.l7-popup .l7-popup-content .l7-popup-content__title {\n  margin-bottom: 8px;\n  font-weight: bold;\n}\n.l7-popup .l7-popup-content .l7-popup-content__title,\n.l7-popup .l7-popup-content .l7-popup-content__panel {\n  white-space: break-spaces;\n}\n.l7-popup .l7-popup-content .l7-popup-close-button {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  font-size: 14px;\n  line-height: 18px;\n  text-align: center;\n  background-color: transparent;\n  border: 0;\n  border-radius: 0 3px 0 0;\n  cursor: pointer;\n}\n.l7-popup .l7-popup-tip {\n  position: relative;\n  z-index: 1;\n  width: 0;\n  height: 0;\n  border: 10px solid transparent;\n}\n.l7-popup.l7-popup-anchor-bottom,\n.l7-popup.l7-popup-anchor-bottom-left,\n.l7-popup.l7-popup-anchor-bottom-right {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: column-reverse;\n          flex-direction: column-reverse;\n}\n.l7-popup.l7-popup-anchor-bottom .l7-popup-tip,\n.l7-popup.l7-popup-anchor-bottom-left .l7-popup-tip,\n.l7-popup.l7-popup-anchor-bottom-right .l7-popup-tip {\n  bottom: 1px;\n}\n.l7-popup.l7-popup-anchor-top,\n.l7-popup.l7-popup-anchor-top-left,\n.l7-popup.l7-popup-anchor-top-right {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n.l7-popup.l7-popup-anchor-top .l7-popup-tip,\n.l7-popup.l7-popup-anchor-top-left .l7-popup-tip,\n.l7-popup.l7-popup-anchor-top-right .l7-popup-tip {\n  top: 1px;\n}\n.l7-popup.l7-popup-anchor-left {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: row;\n          flex-direction: row;\n}\n.l7-popup.l7-popup-anchor-right {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: reverse;\n      -ms-flex-direction: row-reverse;\n          flex-direction: row-reverse;\n}\n.l7-popup-anchor-top .l7-popup-tip {\n  position: relative;\n  -webkit-align-self: center;\n  -ms-flex-item-align: center;\n      align-self: center;\n  border-top: none;\n  border-bottom-color: #fff;\n}\n.l7-popup-anchor-top-left .l7-popup-tip {\n  -webkit-align-self: flex-start;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n  border-top: none;\n  border-bottom-color: #fff;\n  border-left: none;\n}\n.l7-popup-anchor-top-right .l7-popup-tip {\n  -webkit-align-self: flex-end;\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n  border-top: none;\n  border-right: none;\n  border-bottom-color: #fff;\n}\n.l7-popup-anchor-bottom .l7-popup-tip {\n  -webkit-align-self: center;\n  -ms-flex-item-align: center;\n      align-self: center;\n  border-top-color: #fff;\n  border-bottom: none;\n}\n.l7-popup-anchor-bottom-left .l7-popup-tip {\n  -webkit-align-self: flex-start;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n  border-top-color: #fff;\n  border-bottom: none;\n  border-left: none;\n}\n.l7-popup-anchor-bottom-right .l7-popup-tip {\n  -webkit-align-self: flex-end;\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n  border-top-color: #fff;\n  border-right: none;\n  border-bottom: none;\n}\n.l7-popup-anchor-left .l7-popup-tip {\n  -webkit-align-self: center;\n  -ms-flex-item-align: center;\n      align-self: center;\n  border-right-color: #fff;\n  border-left: none;\n}\n.l7-popup-anchor-right .l7-popup-tip {\n  right: 1px;\n  -webkit-align-self: center;\n  -ms-flex-item-align: center;\n      align-self: center;\n  border-right: none;\n  border-left-color: #fff;\n}\n.l7-popup-anchor-top-left .l7-popup-content {\n  border-top-left-radius: 0;\n}\n.l7-popup-anchor-top-right .l7-popup-content {\n  border-top-right-radius: 0;\n}\n.l7-popup-anchor-bottom-left .l7-popup-content {\n  border-bottom-left-radius: 0;\n}\n.l7-popup-anchor-bottom-right .l7-popup-content {\n  border-bottom-right-radius: 0;\n}\n.l7-popup-track-pointer {\n  display: none;\n}\n.l7-popup-track-pointer * {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: none;\n}\n.l7-map:hover .l7-popup-track-pointer {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n}\n.l7-map:active .l7-popup-track-pointer {\n  display: none;\n}\n.l7-layer-popup__row {\n  font-size: 12px;\n}\n.l7-layer-popup__row + .l7-layer-popup__row {\n  margin-top: 4px;\n}\n");

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 实例