@antv/l7-component 2.11.1 → 2.11.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/es/control/logo.js +1 -1
  2. package/es/css/index.css +21 -6
  3. package/es/css/popup.less +18 -6
  4. package/es/index.js +1 -1
  5. package/es/popup/layerPopup.d.ts +11 -4
  6. package/es/popup/layerPopup.js +58 -30
  7. package/es/popup/popup.d.ts +7 -15
  8. package/es/popup/popup.js +46 -55
  9. package/lib/control/logo.js +1 -1
  10. package/lib/css/index.css +21 -6
  11. package/lib/css/popup.less +18 -6
  12. package/lib/index.js +1 -1
  13. package/lib/popup/layerPopup.js +67 -31
  14. package/lib/popup/popup.js +50 -56
  15. package/package.json +5 -5
package/es/control/logo.js CHANGED
@@ -30,7 +30,7 @@ var Logo = /*#__PURE__*/function (_Control) {
30
30
  return {
31
31
  position: PositionType.BOTTOMLEFT,
32
32
  name: 'logo',
33
- href: 'https://l7.antv.vision/',
33
+ href: 'https://l7.antv.antgroup.com/',
34
34
  img: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GRb1TKp4HcMAAAAAAAAAAAAAARQnAQ'
35
35
  };
36
36
  }
package/es/css/index.css CHANGED
@@ -422,7 +422,6 @@
422
422
  z-index: 5;
423
423
  display: -webkit-flex;
424
424
  display: flex;
425
- pointer-events: none;
426
425
  will-change: transform;
427
426
  }
428
427
  .l7-popup.l7-popup-hide {
@@ -431,15 +430,18 @@
431
430
  .l7-popup .l7-popup-content {
432
431
  position: relative;
433
432
  padding: 16px;
433
+ font-size: 14px;
434
434
  background: #fff;
435
435
  border-radius: 3px;
436
436
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
437
- pointer-events: auto;
438
- font-size: 14px;
439
437
  }
440
438
  .l7-popup .l7-popup-content .l7-popup-content__title {
441
- font-weight: bold;
442
439
  margin-bottom: 8px;
440
+ font-weight: bold;
441
+ }
442
+ .l7-popup .l7-popup-content .l7-popup-content__title,
443
+ .l7-popup .l7-popup-content .l7-popup-content__panel {
444
+ white-space: break-spaces;
443
445
  }
444
446
  .l7-popup .l7-popup-content .l7-popup-close-button {
445
447
  position: absolute;
@@ -447,16 +449,17 @@
447
449
  right: 0;
448
450
  width: 18px;
449
451
  height: 18px;
452
+ padding: 0;
453
+ font-size: 14px;
450
454
  line-height: 18px;
451
455
  text-align: center;
452
- padding: 0;
453
456
  background-color: transparent;
454
457
  border: 0;
455
458
  border-radius: 0 3px 0 0;
456
459
  cursor: pointer;
457
- font-size: 14px;
458
460
  }
459
461
  .l7-popup .l7-popup-tip {
462
+ position: relative;
460
463
  z-index: 1;
461
464
  width: 0;
462
465
  height: 0;
@@ -468,12 +471,22 @@
468
471
  -webkit-flex-direction: column-reverse;
469
472
  flex-direction: column-reverse;
470
473
  }
474
+ .l7-popup.l7-popup-anchor-bottom .l7-popup-tip,
475
+ .l7-popup.l7-popup-anchor-bottom-left .l7-popup-tip,
476
+ .l7-popup.l7-popup-anchor-bottom-right .l7-popup-tip {
477
+ bottom: 1px;
478
+ }
471
479
  .l7-popup.l7-popup-anchor-top,
472
480
  .l7-popup.l7-popup-anchor-top-left,
473
481
  .l7-popup.l7-popup-anchor-top-right {
474
482
  -webkit-flex-direction: column;
475
483
  flex-direction: column;
476
484
  }
485
+ .l7-popup.l7-popup-anchor-top .l7-popup-tip,
486
+ .l7-popup.l7-popup-anchor-top-left .l7-popup-tip,
487
+ .l7-popup.l7-popup-anchor-top-right .l7-popup-tip {
488
+ top: 1px;
489
+ }
477
490
  .l7-popup.l7-popup-anchor-left {
478
491
  -webkit-flex-direction: row;
479
492
  flex-direction: row;
@@ -483,6 +496,7 @@
483
496
  flex-direction: row-reverse;
484
497
  }
485
498
  .l7-popup-anchor-top .l7-popup-tip {
499
+ position: relative;
486
500
  -webkit-align-self: center;
487
501
  align-self: center;
488
502
  border-top: none;
@@ -529,6 +543,7 @@
529
543
  border-left: none;
530
544
  }
531
545
  .l7-popup-anchor-right .l7-popup-tip {
546
+ right: 1px;
532
547
  -webkit-align-self: center;
533
548
  align-self: center;
534
549
  border-right: none;
package/es/css/popup.less CHANGED
@@ -7,7 +7,6 @@
7
7
  z-index: 5;
8
8
  display: -webkit-flex;
9
9
  display: flex;
10
- pointer-events: none;
11
10
  will-change: transform;
12
11
  &.l7-popup-hide {
13
12
  display: none;
@@ -16,15 +15,19 @@
16
15
  .l7-popup-content {
17
16
  position: relative;
18
17
  padding: 16px;
18
+ font-size: 14px;
19
19
  background: #fff;
20
20
  border-radius: 3px;
21
21
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
22
- pointer-events: auto;
23
- font-size: 14px;
24
22
 
25
23
  .l7-popup-content__title {
26
- font-weight: bold;
27
24
  margin-bottom: 8px;
25
+ font-weight: bold;
26
+ }
27
+
28
+ .l7-popup-content__title,
29
+ .l7-popup-content__panel {
30
+ white-space: break-spaces;
28
31
  }
29
32
 
30
33
  .l7-popup-close-button {
@@ -33,18 +36,19 @@
33
36
  right: 0;
34
37
  width: 18px;
35
38
  height: 18px;
39
+ padding: 0;
40
+ font-size: 14px;
36
41
  line-height: 18px;
37
42
  text-align: center;
38
- padding: 0;
39
43
  background-color: transparent;
40
44
  border: 0;
41
45
  border-radius: 0 3px 0 0;
42
46
  cursor: pointer;
43
- font-size: 14px;
44
47
  }
45
48
  }
46
49
 
47
50
  .l7-popup-tip {
51
+ position: relative;
48
52
  z-index: 1;
49
53
  width: 0;
50
54
  height: 0;
@@ -56,6 +60,9 @@
56
60
  &.l7-popup-anchor-bottom-right {
57
61
  -webkit-flex-direction: column-reverse;
58
62
  flex-direction: column-reverse;
63
+ .l7-popup-tip {
64
+ bottom: 1px;
65
+ }
59
66
  }
60
67
 
61
68
  &.l7-popup-anchor-top,
@@ -63,6 +70,9 @@
63
70
  &.l7-popup-anchor-top-right {
64
71
  -webkit-flex-direction: column;
65
72
  flex-direction: column;
73
+ .l7-popup-tip {
74
+ top: 1px;
75
+ }
66
76
  }
67
77
 
68
78
  &.l7-popup-anchor-left {
@@ -77,6 +87,7 @@
77
87
  }
78
88
 
79
89
  .l7-popup-anchor-top .l7-popup-tip {
90
+ position: relative;
80
91
  -webkit-align-self: center;
81
92
  align-self: center;
82
93
  border-top: none;
@@ -130,6 +141,7 @@
130
141
  }
131
142
 
132
143
  .l7-popup-anchor-right .l7-popup-tip {
144
+ right: 1px;
133
145
  -webkit-align-self: center;
134
146
  align-self: center;
135
147
  border-right: none;
package/es/index.js CHANGED
@@ -42,7 +42,7 @@ function loadStyles(css, doc) {
42
42
  return style;
43
43
  }
44
44
 
45
- 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");
45
+ 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");
46
46
  export * from "./control/baseControl";
47
47
  export * from "./control/logo";
48
48
  export * from "./control/fullscreen";
package/es/popup/layerPopup.d.ts CHANGED
@@ -1,15 +1,19 @@
1
1
  import { ILayer, IPopupOption } from '@antv/l7-core';
2
+ import { DOM } from '@antv/l7-utils';
2
3
  import { Container } from 'inversify';
3
4
  import Popup from './popup';
5
+ type ElementType = DOM.ElementType;
4
6
  export type LayerField = {
5
7
  field: string;
6
- formatField?: ((field: string) => string) | string;
7
- formatValue?: ((value: any) => any) | string;
8
+ formatField?: ElementType | ((field: string, feature: any) => ElementType);
9
+ formatValue?: ElementType | ((value: any, feature: any) => ElementType);
8
10
  getValue?: (feature: any) => any;
9
11
  };
10
12
  export type LayerPopupConfigItem = {
11
13
  layer: ILayer | string;
12
- fields: Array<LayerField | string>;
14
+ fields?: Array<LayerField | string>;
15
+ title?: ElementType | ((feature: any) => ElementType);
16
+ customContent?: ElementType | ((feature: any) => ElementType);
13
17
  };
14
18
  export interface ILayerPopupOption extends IPopupOption {
15
19
  config?: LayerPopupConfigItem[];
@@ -62,7 +66,10 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
62
66
  * @param e
63
67
  * @protected
64
68
  */
65
- protected getLayerInfoFrag(layer: ILayer, e: any): DocumentFragment;
69
+ protected getLayerInfoFrag(layer: ILayer, e: any): {
70
+ title: DocumentFragment | undefined;
71
+ content: DocumentFragment;
72
+ };
66
73
  /**
67
74
  * 通过 Layer 配置访问到真实的 Layer 实例
68
75
  * @param configItem
package/es/popup/layerPopup.js CHANGED
@@ -89,6 +89,7 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
89
89
  },
90
90
  offsets: [0, 10],
91
91
  closeButton: false,
92
+ closeOnClick: false,
92
93
  autoClose: false,
93
94
  closeOnEsc: false
94
95
  });
@@ -188,15 +189,16 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
188
189
  key: "onLayerMouseMove",
189
190
  value: function onLayerMouseMove(layer, e) {
190
191
  if (!this.isSameFeature(layer, e.featureId)) {
191
- var frag = this.getLayerInfoFrag(layer, e);
192
- this.setDOMContent(frag);
192
+ var _this$getLayerInfoFra = this.getLayerInfoFrag(layer, e),
193
+ title = _this$getLayerInfoFra.title,
194
+ content = _this$getLayerInfoFra.content;
195
+
196
+ this.setDOMContent(content);
197
+ this.setTitle(title);
193
198
  this.displayFeatureInfo = {
194
199
  layer: layer,
195
200
  featureId: e.featureId
196
201
  };
197
- }
198
-
199
- if (!this.isShow) {
200
202
  this.show();
201
203
  }
202
204
  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -216,14 +218,18 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
216
218
  if (this.isShow && this.isSameFeature(layer, e.featureId)) {
217
219
  this.hide();
218
220
  } else {
219
- var frag = this.getLayerInfoFrag(layer, e);
220
- this.setDOMContent(frag);
221
+ var _this$getLayerInfoFra2 = this.getLayerInfoFrag(layer, e),
222
+ title = _this$getLayerInfoFra2.title,
223
+ content = _this$getLayerInfoFra2.content;
224
+
225
+ this.setDOMContent(content);
221
226
  this.setLnglat(e.lngLat);
222
- this.show();
227
+ this.setTitle(title);
223
228
  this.displayFeatureInfo = {
224
229
  layer: layer,
225
230
  featureId: e.featureId
226
231
  };
232
+ this.show();
227
233
  }
228
234
  }
229
235
  }, {
@@ -247,7 +253,8 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
247
253
  key: "getLayerInfoFrag",
248
254
  value: function getLayerInfoFrag(layer, e) {
249
255
  var layerInfo = this.layerConfigMap.get(layer);
250
- var frag = document.createDocumentFragment();
256
+ var titleFrag;
257
+ var contentFrag = document.createDocumentFragment();
251
258
 
252
259
  if (layerInfo) {
253
260
  var _feature = e.feature;
@@ -256,29 +263,50 @@ var LayerPopup = /*#__PURE__*/function (_Popup) {
256
263
  _feature = _feature.properties;
257
264
  }
258
265
 
259
- var fields = layerInfo.fields;
260
- fields === null || fields === void 0 ? void 0 : fields.forEach(function (fieldConfig) {
261
- var _ref3, _ref4;
262
-
263
- var _ref2 = typeof fieldConfig === 'string' ? // tslint:disable-next-line:no-object-literal-type-assertion
264
- {
265
- field: fieldConfig
266
- } : fieldConfig,
267
- field = _ref2.field,
268
- formatField = _ref2.formatField,
269
- formatValue = _ref2.formatValue,
270
- getValue = _ref2.getValue;
271
-
272
- var row = DOM.create('div', 'l7-layer-popup__row');
273
- var value = getValue ? getValue(e.feature) : get(_feature, field);
274
- var fieldText = (_ref3 = formatField instanceof Function ? formatField(field) : formatField) !== null && _ref3 !== void 0 ? _ref3 : field;
275
- var valueText = (_ref4 = formatValue instanceof Function ? formatValue(value) : formatValue) !== null && _ref4 !== void 0 ? _ref4 : value;
276
- row.innerHTML = "<span class=\"l7-layer-popup__key\">".concat(fieldText, "</span>: <span class=\"l7-layer-popup__value\">").concat(valueText, "</span>");
277
- frag.appendChild(row);
278
- });
266
+ var title = layerInfo.title,
267
+ fields = layerInfo.fields,
268
+ customContent = layerInfo.customContent;
269
+
270
+ if (title) {
271
+ titleFrag = document.createDocumentFragment();
272
+ var titleElement = title instanceof Function ? title(_feature) : title;
273
+ DOM.appendElementType(titleFrag, titleElement);
274
+ }
275
+
276
+ if (customContent) {
277
+ var content = customContent instanceof Function ? customContent(_feature) : customContent;
278
+ DOM.appendElementType(contentFrag, content);
279
+ } else if (fields !== null && fields !== void 0 && fields.length) {
280
+ fields === null || fields === void 0 ? void 0 : fields.forEach(function (fieldConfig) {
281
+ var _ref3, _ref4;
282
+
283
+ var _ref2 = typeof fieldConfig === 'string' ? // tslint:disable-next-line:no-object-literal-type-assertion
284
+ {
285
+ field: fieldConfig
286
+ } : fieldConfig,
287
+ field = _ref2.field,
288
+ formatField = _ref2.formatField,
289
+ formatValue = _ref2.formatValue,
290
+ getValue = _ref2.getValue;
291
+
292
+ var row = DOM.create('div', 'l7-layer-popup__row');
293
+ var value = getValue ? getValue(e.feature) : get(_feature, field);
294
+ var fieldElement = (_ref3 = formatField instanceof Function ? formatField(field, _feature) : formatField) !== null && _ref3 !== void 0 ? _ref3 : field;
295
+ var valueElement = (_ref4 = formatValue instanceof Function ? formatValue(value, _feature) : formatValue) !== null && _ref4 !== void 0 ? _ref4 : value;
296
+ var fieldSpan = DOM.create('span', 'l7-layer-popup__key', row);
297
+ DOM.appendElementType(fieldSpan, fieldElement);
298
+ DOM.appendElementType(fieldSpan, document.createTextNode('：'));
299
+ var valueSpan = DOM.create('span', 'l7-layer-popup__value', row);
300
+ DOM.appendElementType(valueSpan, valueElement);
301
+ contentFrag.appendChild(row);
302
+ });
303
+ }
279
304
  }
280
305
 
281
- return frag;
306
+ return {
307
+ title: titleFrag,
308
+ content: contentFrag
309
+ };
282
310
  }
283
311
  /**
284
312
  * 通过 Layer 配置访问到真实的 Layer 实例
package/es/popup/popup.d.ts CHANGED
@@ -1,6 +1,8 @@
1
- import { ILayerService, ILngLat, IMapService, IPopup, IPopupOption, ISceneService, PopupHTML } from '@antv/l7-core';
1
+ import { ILayerService, ILngLat, IMapService, IPopup, IPopupOption, ISceneService } from '@antv/l7-core';
2
+ import { DOM } from '@antv/l7-utils';
2
3
  import { EventEmitter } from 'eventemitter3';
3
4
  import { Container } from 'inversify';
5
+ type ElementType = DOM.ElementType;
4
6
  export { Popup };
5
7
  export default class Popup<O extends IPopupOption = IPopupOption> extends EventEmitter implements IPopup {
6
8
  /**
@@ -37,11 +39,6 @@ export default class Popup<O extends IPopupOption = IPopupOption> extends EventE
37
39
  * @protected
38
40
  */
39
41
  protected contentPanel: HTMLElement;
40
- /**
41
- * popup 内容标题
42
- * @protected
43
- */
44
- protected title: HTMLElement;
45
42
  /**
46
43
  * 气泡箭头对应的 DOM
47
44
  * @protected
@@ -71,12 +68,13 @@ export default class Popup<O extends IPopupOption = IPopupOption> extends EventE
71
68
  * 设置 HTML 内容
72
69
  * @param html
73
70
  */
74
- setHTML(html: PopupHTML): this;
71
+ setHTML(html: ElementType): this;
75
72
  /**
76
73
  * 设置 Popup 展示文本
77
74
  * @param text
78
75
  */
79
76
  setText(text: string): this;
77
+ setTitle(title?: ElementType): void;
80
78
  /**
81
79
  * 将地图自动平移到气泡位置
82
80
  */
@@ -106,9 +104,9 @@ export default class Popup<O extends IPopupOption = IPopupOption> extends EventE
106
104
  protected getDefault(option: Partial<O>): O;
107
105
  /**
108
106
  * 设置 Popup 内容 HTML
109
- * @param htmlNode
107
+ * @param element
110
108
  */
111
- protected setDOMContent(htmlNode: ChildNode | DocumentFragment): this;
109
+ protected setDOMContent(element: ElementType): this;
112
110
  /**
113
111
  * 绑定地图点击事件触发销毁 Popup
114
112
  * @protected
@@ -138,10 +136,4 @@ export default class Popup<O extends IPopupOption = IPopupOption> extends EventE
138
136
  * @protected
139
137
  */
140
138
  protected checkUpdateOption(option: Partial<O>, keys: Array<keyof O>): boolean;
141
- /**
142
- * 根据参数 HTML 片段返回对应的 Fragment
143
- * @param html
144
- * @protected
145
- */
146
- protected getPopupHTMLFragment(html: PopupHTML): DocumentFragment;
147
139
  }