@antv/l7-component 2.23.2 → 2.23.3-beta.1

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.
package/es/index.js CHANGED
@@ -2,833 +2,7 @@ import Marker from "./marker";
2
2
  import MarkerLayer from "./marker-layer";
3
3
  import "./assets/iconfont/iconfont.js";
4
4
  // 引入样式
5
- function loadStyles(css, doc) {
6
- var isMiniAli = typeof my !== 'undefined' && !!my && typeof my.showToast === 'function' && my.isFRM !== true;
7
- var isWeChatMiniProgram = typeof wx !== 'undefined' && wx !== null && (typeof wx.request !== 'undefined' || typeof wx.miniProgram !== 'undefined');
8
- if (isMiniAli || isWeChatMiniProgram) {
9
- return;
10
- }
11
- if (!doc) doc = document;
12
- if (!doc) {
13
- return;
14
- }
15
- var head = doc.head || doc.getElementsByTagName('head')[0];
16
- if (!head) {
17
- head = doc.createElement('head');
18
- var body = doc.body || doc.getElementsByTagName('body')[0];
19
- if (body) {
20
- body.parentNode.insertBefore(head, body);
21
- } else {
22
- doc.documentElement.appendChild(head);
23
- }
24
- }
25
- var style = doc.createElement('style');
26
- style.type = 'text/css';
27
- if (style.styleSheet) {
28
- style.styleSheet.cssText = css;
29
- } else {
30
- style.appendChild(doc.createTextNode(css));
31
- }
32
- head.appendChild(style);
33
- return style;
34
- }
35
- loadStyles(`.l7-marker-container {
36
- position: absolute;
37
- width: 100%;
38
- height: 100%;
39
- overflow: hidden;
40
- }
41
-
42
- .l7-marker {
43
- position: absolute !important;
44
- top: 0;
45
- left: 0;
46
- z-index: 5;
47
- cursor: pointer;
48
- }
49
-
50
- .l7-marker-cluster {
51
- width: 40px;
52
- height: 40px;
53
- background-color: rgb(181 226 140 / 60%);
54
- background-clip: padding-box;
55
- border-radius: 20px;
56
- }
57
-
58
- .l7-marker-cluster div {
59
- width: 30px;
60
- height: 30px;
61
- margin-top: 5px;
62
- margin-left: 5px;
63
- font:
64
- 12px 'Helvetica Neue',
65
- Arial,
66
- Helvetica,
67
- sans-serif;
68
- text-align: center;
69
- background-color: rgb(110 204 57 / 60%);
70
- border-radius: 15px;
71
- }
72
-
73
- .l7-marker-cluster span {
74
- line-height: 30px;
75
- }
76
-
77
- .l7-touch .l7-control-attribution,
78
- .l7-touch .l7-control-layers,
79
- .l7-touch .l7-bar {
80
- box-shadow: none;
81
- }
82
-
83
- .l7-touch .l7-control-layers,
84
- .l7-touch .l7-bar {
85
- background-clip: padding-box;
86
- border: 2px solid rgb(0 0 0 / 20%);
87
- }
88
-
89
- .mapboxgl-ctrl-logo,
90
- .amap-logo {
91
- display: none !important;
92
- }
93
-
94
- .l7-select-box {
95
- border: 3px dashed gray;
96
- border-radius: 2px;
97
- position: absolute;
98
- z-index: 999;
99
- box-sizing: border-box;
100
- }
101
-
102
- .l7-control-container {
103
- font:
104
- 12px/1.5 'Helvetica Neue',
105
- Arial,
106
- Helvetica,
107
- sans-serif;
108
- }
109
-
110
- .l7-control-container .l7-control {
111
- position: relative;
112
- z-index: 999;
113
- float: left;
114
- clear: both;
115
- color: #595959;
116
- font-size: 12px;
117
- pointer-events: visiblepainted;
118
-
119
- /* IE 9-10 doesn't have auto */
120
- pointer-events: auto;
121
- }
122
-
123
- .l7-control-container .l7-control.l7-control--hide {
124
- display: none;
125
- }
126
-
127
- .l7-control-container .l7-top {
128
- top: 0;
129
- display: flex;
130
- position: absolute;
131
- z-index: 999;
132
- pointer-events: none;
133
- }
134
-
135
- .l7-control-container .l7-top .l7-control:not(.l7-control--hide) {
136
- margin-top: 8px;
137
- }
138
-
139
- .l7-control-container .l7-right {
140
- right: 0;
141
- display: flex;
142
- position: absolute;
143
- z-index: 999;
144
- pointer-events: none;
145
- }
146
-
147
- .l7-control-container .l7-right .l7-control:not(.l7-control--hide) {
148
- margin-right: 8px;
149
- }
150
-
151
- .l7-control-container .l7-bottom {
152
- bottom: 0;
153
- display: flex;
154
- position: absolute;
155
- z-index: 999;
156
- pointer-events: none;
157
- }
158
-
159
- .l7-control-container .l7-bottom .l7-control:not(.l7-control--hide) {
160
- margin-bottom: 8px;
161
- }
162
-
163
- .l7-control-container .l7-left {
164
- left: 0;
165
- display: flex;
166
- position: absolute;
167
- z-index: 999;
168
- pointer-events: none;
169
- }
170
-
171
- .l7-control-container .l7-left .l7-control:not(.l7-control--hide) {
172
- margin-left: 8px;
173
- }
174
-
175
- .l7-control-container .l7-center {
176
- position: absolute;
177
- display: flex;
178
- justify-content: center;
179
- }
180
-
181
- .l7-control-container .l7-center.l7-top,
182
- .l7-control-container .l7-center.l7-bottom {
183
- width: 100%;
184
- }
185
-
186
- .l7-control-container .l7-center.l7-left,
187
- .l7-control-container .l7-center.l7-right {
188
- height: 100%;
189
- }
190
-
191
- .l7-control-container .l7-center .l7-control {
192
- margin-right: 8px;
193
- margin-bottom: 8px;
194
- }
195
-
196
- .l7-control-container .l7-row {
197
- flex-direction: row;
198
- }
199
-
200
- .l7-control-container .l7-row.l7-top {
201
- align-items: flex-start;
202
- }
203
-
204
- .l7-control-container .l7-row.l7-bottom {
205
- align-items: flex-end;
206
- }
207
-
208
- .l7-control-container .l7-column {
209
- flex-direction: column;
210
- }
211
-
212
- .l7-control-container .l7-column.l7-left {
213
- align-items: flex-start;
214
- }
215
-
216
- .l7-control-container .l7-column.l7-right {
217
- align-items: flex-end;
218
- }
219
-
220
- .l7-button-control {
221
- min-width: 28px;
222
- height: 28px;
223
- background-color: #fff;
224
- border-width: 0;
225
- border-radius: 2px;
226
- outline: 0;
227
- cursor: pointer;
228
- transition: all 0.2s;
229
- display: flex;
230
- justify-content: center;
231
- align-items: center;
232
- padding: 0 6px;
233
- box-shadow: 0 0 20px 0 rgb(0 0 0 / 15%);
234
- line-height: 16px;
235
- }
236
-
237
- .l7-button-control .l7-iconfont {
238
- fill: #595959;
239
- color: #595959;
240
- width: 16px;
241
- height: 16px;
242
- }
243
-
244
- .l7-button-control.l7-button-control--row {
245
- padding: 0 16px 0 13px;
246
- }
247
-
248
- .l7-button-control.l7-button-control--row * + .l7-button-control__text {
249
- margin-left: 8px;
250
- }
251
-
252
- .l7-button-control.l7-button-control--column {
253
- height: 44px;
254
- flex-direction: column;
255
- }
256
-
257
- .l7-button-control.l7-button-control--column .l7-iconfont {
258
- margin-top: 3px;
259
- }
260
-
261
- .l7-button-control.l7-button-control--column .l7-button-control__text {
262
- margin-top: 3px;
263
- font-size: 10px;
264
- -webkit-transform: scale(0.83333);
265
- transform: scale(0.83333);
266
- }
267
-
268
- .l7-button-control:not(:disabled):hover {
269
- background-color: #f3f3f3;
270
- }
271
-
272
- .l7-button-control:not(:disabled):active {
273
- background-color: #f3f3f3;
274
- }
275
-
276
- .l7-button-control:disabled {
277
- background-color: #fafafa;
278
- color: #bdbdbd;
279
- cursor: not-allowed;
280
- }
281
-
282
- .l7-button-control:disabled .l7-iconfont {
283
- fill: #bdbdbd;
284
- color: #bdbdbd;
285
- }
286
-
287
- .l7-button-control:disabled:hover {
288
- background-color: #fafafa;
289
- }
290
-
291
- .l7-button-control:disabled:active {
292
- background-color: #fafafa;
293
- }
294
-
295
- .l7-popper {
296
- position: absolute;
297
- display: flex;
298
- justify-content: center;
299
- align-items: center;
300
- z-index: 5;
301
- color: #595959;
302
- }
303
-
304
- .l7-popper.l7-popper-hide {
305
- display: none;
306
- }
307
-
308
- .l7-popper .l7-popper-content {
309
- min-height: 28px;
310
- background: #fff;
311
- border-radius: 2px;
312
- box-shadow: 0 0 20px 0 rgb(0 0 0 / 15%);
313
- }
314
-
315
- .l7-popper .l7-popper-arrow {
316
- width: 0;
317
- height: 0;
318
- border-width: 4px;
319
- border-style: solid;
320
- border-color: transparent;
321
- box-shadow: 0 0 20px 0 rgb(0 0 0 / 15%);
322
- }
323
-
324
- .l7-popper.l7-popper-left {
325
- flex-direction: row;
326
- }
327
-
328
- .l7-popper.l7-popper-left .l7-popper-arrow {
329
- border-left-color: #fff;
330
- margin: 10px 0;
331
- }
332
-
333
- .l7-popper.l7-popper-right {
334
- flex-direction: row-reverse;
335
- }
336
-
337
- .l7-popper.l7-popper-right .l7-popper-arrow {
338
- border-right-color: #fff;
339
- margin: 10px 0;
340
- }
341
-
342
- .l7-popper.l7-popper-top {
343
- flex-direction: column;
344
- }
345
-
346
- .l7-popper.l7-popper-top .l7-popper-arrow {
347
- border-top-color: #fff;
348
- margin: 0 10px;
349
- }
350
-
351
- .l7-popper.l7-popper-bottom {
352
- flex-direction: column-reverse;
353
- }
354
-
355
- .l7-popper.l7-popper-bottom .l7-popper-arrow {
356
- border-bottom-color: #fff;
357
- margin: 0 10px;
358
- }
359
-
360
- .l7-popper.l7-popper-start {
361
- align-items: flex-start;
362
- }
363
-
364
- .l7-popper.l7-popper-end {
365
- align-items: flex-end;
366
- }
367
-
368
- .l7-select-control--normal {
369
- padding: 4px 0;
370
- }
371
-
372
- .l7-select-control--normal .l7-select-control-item {
373
- display: flex;
374
- align-items: center;
375
- height: 24px;
376
- padding: 0 16px;
377
- font-size: 12px;
378
- line-height: 24px;
379
- }
380
-
381
- .l7-select-control--normal .l7-select-control-item > * + * {
382
- margin-left: 6px;
383
- }
384
-
385
- .l7-select-control--normal .l7-select-control-item input[type='checkbox'] {
386
- width: 14px;
387
- height: 14px;
388
- }
389
-
390
- .l7-select-control--normal .l7-select-control-item:hover {
391
- background-color: #f3f3f3;
392
- }
393
-
394
- .l7-select-control--image {
395
- display: flex;
396
- flex-wrap: wrap;
397
- align-items: flex-start;
398
- box-sizing: content-box;
399
- max-width: 460px;
400
- max-height: 400px;
401
- margin: 12px 0 0 12px;
402
- overflow: hidden auto;
403
- }
404
-
405
- .l7-select-control--image .l7-select-control-item {
406
- position: relative;
407
- display: flex;
408
- flex: 0 0 calc((100% - (12px + 9px) * 2) / 3);
409
- flex-direction: column;
410
- justify-content: center;
411
- box-sizing: content-box;
412
- margin-right: 12px;
413
- margin-bottom: 12px;
414
- overflow: hidden;
415
- font-size: 12px;
416
- border: 1px solid #fff;
417
- border-radius: 2px;
418
- }
419
-
420
- .l7-select-control--image .l7-select-control-item img {
421
- width: 100%;
422
- height: 80px;
423
- }
424
-
425
- .l7-select-control--image .l7-select-control-item input[type='checkbox'] {
426
- position: absolute;
427
- top: 0;
428
- right: 0;
429
- }
430
-
431
- .l7-select-control--image .l7-select-control-item .l7-select-control-item-row {
432
- display: flex;
433
- align-items: center;
434
- justify-content: center;
435
- line-height: 26px;
436
- }
437
-
438
- .l7-select-control--image .l7-select-control-item .l7-select-control-item-row > * + * {
439
- margin-left: 8px;
440
- }
441
-
442
- .l7-select-control--image .l7-select-control-item.l7-select-control-item-active {
443
- border-color: #0370fe;
444
- }
445
-
446
- .l7-select-control-item {
447
- cursor: pointer;
448
- }
449
-
450
- .l7-select-control-item input[type='checkbox'] {
451
- margin: 0;
452
- cursor: pointer;
453
- }
454
-
455
- .l7-select-control--multiple .l7-select-control-item:hover {
456
- background-color: transparent;
457
- }
458
-
459
- .l7-control-logo {
460
- width: 89px;
461
- height: 16px;
462
- -webkit-user-select: none;
463
- -moz-user-select: none;
464
- -ms-user-select: none;
465
- user-select: none;
466
- }
467
-
468
- .l7-control-logo img {
469
- height: 100%;
470
- width: 100%;
471
- }
472
-
473
- .l7-control-logo .l7-control-logo-link {
474
- display: block;
475
- cursor: pointer;
476
- }
477
-
478
- .l7-control-logo .l7-control-logo-link img {
479
- cursor: pointer;
480
- }
481
-
482
- .l7-control-mouse-location {
483
- background-color: #fff;
484
- border-radius: 2px;
485
- box-shadow: 0 0 20px 0 rgb(0 0 0 / 15%);
486
- padding: 2px 4px;
487
- min-width: 130px;
488
- }
489
-
490
- .l7-control-zoom {
491
- overflow: hidden;
492
- border-radius: 2px;
493
- box-shadow: 0 0 20px 0 rgb(0 0 0 / 15%);
494
- }
495
-
496
- .l7-control-zoom .l7-button-control {
497
- font-size: 16px;
498
- border-bottom: 1px solid #f0f0f0;
499
- border-radius: 0;
500
- box-shadow: 0 0 0;
501
- }
502
-
503
- .l7-control-zoom .l7-button-control .l7-iconfont {
504
- width: 14px;
505
- height: 14px;
506
- }
507
-
508
- .l7-control-zoom .l7-button-control:last-child {
509
- border-bottom: 0;
510
- }
511
-
512
- .l7-control-zoom .l7-control-zoom__number {
513
- color: #595959;
514
- padding: 0;
515
- }
516
-
517
- .l7-control-zoom .l7-control-zoom__number:hover {
518
- background-color: #fff;
519
- }
520
-
521
- .l7-control-scale {
522
- display: flex;
523
- flex-direction: column;
524
- }
525
-
526
- .l7-control-scale .l7-control-scale-line {
527
- box-sizing: border-box;
528
- padding: 2px 5px 1px;
529
- overflow: hidden;
530
- color: #595959;
531
- font-size: 10px;
532
- line-height: 1.1;
533
- white-space: nowrap;
534
- background: #fff;
535
- border: 2px solid #000;
536
- border-top: 0;
537
- transition: width 0.1s;
538
- }
539
-
540
- .l7-control-scale .l7-control-scale-line + .l7-control-scale .l7-control-scale-line {
541
- margin-top: -2px;
542
- border-top: 2px solid #777;
543
- border-bottom: none;
544
- }
545
-
546
- .l7-right .l7-control-scale {
547
- display: flex;
548
- align-items: flex-end;
549
- }
550
-
551
- .l7-right .l7-control-scale .l7-control-scale-line {
552
- text-align: right;
553
- }
554
-
555
- .l7-popup {
556
- position: absolute;
557
- top: 0;
558
- left: 0;
559
- z-index: 5;
560
- display: flex;
561
- will-change: transform;
562
- pointer-events: none;
563
- }
564
-
565
- .l7-popup.l7-popup-hide {
566
- display: none;
567
- }
568
-
569
- .l7-popup .l7-popup-content {
570
- position: relative;
571
- padding: 16px;
572
- font-size: 14px;
573
- background: #fff;
574
- border-radius: 3px;
575
- box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
576
- }
577
-
578
- .l7-popup .l7-popup-content .l7-popup-content__title {
579
- margin-bottom: 8px;
580
- font-weight: bold;
581
- }
582
-
583
- .l7-popup .l7-popup-content .l7-popup-close-button,
584
- .l7-popup .l7-popup-content .l7-popup-content__title,
585
- .l7-popup .l7-popup-content .l7-popup-content__panel {
586
- white-space: normal;
587
- -webkit-user-select: text;
588
- -moz-user-select: text;
589
- -ms-user-select: text;
590
- user-select: text;
591
- pointer-events: initial;
592
- }
593
-
594
- .l7-popup .l7-popup-content .l7-popup-close-button {
595
- position: absolute;
596
- top: 0;
597
- right: 0;
598
- width: 18px;
599
- height: 18px;
600
- padding: 0;
601
- font-size: 14px;
602
- line-height: 18px;
603
- text-align: center;
604
- background-color: transparent;
605
- border: 0;
606
- border-radius: 0 3px 0 0;
607
- cursor: pointer;
608
- }
609
-
610
- .l7-popup .l7-popup-tip {
611
- position: relative;
612
- z-index: 1;
613
- width: 0;
614
- height: 0;
615
- border: 10px solid transparent;
616
- }
617
-
618
- .l7-popup.l7-popup-anchor-bottom,
619
- .l7-popup.l7-popup-anchor-bottom-left,
620
- .l7-popup.l7-popup-anchor-bottom-right {
621
- flex-direction: column-reverse;
622
- }
623
-
624
- .l7-popup.l7-popup-anchor-bottom .l7-popup-tip,
625
- .l7-popup.l7-popup-anchor-bottom-left .l7-popup-tip,
626
- .l7-popup.l7-popup-anchor-bottom-right .l7-popup-tip {
627
- bottom: 1px;
628
- }
629
-
630
- .l7-popup.l7-popup-anchor-top,
631
- .l7-popup.l7-popup-anchor-top-left,
632
- .l7-popup.l7-popup-anchor-top-right {
633
- flex-direction: column;
634
- }
635
-
636
- .l7-popup.l7-popup-anchor-top .l7-popup-tip,
637
- .l7-popup.l7-popup-anchor-top-left .l7-popup-tip,
638
- .l7-popup.l7-popup-anchor-top-right .l7-popup-tip {
639
- top: 1px;
640
- }
641
-
642
- .l7-popup.l7-popup-anchor-left {
643
- flex-direction: row;
644
- }
645
-
646
- .l7-popup.l7-popup-anchor-right {
647
- flex-direction: row-reverse;
648
- }
649
-
650
- .l7-popup-anchor-top .l7-popup-tip {
651
- position: relative;
652
- align-self: center;
653
- border-top: none;
654
- border-bottom-color: #fff;
655
- }
656
-
657
- .l7-popup-anchor-top-left .l7-popup-tip {
658
- align-self: flex-start;
659
- border-top: none;
660
- border-bottom-color: #fff;
661
- border-left: none;
662
- }
663
-
664
- .l7-popup-anchor-top-right .l7-popup-tip {
665
- align-self: flex-end;
666
- border-top: none;
667
- border-right: none;
668
- border-bottom-color: #fff;
669
- }
670
-
671
- .l7-popup-anchor-bottom .l7-popup-tip {
672
- align-self: center;
673
- border-top-color: #fff;
674
- border-bottom: none;
675
- }
676
-
677
- .l7-popup-anchor-bottom-left .l7-popup-tip {
678
- align-self: flex-start;
679
- border-top-color: #fff;
680
- border-bottom: none;
681
- border-left: none;
682
- }
683
-
684
- .l7-popup-anchor-bottom-right .l7-popup-tip {
685
- align-self: flex-end;
686
- border-top-color: #fff;
687
- border-right: none;
688
- border-bottom: none;
689
- }
690
-
691
- .l7-popup-anchor-left .l7-popup-tip {
692
- align-self: center;
693
- border-right-color: #fff;
694
- border-left: none;
695
- }
696
-
697
- .l7-popup-anchor-right .l7-popup-tip {
698
- right: 1px;
699
- align-self: center;
700
- border-right: none;
701
- border-left-color: #fff;
702
- }
703
-
704
- .l7-popup-anchor-top-left .l7-popup-content {
705
- border-top-left-radius: 0;
706
- }
707
-
708
- .l7-popup-anchor-top-right .l7-popup-content {
709
- border-top-right-radius: 0;
710
- }
711
-
712
- .l7-popup-anchor-bottom-left .l7-popup-content {
713
- border-bottom-left-radius: 0;
714
- }
715
-
716
- .l7-popup-anchor-bottom-right .l7-popup-content {
717
- border-bottom-right-radius: 0;
718
- }
719
-
720
- .l7-popup-track-pointer {
721
- display: none;
722
- }
723
-
724
- .l7-popup-track-pointer * {
725
- -webkit-user-select: none;
726
- -moz-user-select: none;
727
- -ms-user-select: none;
728
- user-select: none;
729
- pointer-events: none;
730
- }
731
-
732
- .l7-map:hover .l7-popup-track-pointer {
733
- display: flex;
734
- }
735
-
736
- .l7-map:active .l7-popup-track-pointer {
737
- display: none;
738
- }
739
-
740
- .l7-layer-popup__row {
741
- font-size: 12px;
742
- }
743
-
744
- .l7-layer-popup__row + .l7-layer-popup__row {
745
- margin-top: 4px;
746
- }
747
-
748
- .l7-control-swipe {
749
- position: absolute;
750
- top: 50%;
751
- left: 50%;
752
- z-index: 6;
753
- -webkit-transform: translate(-50%, -50%);
754
- transform: translate(-50%, -50%);
755
- touch-action: none;
756
- }
757
-
758
- .l7-control-swipe_hide {
759
- display: none;
760
- }
761
-
762
- .l7-control-swipe::before {
763
- position: absolute;
764
- top: -5000px;
765
- bottom: -5000px;
766
- left: 50%;
767
- z-index: -1;
768
- width: 4px;
769
- background: #fff;
770
- -webkit-transform: translate(-2px, 0);
771
- transform: translate(-2px, 0);
772
- content: '';
773
- }
774
-
775
- .l7-control-swipe.horizontal::before {
776
- inset: 50% -5000px auto;
777
- width: auto;
778
- height: 4px;
779
- }
780
-
781
- .l7-control-swipe__button {
782
- display: block;
783
- width: 28px;
784
- height: 28px;
785
- margin: 0;
786
- padding: 0;
787
- color: #595959;
788
- font-weight: bold;
789
- font-size: inherit;
790
- text-align: center;
791
- text-decoration: none;
792
- background-color: #fff;
793
- border: none;
794
- border-radius: 2px;
795
- outline: none;
796
- }
797
-
798
- .l7-control-swipe,
799
- .l7-control-swipe__button {
800
- cursor: ew-resize;
801
- }
802
-
803
- .l7-control-swipe.horizontal,
804
- .l7-control-swipe.horizontal button {
805
- cursor: ns-resize;
806
- }
807
-
808
- .l7-control-swipe::after,
809
- .l7-control-swipe__button::before,
810
- .l7-control-swipe__button::after {
811
- position: absolute;
812
- top: 25%;
813
- bottom: 25%;
814
- left: 50%;
815
- width: 2px;
816
- background: currentcolor;
817
- -webkit-transform: translate(-1px, 0);
818
- transform: translate(-1px, 0);
819
- content: '';
820
- }
821
-
822
- .l7-control-swipe__button::after {
823
- -webkit-transform: translateX(4px);
824
- transform: translateX(4px);
825
- }
826
-
827
- .l7-control-swipe__button::before {
828
- -webkit-transform: translateX(-6px);
829
- transform: translateX(-6px);
830
- }
831
- `); // import './css/index.less';
5
+ import "./css/index.less";
832
6
  export * from "./control/baseControl";
833
7
  export { ExportImage } from "./control/exportImage";
834
8
  export { Fullscreen } from "./control/fullscreen";