mahal_map 1.7.3 → 2.0.0
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/README.md +1342 -1200
- package/dist/index.d.mts +264 -36
- package/dist/index.d.ts +264 -36
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +7 -7
- package/dist/index.mjs.map +1 -1
- package/dist/mahal_map.sdk.js +1 -1
- package/package.json +73 -73
package/README.md
CHANGED
|
@@ -1,1200 +1,1342 @@
|
|
|
1
|
-
# Mahal Map
|
|
2
|
-
|
|
3
|
-
Mahal Map - JavaScript/TypeScript SDK для работы с картой Mahal поверх MapLibre GL JS.
|
|
4
|
-
|
|
5
|
-
Документация ниже описывает только открытые функции карты: создание карты, управление инстансами, стили, язык, камера, маркеры и browser SDK.
|
|
6
|
-
|
|
7
|
-
## Установка
|
|
8
|
-
|
|
9
|
-
```sh
|
|
10
|
-
npm install mahal_map maplibre-gl
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
`
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
`
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
`
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
| `
|
|
185
|
-
|
|
|
186
|
-
| `
|
|
187
|
-
| `
|
|
188
|
-
| `
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
map.
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
const
|
|
278
|
-
|
|
279
|
-
const
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
);
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
</
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
const
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
```
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
```
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
### `
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
```ts
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
```
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
```
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
)
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
```
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
```
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
|
1044
|
-
|
|
|
1045
|
-
| `
|
|
1046
|
-
| `
|
|
1047
|
-
| `
|
|
1048
|
-
| `
|
|
1049
|
-
| `
|
|
1050
|
-
| `
|
|
1051
|
-
| `
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
```
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
});
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
)
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
|
1191
|
-
|
|
|
1192
|
-
| `
|
|
1193
|
-
| `
|
|
1194
|
-
| `
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1
|
+
# Mahal Map
|
|
2
|
+
|
|
3
|
+
Mahal Map - JavaScript/TypeScript SDK для работы с картой Mahal поверх MapLibre GL JS.
|
|
4
|
+
|
|
5
|
+
Документация ниже описывает только открытые функции карты: создание карты, управление инстансами, стили, язык, камера, маркеры и browser SDK.
|
|
6
|
+
|
|
7
|
+
## Установка
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install mahal_map maplibre-gl @grammaps/maps3d-web
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Обе зависимости — `peerDependencies`, в бандл `mahal_map` они не входят. Библиотека их не импортирует: MapLibre и `Maps3D` приходят снаружи, аргументами `create()` либо через `window`.
|
|
14
|
+
|
|
15
|
+
- `maplibre-gl` (3–6) — обязателен всегда.
|
|
16
|
+
- `@grammaps/maps3d-web` (>=0.5.0) — даёт стили, тайлы, объём, пробки, рельеф, планы этажей, клик по объектам. Помечен `optional`: без него карта поднимется на запасном векторном стиле, но 3D и слоёв платформы на ней не будет.
|
|
17
|
+
|
|
18
|
+
MapLibre можно не класть в свою сборку вовсе — платформа отдаёт согласованную версию вместе с веб-воркером:
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
const maplibregl = await Maps3D.maplibre({ base: "https://navi.gram.tj" });
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Миграция с 1.x на 2.0
|
|
25
|
+
|
|
26
|
+
Собственных URL стилей у `mahal_map` больше нет — их целиком отдаёт `@grammaps/maps3d-web`.
|
|
27
|
+
|
|
28
|
+
| 1.x | 2.0 |
|
|
29
|
+
| ---------------------------------------------- | -------------------------------------------------------------- |
|
|
30
|
+
| `engine: "legacy"` (по умолчанию) | Удалён. Единственный путь — платформа через `Maps3D`. |
|
|
31
|
+
| `engine: "3d"` | Больше не нужен, опция игнорируется. |
|
|
32
|
+
| `autoAddVectorSource: true` | Удалён. Тот же векторный стиль применяется сам, когда нет `Maps3D`. |
|
|
33
|
+
| `preset: "standard-night"` | `theme: "dark"`, либо полный URL в `style`. |
|
|
34
|
+
| `preset: "road-urban-lab-v2"` | `theme: "light"`, либо полный URL в `style`. |
|
|
35
|
+
| `lang` менял URL стиля | Стиль не трогает — язык подписей приходит из самого стиля. |
|
|
36
|
+
| `layer.setBuildingsEnabled(...)` напрямую | `map.toggle3DBuildings(...)` или `map.setLayer("buildings", ...)`. |
|
|
37
|
+
|
|
38
|
+
`engine` и `autoAddVectorSource` оставлены в типах как `@deprecated`, чтобы не ломать компиляцию, но на поведение не влияют.
|
|
39
|
+
|
|
40
|
+
Что появилось: реестр слоёв (`setLayer`/`getLayers`/`onLayers`), выделение зданий, клик по дорогам, рельеф, планы этажей, перекрытия, семейства стилей `navigator`/`mobile` и автоматический `antialias`.
|
|
41
|
+
|
|
42
|
+
Минимальный диф:
|
|
43
|
+
|
|
44
|
+
```diff
|
|
45
|
+
const map = MahalMap.create(
|
|
46
|
+
{
|
|
47
|
+
container: "map",
|
|
48
|
+
- engine: "3d",
|
|
49
|
+
theme: "dark",
|
|
50
|
+
- preset: "standard-night",
|
|
51
|
+
enable3D: true,
|
|
52
|
+
},
|
|
53
|
+
maplibregl,
|
|
54
|
+
Maps3D,
|
|
55
|
+
);
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Быстрый старт через NPM
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
import maplibregl from "maplibre-gl";
|
|
62
|
+
import "maplibre-gl/dist/maplibre-gl.css";
|
|
63
|
+
import { Maps3D } from "@grammaps/maps3d-web";
|
|
64
|
+
import { MahalMap, keyUtils } from "mahal_map";
|
|
65
|
+
|
|
66
|
+
keyUtils.saveKey("YOUR_MAP_API_KEY");
|
|
67
|
+
|
|
68
|
+
const map = MahalMap.create(
|
|
69
|
+
{
|
|
70
|
+
container: "map",
|
|
71
|
+
center: [68.787, 38.573],
|
|
72
|
+
zoom: 16.6,
|
|
73
|
+
theme: "light",
|
|
74
|
+
},
|
|
75
|
+
maplibregl,
|
|
76
|
+
Maps3D,
|
|
77
|
+
);
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Контейнер должен существовать в HTML:
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<div id="map" style="width: 100%; height: 500px"></div>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
`Maps3D` — третий, необязательный аргумент: не передан — SDK возьмёт его из `window.Maps3D`. Стиль, `transformRequest` с ключом, сглаживание и подключение 3D библиотека делает сама.
|
|
87
|
+
|
|
88
|
+
## Быстрый старт через Browser SDK
|
|
89
|
+
|
|
90
|
+
Сначала подключите MapLibre, затем `mahal_map.sdk.js`. Для browser SDK параметр `apikey` обязателен: без него карта не инициализируется.
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<link
|
|
94
|
+
rel="stylesheet"
|
|
95
|
+
href="https://unpkg.com/maplibre-gl@5.3.0/dist/maplibre-gl.css"
|
|
96
|
+
/>
|
|
97
|
+
<script src="https://unpkg.com/maplibre-gl@5.3.0/dist/maplibre-gl.js"></script>
|
|
98
|
+
<script src="https://cp.mahal.tj/sdk/mahal_map.sdk.js?apikey=YOUR_MAP_API_KEY"></script>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
После этого глобальный объект `MahalMap` доступен в `window`:
|
|
102
|
+
|
|
103
|
+
```html
|
|
104
|
+
<div id="map" style="width: 100%; height: 500px"></div>
|
|
105
|
+
|
|
106
|
+
<script>
|
|
107
|
+
const map = MahalMap.create({
|
|
108
|
+
container: "map",
|
|
109
|
+
center: [69.624024, 40.279687],
|
|
110
|
+
zoom: 12,
|
|
111
|
+
});
|
|
112
|
+
</script>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
Через NPM язык можно передать при создании карты:
|
|
116
|
+
|
|
117
|
+
```ts
|
|
118
|
+
const map = MahalMap.create(
|
|
119
|
+
{
|
|
120
|
+
container: "map",
|
|
121
|
+
lang: "ru",
|
|
122
|
+
theme: "dark",
|
|
123
|
+
},
|
|
124
|
+
maplibregl,
|
|
125
|
+
);
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
Через browser SDK язык можно передать в URL скрипта:
|
|
129
|
+
|
|
130
|
+
```html
|
|
131
|
+
<script src="https://cp.mahal.tj/sdk/mahal_map.sdk.js?apikey=YOUR_MAP_API_KEY&lang=ru"></script>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Если `lang` не передан или передан `lang=tj`, SDK добавляет только `token`.
|
|
135
|
+
|
|
136
|
+
## Параметры создания карты
|
|
137
|
+
|
|
138
|
+
`MahalMap.create(options, maplibreObject?, maps3dCtor?)`
|
|
139
|
+
|
|
140
|
+
`maps3dCtor` — импортированный конструктор `Maps3D` (третий, необязательный аргумент). Если не передан, SDK ищет его в `window.Maps3D`.
|
|
141
|
+
|
|
142
|
+
```ts
|
|
143
|
+
import type { IMaps3DLayerOptions, Maps3DThemeName } from "mahal_map";
|
|
144
|
+
|
|
145
|
+
interface IMahalMapOptions {
|
|
146
|
+
container?: string | HTMLElement;
|
|
147
|
+
style?: string;
|
|
148
|
+
theme?: "dark" | "light";
|
|
149
|
+
lang?: "tj" | "ru";
|
|
150
|
+
center?: [number, number];
|
|
151
|
+
zoom?: number;
|
|
152
|
+
pitch?: number;
|
|
153
|
+
bearing?: number;
|
|
154
|
+
enable3D?: boolean;
|
|
155
|
+
base?: string;
|
|
156
|
+
family?: "default" | "navigator" | "mobile";
|
|
157
|
+
preset?: Maps3DThemeName | string;
|
|
158
|
+
antialias?: boolean;
|
|
159
|
+
maps3d?: Omit<IMaps3DLayerOptions, "apiKey" | "base">;
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
| Параметр | Тип | Описание |
|
|
164
|
+
| ----------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
165
|
+
| `container` | `string \| HTMLElement` | ID контейнера или DOM-элемент. Не передан — берётся `"map"`. |
|
|
166
|
+
| `style` | `string` | Полный URL своего стиля. Задан — стиль зафиксирован, `setStyle()` его не меняет. |
|
|
167
|
+
| `theme` | `"dark" \| "light"` | Светлая/тёмная внутри выбранного `family`. По умолчанию `light`. |
|
|
168
|
+
| `lang` | `"tj" \| "ru"` | Язык для поиска и роутинга. На стиль не влияет — подписи приходят из самого стиля платформы. |
|
|
169
|
+
| `center` | `[number, number]` | Центр карты в формате `[lng, lat]`. |
|
|
170
|
+
| `zoom` | `number` | Начальный zoom. |
|
|
171
|
+
| `pitch` | `number` | Начальный наклон камеры. Не задан и 3D включено — авто `58`: при `pitch: 0` объём зданий не виден, камера смотрит строго сверху. |
|
|
172
|
+
| `bearing` | `number` | Начальный поворот камеры. |
|
|
173
|
+
| `enable3D` | `boolean` | Подключает Maps3D. По умолчанию `true`, когда `Maps3D` доступен. |
|
|
174
|
+
| `base` | `string` | Домен платформы. По умолчанию `https://navi.gram.tj`. |
|
|
175
|
+
| `family` | `"default" \| "navigator" \| "mobile"` | Семейство стилей. `theme` выбирает внутри него: `default` → `light`/`dark`, `navigator` → `navigator-light`/`navigator-dark`, `mobile` → `mobile-*`. |
|
|
176
|
+
| `preset` | `Maps3DThemeName \| string` | Явное имя темы платформы или полный URL стиля вместо пары `family` + `theme`. Задан — стиль зафиксирован. |
|
|
177
|
+
| `antialias` | `boolean` | Сглаживание сцены. По умолчанию `true` при включённом 3D: без него тонкая геометрия (перила, мачты, ряды сидений) на отдалении рассыпается в рябь. |
|
|
178
|
+
| `maps3d` | `object` | Опции Maps3D: `buildings`, `traffic`, `indoor`, `closures`, `places`, `minZoom`, `lodBias`, `memoryBudget`, `maskReplaced`, `typeReplacements`. |
|
|
179
|
+
|
|
180
|
+
### Стили и темы
|
|
181
|
+
|
|
182
|
+
Стили целиком приходят из `@grammaps/maps3d-web` — своего списка URL у `mahal_map` больше нет. Словарь тем один и тот же у SDK и у библиотеки:
|
|
183
|
+
|
|
184
|
+
| `family` | `theme: "light"` | `theme: "dark"` |
|
|
185
|
+
| ------------- | ------------------ | ----------------- |
|
|
186
|
+
| `"default"` | `light` | `dark` |
|
|
187
|
+
| `"navigator"` | `navigator-light` | `navigator-dark` |
|
|
188
|
+
| `"mobile"` | `mobile-light` | `mobile-dark` |
|
|
189
|
+
|
|
190
|
+
Имя темы уходит в `Maps3D.styleUrl()`, адрес строит сам SDK. Неизвестное имя — явная ошибка с префиксом `[MahalMap SDK]`, а не пустая карта.
|
|
191
|
+
|
|
192
|
+
```ts
|
|
193
|
+
// Навигаторная тёмная тема
|
|
194
|
+
MahalMap.create({ container: "map", family: "navigator", theme: "dark" }, maplibregl, Maps3D);
|
|
195
|
+
|
|
196
|
+
// Смена темы внутри того же семейства
|
|
197
|
+
map.setStyle("light"); // → navigator-light
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
> **Миграция с 1.x.** Имена пресетов прежнего поколения (`road-urban-lab-v2`, `standard-night`) больше не подставляются по умолчанию — словарь тем теперь один, платформенный. Если старый стиль всё ещё нужен, передайте его полным URL:
|
|
201
|
+
>
|
|
202
|
+
> ```ts
|
|
203
|
+
> MahalMap.create(
|
|
204
|
+
> { container: "map", style: "https://navi.gram.tj/maps/standard-night.json" },
|
|
205
|
+
> maplibregl,
|
|
206
|
+
> Maps3D,
|
|
207
|
+
> );
|
|
208
|
+
> ```
|
|
209
|
+
|
|
210
|
+
### Без `@grammaps/maps3d-web`
|
|
211
|
+
|
|
212
|
+
Библиотека не установлена и в `window.Maps3D` ничего нет — карта всё равно поднимется: используется запасной векторный стиль `mtile.gram.tj` с подписью `?token=`, в консоль уходит предупреждение. На такой карте нет объёма, объектов, пробок, рельефа и реестра слоёв; `setStyle()` и `setLanguage()` стиль не меняют, методы реестра возвращают пустые значения (`false`, `null`, `[]`).
|
|
213
|
+
|
|
214
|
+
Этот путь — единственный, где ещё проверяется подписка JSApi: `createAsync()` не создаст карту, если подписки нет. С переданным `Maps3D` проверка пропускается — доступ гейтит сама платформа по `?key=`.
|
|
215
|
+
|
|
216
|
+
### Опции `maps3d` (расширенные)
|
|
217
|
+
|
|
218
|
+
Передаются в `MahalMap.create({ maps3d: {...} })` и уходят в `Maps3D` как есть:
|
|
219
|
+
|
|
220
|
+
| Опция | Тип | По умолч. | Описание |
|
|
221
|
+
| ------------------ | ----------------------------------------------------- | --------- | -------------------------------------------------------------------- |
|
|
222
|
+
| `buildings` | `boolean \| { detail?: footprint\|volume\|roofs\|facade }` | `true` | Объёмные здания; объектом — их облик. |
|
|
223
|
+
| `traffic` | `boolean \| { raster?, rasterMaxZoom?, graph?, opacity?, arrows? }` | `false` | Слой пробок. `raster: true` — картинкой вместо векторного слоя. |
|
|
224
|
+
| `indoor` | `boolean \| { level? }` | `false` | Планы этажей. |
|
|
225
|
+
| `closures` | `boolean \| object` | `false` | Перекрытия дорог. |
|
|
226
|
+
| `places` | `object` | — | Парковки, заправки, зарядки: `highlight`, `paid`, `free`, `unknown`. |
|
|
227
|
+
| `minZoom` | `number` | `16` | Зум появления объёма. |
|
|
228
|
+
| `lodBias` | `number` | `1` | `0` — всегда детальная геометрия, `1` — упрощённая вдали. |
|
|
229
|
+
| `memoryBudget` | `number` | `30` | Сколько 3D-моделей держать в памяти. |
|
|
230
|
+
| `maskReplaced` | `boolean` | `true` | Прятать заменённые OSM-объекты (`anchor=replace`). |
|
|
231
|
+
| `typeReplacements` | `boolean` | `true` | Рисовать замены по типу (`natural=tree` → 3D-дерево и т.п.). |
|
|
232
|
+
|
|
233
|
+
`apiKey` и `base` в `maps3d` передавать не нужно — их подставляет сам `MahalMap` из сохранённого ключа и `options.base`.
|
|
234
|
+
|
|
235
|
+
### Реестр слоёв
|
|
236
|
+
|
|
237
|
+
Единая дверь ко всем слоям платформы. Состояние слоя — три независимых поля: `wanted` (чего хочет приложение), `available` (что позволяют стиль и данные), `active` (что нарисовано сейчас).
|
|
238
|
+
|
|
239
|
+
```ts
|
|
240
|
+
map.setLayer("terrain", true, { mode: "on" });
|
|
241
|
+
map.setLayer("traffic", true);
|
|
242
|
+
map.setLayer("indoor", true, { level: 2 });
|
|
243
|
+
|
|
244
|
+
const unsubscribe = map.onLayers((state) => {
|
|
245
|
+
console.log(state.id, state.wanted, state.available, state.active);
|
|
246
|
+
});
|
|
247
|
+
|
|
248
|
+
map.getLayerState("terrain"); // снимок одного слоя или null
|
|
249
|
+
map.getLayers(); // снимок всех — по нему рисуется панель слоёв
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
| Слой | Параметры | По умолчанию |
|
|
253
|
+
| ------------------ | ---------------------------------------- | ------------ |
|
|
254
|
+
| `buildings` | `detail: footprint\|volume\|roofs\|facade` | включён |
|
|
255
|
+
| `objects` | — | включён |
|
|
256
|
+
| `traffic` | — | выключен |
|
|
257
|
+
| `trafficRaster` | — | выключен |
|
|
258
|
+
| `parking` | `highlight`, `paid`, `free`, `unknown` | включён |
|
|
259
|
+
| `fuel`, `charging` | — | включены |
|
|
260
|
+
| `closures` | — | выключен |
|
|
261
|
+
| `indoor` | `level` | выключен |
|
|
262
|
+
| `terrain` | `mode: auto\|on\|off` | `auto` |
|
|
263
|
+
|
|
264
|
+
Слой может быть включён и при этом не нарисован: рельеф в режиме `auto` появляется на обзорных зумах, перекрытия требуют своего тайлсета, планы этажей — данных по зданию. Рельеф в режиме `on` заметно дороже по трафику и времени кадра.
|
|
265
|
+
|
|
266
|
+
Парковки, заправки и зарядки `Maps3D` рисует сам, забирая эти классы у POI-слоёв стиля, — поэтому выключение слоя убирает объекты с карты полностью, а не оставляет значок стиля.
|
|
267
|
+
|
|
268
|
+
`setLayer()` возвращает `false`, если такого слоя в подключённой сборке Maps3D нет (или Maps3D не передан вовсе). После полной смены стиля волю клиента возвращает `map.refreshLayers()` — при `setStyle()` библиотека вызывает его сама.
|
|
269
|
+
|
|
270
|
+
### 3D-здания
|
|
271
|
+
|
|
272
|
+
`Maps3D` рисует процедурные 3D-здания (three.js) вместо плоской `fill-extrusion` стиля: фаска кромок, вертикальный градиент и базовый цвет берутся из стиля, окна — из `metadata` темы. Слой создаётся и подключается автоматически (`enable3D` по умолчанию `true`) — вручную поднимать `new Maps3D(...)` не нужно.
|
|
273
|
+
|
|
274
|
+
Тонкая настройка облика — через сам слой, после готовности:
|
|
275
|
+
|
|
276
|
+
```ts
|
|
277
|
+
const layer = await map.whenMaps3DReady();
|
|
278
|
+
|
|
279
|
+
const b = layer?.buildings;
|
|
280
|
+
b?.setWindowStyle(7); // тип окна 0..9 (сетка, лента, curtain wall, ...)
|
|
281
|
+
b?.setWindowDepth(0.85); // глубина ниши окна 0..1 (реальная геометрия вблизи)
|
|
282
|
+
b?.setWindowColor("#6b9ed1");
|
|
283
|
+
b?.setWindowFrameColor("#f2f2f4");
|
|
284
|
+
b?.setEdgeRadius(1.2); // скругление кромок, м
|
|
285
|
+
// Свет обычно НЕ задают руками — его несёт metadata стиля, сеттеры её перебивают
|
|
286
|
+
b?.setSunIntensity(3.2);
|
|
287
|
+
b?.setAmbient(0.76);
|
|
288
|
+
b?.setSky(0.91);
|
|
289
|
+
b?.setExposure(1.5);
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
Тема (окна/свет) приходит из `metadata` стиля и применяется автоматически при смене стиля — пересоздавать слой не нужно. Ручные сеттеры её перебивают.
|
|
293
|
+
|
|
294
|
+
**Ручной `Maps3D.enhance(...)` — отдельный сценарий.** Карту при этом создавайте с `enable3D: false`: второй экземпляр на занятой карте `Maps3D` отклоняет.
|
|
295
|
+
|
|
296
|
+
```ts
|
|
297
|
+
const map = MahalMap.create(
|
|
298
|
+
{ container: "map", enable3D: false },
|
|
299
|
+
maplibregl,
|
|
300
|
+
Maps3D,
|
|
301
|
+
);
|
|
302
|
+
|
|
303
|
+
const maps3d = Maps3D.enhance(map.getMap(), {
|
|
304
|
+
apiKey: "YOUR_MAP_API_KEY",
|
|
305
|
+
base: "https://navi.gram.tj",
|
|
306
|
+
});
|
|
307
|
+
await maps3d.ready; // enhance() ждёт нативную карту MapLibre, не обёртку MahalMap
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
### Выделение зданий и клик по дорогам
|
|
311
|
+
|
|
312
|
+
Клик по зданию и клик по дороге приходят независимо: одна точка может попасть и туда, и туда — что важнее, решает приложение.
|
|
313
|
+
|
|
314
|
+
```ts
|
|
315
|
+
map.setSelectionStyle({ color: "#e23b2f", opacity: 0.55, durationMs: 300 });
|
|
316
|
+
|
|
317
|
+
map.onBuildingClick((building) => {
|
|
318
|
+
if (!building) return;
|
|
319
|
+
// SDK уже подсветил его
|
|
320
|
+
console.log(building.props?.osm_id, building.height);
|
|
321
|
+
});
|
|
322
|
+
|
|
323
|
+
map.onRoadClick((road) => {
|
|
324
|
+
if (!road) return;
|
|
325
|
+
console.log(road.nameRu ?? road.name, road.class);
|
|
326
|
+
});
|
|
327
|
+
|
|
328
|
+
// Выделить здание по osm_id — например, после поиска
|
|
329
|
+
map.selectBuilding(123456789); // false, если здания нет в загруженных данных
|
|
330
|
+
map.selectedBuilding(); // текущий id или null
|
|
331
|
+
map.clearSelection();
|
|
332
|
+
|
|
333
|
+
// Дорога под точкой холста, допуск по умолчанию 12 px
|
|
334
|
+
map.roadAt({ x: 320, y: 240 });
|
|
335
|
+
map.roadsNamed; // есть ли в текущем стиле названия дорог
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
Подписываться можно сразу после `create()`, до готовности карты.
|
|
339
|
+
|
|
340
|
+
#### Вкл/выкл 3D-здания на лету
|
|
341
|
+
|
|
342
|
+
Переключение объём ⇄ штатные здания стиля, без пересоздания карты. Умеет поднять слой, если его не было (`enable3D: false` при создании):
|
|
343
|
+
|
|
344
|
+
```ts
|
|
345
|
+
const map = MahalMap.getInstance("map");
|
|
346
|
+
|
|
347
|
+
map.toggle3DBuildings(false); // выкл
|
|
348
|
+
map.toggle3DBuildings(true); // вкл обратно
|
|
349
|
+
|
|
350
|
+
// статик-версия и SDK-фасад (mahal_map/sdk) работают так же
|
|
351
|
+
MahalMap.toggle3DBuildings(map, false);
|
|
352
|
+
```
|
|
353
|
+
|
|
354
|
+
Под капотом это `setLayer("buildings", enabled)`. Штатные здания стиля прячет и возвращает сам `Maps3D` — `mahal_map` их видимость не трогает, поэтому спорить за один слой некому. Эквивалентная запись: `map.setLayer("buildings", false)`.
|
|
355
|
+
|
|
356
|
+
#### `map.whenMaps3DReady()`
|
|
357
|
+
|
|
358
|
+
Подключение слоя асинхронное: сразу после `create()` слой уже есть, но `layer.buildings` (окна, свет, кромки) появляется только после него. Чтобы не гадать — дождитесь готовности:
|
|
359
|
+
|
|
360
|
+
```ts
|
|
361
|
+
const layer = await map.whenMaps3DReady();
|
|
362
|
+
|
|
363
|
+
layer?.buildings?.setWindowStyle(4);
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
Промис резолвится в `undefined`, если `Maps3D` не передан, слой выключен (`enable3D: false`) или подключение упало — ошибка при этом уходит в `console.error`, а карта остаётся живой на штатных зданиях стиля.
|
|
367
|
+
|
|
368
|
+
### Подключение и выключение 3D-слоя: полный пример (Vue 3)
|
|
369
|
+
|
|
370
|
+
Кнопка-переключатель «3D ⇄ контуры», тонкая настройка окон и корректная очистка при размонтировании. Слой `Maps3D` поднимает и цепляет сама библиотека — вручную `new Maps3D(...)`, `transformRequest` и `attach()` писать не нужно.
|
|
371
|
+
|
|
372
|
+
```vue
|
|
373
|
+
<script setup lang="ts">
|
|
374
|
+
import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
|
|
375
|
+
import maplibregl from "maplibre-gl";
|
|
376
|
+
import "maplibre-gl/dist/maplibre-gl.css";
|
|
377
|
+
import { Maps3D } from "@grammaps/maps3d-web";
|
|
378
|
+
import { MahalMap, keyUtils } from "mahal_map";
|
|
379
|
+
|
|
380
|
+
const API_KEY = "YOUR_MAP_API_KEY";
|
|
381
|
+
|
|
382
|
+
const mahalMap = shallowRef<MahalMap | null>(null);
|
|
383
|
+
const is3dEnabled = ref(true);
|
|
384
|
+
const isLayerReady = ref(false);
|
|
385
|
+
|
|
386
|
+
const buildingModeText = computed(() =>
|
|
387
|
+
is3dEnabled.value ? "3D включено" : "Контуры",
|
|
388
|
+
);
|
|
389
|
+
const buildingToggleText = computed(() =>
|
|
390
|
+
is3dEnabled.value ? "Выключить 3D" : "Включить 3D",
|
|
391
|
+
);
|
|
392
|
+
|
|
393
|
+
function toggle3dBuildings() {
|
|
394
|
+
is3dEnabled.value = !is3dEnabled.value;
|
|
395
|
+
// Вкл/выкл детальных 3D-зданий: библиотека сама вернёт/спрячет плоские здания стиля.
|
|
396
|
+
mahalMap.value?.toggle3DBuildings(is3dEnabled.value);
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
onMounted(async () => {
|
|
400
|
+
// Токен — один на всё (стиль, тайлы, Maps3D). Отдельный apiKey слою передавать не нужно.
|
|
401
|
+
keyUtils.saveKey(API_KEY);
|
|
402
|
+
|
|
403
|
+
const map = MahalMap.create(
|
|
404
|
+
{
|
|
405
|
+
container: "map",
|
|
406
|
+
theme: "dark", // тема dark; "light" → тема light
|
|
407
|
+
center: [68.787, 38.573],
|
|
408
|
+
zoom: 16.6,
|
|
409
|
+
pitch: 58, // без наклона объём не виден
|
|
410
|
+
bearing: -20,
|
|
411
|
+
enable3D: true, // значение по умолчанию, когда Maps3D передан
|
|
412
|
+
maps3d: { minZoom: 16, lodBias: 0 },
|
|
413
|
+
},
|
|
414
|
+
maplibregl,
|
|
415
|
+
Maps3D,
|
|
416
|
+
);
|
|
417
|
+
|
|
418
|
+
mahalMap.value = map;
|
|
419
|
+
|
|
420
|
+
// Дожидаемся attach(): до него layer.buildings ещё нет.
|
|
421
|
+
const layer = await map.whenMaps3DReady();
|
|
422
|
+
const buildings = layer?.buildings;
|
|
423
|
+
|
|
424
|
+
if (!buildings) {
|
|
425
|
+
return;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
buildings.setWindowMinZoom?.(16);
|
|
429
|
+
buildings.setWindowStyle(4);
|
|
430
|
+
buildings.setWindowDepth(0.85);
|
|
431
|
+
buildings.setWindowColor("#6b9ed1");
|
|
432
|
+
buildings.setWindowFrameColor("#f2f2f4");
|
|
433
|
+
buildings.setWindowGlow?.(0.22);
|
|
434
|
+
buildings.setEdgeRadius(1.2);
|
|
435
|
+
|
|
436
|
+
isLayerReady.value = true;
|
|
437
|
+
});
|
|
438
|
+
|
|
439
|
+
onBeforeUnmount(() => {
|
|
440
|
+
isLayerReady.value = false;
|
|
441
|
+
// destroy() сам снимает слой Maps3D и удаляет карту MapLibre.
|
|
442
|
+
mahalMap.value?.destroy();
|
|
443
|
+
mahalMap.value = null;
|
|
444
|
+
});
|
|
445
|
+
</script>
|
|
446
|
+
|
|
447
|
+
<template>
|
|
448
|
+
<main class="map-page">
|
|
449
|
+
<div id="map" class="map" />
|
|
450
|
+
|
|
451
|
+
<section class="panel" aria-label="GramMaps 3D">
|
|
452
|
+
<span class="mode-label">{{ buildingModeText }}</span>
|
|
453
|
+
<button
|
|
454
|
+
type="button"
|
|
455
|
+
:aria-pressed="is3dEnabled"
|
|
456
|
+
:disabled="!isLayerReady"
|
|
457
|
+
@click="toggle3dBuildings"
|
|
458
|
+
>
|
|
459
|
+
{{ buildingToggleText }}
|
|
460
|
+
</button>
|
|
461
|
+
</section>
|
|
462
|
+
</main>
|
|
463
|
+
</template>
|
|
464
|
+
|
|
465
|
+
<style>
|
|
466
|
+
.map-page,
|
|
467
|
+
.map {
|
|
468
|
+
position: absolute;
|
|
469
|
+
inset: 0;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.panel {
|
|
473
|
+
position: absolute;
|
|
474
|
+
top: 12px;
|
|
475
|
+
left: 12px;
|
|
476
|
+
z-index: 2;
|
|
477
|
+
}
|
|
478
|
+
</style>
|
|
479
|
+
```
|
|
480
|
+
|
|
481
|
+
Что библиотека делает за вас против ручного подключения `@grammaps/maps3d-web`:
|
|
482
|
+
|
|
483
|
+
| Ручной код | Через `mahal_map` |
|
|
484
|
+
| --------------------------------------------------- | -------------------------------------------------------------- |
|
|
485
|
+
| `...Maps3D.mapOptions({ base, apiKey, style })` | `theme` + `family` (или `preset` / `style` / `base` явно) |
|
|
486
|
+
| `antialias: true` не забыть | ставится сам при включённом 3D |
|
|
487
|
+
| `Maps3D.enhance(map, opts); await maps3d.ready` | `enable3D: true` + `maps3d: {...}`, `await map.whenMaps3DReady()` |
|
|
488
|
+
| `map.setStyle(Maps3D.styleUrl("dark", base))` | `map.setStyle("dark")` — внутри выбранного семейства |
|
|
489
|
+
| `maps3d.refreshLayers()` после смены стиля | вызывается сам на `style.load` |
|
|
490
|
+
| `maps3d.destroy(); map.remove()` | `map.destroy()` |
|
|
491
|
+
| ключ руками в каждый вызов | один `keyUtils.saveKey()` на всё |
|
|
492
|
+
|
|
493
|
+
#### То же самое без сборщика (browser SDK)
|
|
494
|
+
|
|
495
|
+
```html
|
|
496
|
+
<script src="https://unpkg.com/maplibre-gl@5.3.0/dist/maplibre-gl.js"></script>
|
|
497
|
+
<script src="https://cdn.jsdelivr.net/npm/@grammaps/maps3d-web/dist/maps3d.global.js"></script>
|
|
498
|
+
<script src="https://cp.mahal.tj/sdk/mahal_map.sdk.js?apikey=YOUR_MAP_API_KEY"></script>
|
|
499
|
+
|
|
500
|
+
<div id="map" style="width: 100%; height: 500px"></div>
|
|
501
|
+
<button id="toggle3d" type="button">Выключить 3D</button>
|
|
502
|
+
|
|
503
|
+
<script>
|
|
504
|
+
// Maps3D берётся из window.Maps3D — третий аргумент передавать не нужно.
|
|
505
|
+
const map = MahalMap.create({
|
|
506
|
+
container: "map",
|
|
507
|
+
theme: "dark",
|
|
508
|
+
center: [68.787, 38.573],
|
|
509
|
+
zoom: 16.6,
|
|
510
|
+
pitch: 58,
|
|
511
|
+
});
|
|
512
|
+
|
|
513
|
+
let enabled = true;
|
|
514
|
+
|
|
515
|
+
document.getElementById("toggle3d").addEventListener("click", () => {
|
|
516
|
+
enabled = !enabled;
|
|
517
|
+
MahalMap.toggle3DBuildings(map, enabled);
|
|
518
|
+
document.getElementById("toggle3d").textContent = enabled
|
|
519
|
+
? "Выключить 3D"
|
|
520
|
+
: "Включить 3D";
|
|
521
|
+
});
|
|
522
|
+
|
|
523
|
+
MahalMap.whenMaps3DReady(map).then((layer) => {
|
|
524
|
+
layer?.buildings?.setWindowStyle(4);
|
|
525
|
+
});
|
|
526
|
+
</script>
|
|
527
|
+
```
|
|
528
|
+
|
|
529
|
+
### Пробки
|
|
530
|
+
|
|
531
|
+
Через реестр слоёв:
|
|
532
|
+
|
|
533
|
+
```ts
|
|
534
|
+
map.setLayer("traffic", true);
|
|
535
|
+
map.setLayer("trafficRaster", true); // растровый вариант, без клика по дороге
|
|
536
|
+
```
|
|
537
|
+
|
|
538
|
+
Тонкие настройки — через сам слой:
|
|
539
|
+
|
|
540
|
+
```ts
|
|
541
|
+
const layer = map.getMaps3DLayer();
|
|
542
|
+
|
|
543
|
+
layer?.setTrafficOpacity?.(0.85);
|
|
544
|
+
layer?.setTrafficClicks?.(true); // попап скорости по клику
|
|
545
|
+
layer?.setTrafficGraph?.("yandex"); // osm | yandex | gis2 | mahal
|
|
546
|
+
layer?.refreshTraffic?.();
|
|
547
|
+
```
|
|
548
|
+
|
|
549
|
+
Либо сразу при создании карты: `maps3d: { traffic: { raster: true, opacity: 0.85 } }`.
|
|
550
|
+
|
|
551
|
+
### Жизненный цикл слоя
|
|
552
|
+
|
|
553
|
+
```ts
|
|
554
|
+
const layer = map.getMaps3DLayer();
|
|
555
|
+
|
|
556
|
+
layer?.setMinZoom?.(15);
|
|
557
|
+
layer?.setObjectsLight?.({ sun: 1.8, ambient: 0.45, sky: 1.1, exposure: 1.15 });
|
|
558
|
+
await layer?.refresh?.(); // перечитать объекты в кадре
|
|
559
|
+
await layer?.clearCache?.(); // сбросить IndexedDB-кеш моделей
|
|
560
|
+
layer?.diagnostics?.(); // рельеф, потеря контекста WebGL, счётчики зданий
|
|
561
|
+
```
|
|
562
|
+
|
|
563
|
+
Для полной остановки карты используйте только `map.destroy()` / `MahalMap.destroy(map)` — они сами вызывают `destroy()`/`remove()` у Maps3D слоя. **Не вызывайте `layer.destroy()`/`layer.remove()` напрямую**: `MahalMap` не узнает об этом и продолжит считать слой активным (внутренний `maps3dLayer` и `buildingsEnabled` разойдутся с реальностью). Нужно временно выключить только 3D-здания — используйте `map.toggle3DBuildings(false)` (см. выше).
|
|
564
|
+
|
|
565
|
+
## MahalMap
|
|
566
|
+
|
|
567
|
+
`MahalMap` - основной класс карты. Конструктор закрыт, карту нужно создавать через `MahalMap.create()`.
|
|
568
|
+
|
|
569
|
+
### `MahalMap.create(options, maplibreObject?, maps3dCtor?)`
|
|
570
|
+
|
|
571
|
+
Создает новый инстанс карты и сохраняет его по ключу `container`. Для стандартных стилей перед созданием карты должен быть сохранен map token через `keyUtils.saveKey()`. В browser SDK token читается из обязательного URL-параметра `apikey`. Третий аргумент — необязательный конструктор `Maps3D`; без него SDK использует `window.Maps3D`.
|
|
572
|
+
|
|
573
|
+
```ts
|
|
574
|
+
const map = MahalMap.create(
|
|
575
|
+
{
|
|
576
|
+
container: "map",
|
|
577
|
+
center: [69.624024, 40.279687],
|
|
578
|
+
zoom: 12,
|
|
579
|
+
theme: "light",
|
|
580
|
+
lang: "tj",
|
|
581
|
+
},
|
|
582
|
+
maplibregl,
|
|
583
|
+
);
|
|
584
|
+
```
|
|
585
|
+
|
|
586
|
+
В NPM-версии второй аргумент `maplibreObject` рекомендуется передавать явно. В browser SDK он берется из `window.maplibregl`.
|
|
587
|
+
|
|
588
|
+
### `MahalMap.createAsync(options, maplibreObject?, maps3dCtor?)`
|
|
589
|
+
|
|
590
|
+
Асинхронный вариант `create()`. Перед созданием карты проверяет подписку JSApi по map token и, если подписки нет, карту не создаёт вообще: MapLibre-инстанс не строится, промис отклоняется с ошибкой.
|
|
591
|
+
|
|
592
|
+
```ts
|
|
593
|
+
try {
|
|
594
|
+
const map = await MahalMap.createAsync(
|
|
595
|
+
{
|
|
596
|
+
container: "map",
|
|
597
|
+
center: [69.624024, 40.279687],
|
|
598
|
+
zoom: 12,
|
|
599
|
+
theme: "light",
|
|
600
|
+
},
|
|
601
|
+
maplibregl,
|
|
602
|
+
);
|
|
603
|
+
} catch (error) {
|
|
604
|
+
// подписки нет — показать своё сообщение вместо карты
|
|
605
|
+
console.error(error);
|
|
606
|
+
}
|
|
607
|
+
```
|
|
608
|
+
|
|
609
|
+
Правила проверки:
|
|
610
|
+
|
|
611
|
+
| Условие | Поведение |
|
|
612
|
+
| ------- | --------- |
|
|
613
|
+
| `Maps3D` не передан, сервис ответил `success: true` | Карта создаётся на запасном стиле. |
|
|
614
|
+
| `Maps3D` не передан, сервис ответил `success: false` | Карта **не** создаётся, промис отклоняется: `[MahalMap SDK] JSApi subscription is not active for this key: <message>`. |
|
|
615
|
+
| `Maps3D` не передан, проверка не дошла (сеть, CORS, таймаут) | Fail-open: `console.warn` и карта создаётся. Падение сервиса проверки не гасит карты. |
|
|
616
|
+
| `Maps3D` передан | Проверка **пропускается**, запрос не отправляется. |
|
|
617
|
+
| Map token не сохранён | Проверка пропускается, дальше срабатывает обычная ошибка про `apikey`. |
|
|
618
|
+
|
|
619
|
+
С переданным `Maps3D` вызов `createAsync()` ведёт себя ровно как `create()` — доступ к платформе контролируется параметром `?key=` на её стороне, отдельная подписка JSApi к ней отношения не имеет.
|
|
620
|
+
|
|
621
|
+
Синхронный `MahalMap.create()` проверку не выполняет и работает как раньше.
|
|
622
|
+
|
|
623
|
+
### Vue / Nuxt (ClientOnly, container как ref элемента)
|
|
624
|
+
|
|
625
|
+
`container` принимает и `id` строкой, и сам DOM-элемент. Ниже рабочий вариант с проверкой подписки: карта строится только после `createAsync()`, поэтому при отсутствии подписки в контейнере не останется пустой карты.
|
|
626
|
+
|
|
627
|
+
```vue
|
|
628
|
+
<template>
|
|
629
|
+
<ClientOnly>
|
|
630
|
+
<div class="overflow-hidden rounded-2xl border">
|
|
631
|
+
<div ref="mapElement" class="h-[360px] w-full" />
|
|
632
|
+
</div>
|
|
633
|
+
<template #fallback>
|
|
634
|
+
<div class="flex h-[360px] items-center justify-center">{{ loadingLabel }}</div>
|
|
635
|
+
</template>
|
|
636
|
+
</ClientOnly>
|
|
637
|
+
</template>
|
|
638
|
+
|
|
639
|
+
<script setup lang="ts">
|
|
640
|
+
import maplibregl from "maplibre-gl";
|
|
641
|
+
import "maplibre-gl/dist/maplibre-gl.css";
|
|
642
|
+
import type { MahalMap as MahalMapInstance } from "mahal_map";
|
|
643
|
+
import { onBeforeUnmount, onMounted, ref } from "vue";
|
|
644
|
+
|
|
645
|
+
const DUSHANBE_CENTER: [number, number] = [68.759965, 38.572419];
|
|
646
|
+
|
|
647
|
+
const mapElement = ref<HTMLElement | null>(null);
|
|
648
|
+
let map: MahalMapInstance | null = null;
|
|
649
|
+
// onMounted асинхронный: компонент может размонтироваться, пока идёт проверка подписки.
|
|
650
|
+
// Без флага карта создастся уже после unmount и останется висеть в памяти.
|
|
651
|
+
let disposed = false;
|
|
652
|
+
|
|
653
|
+
onMounted(async () => {
|
|
654
|
+
const { MahalMap, keyUtils } = await import("mahal_map");
|
|
655
|
+
|
|
656
|
+
keyUtils.saveKey(import.meta.env.VITE_MAHAL_API_KEY_TILE);
|
|
657
|
+
|
|
658
|
+
try {
|
|
659
|
+
const instance = await MahalMap.createAsync(
|
|
660
|
+
{
|
|
661
|
+
container: mapElement.value,
|
|
662
|
+
center: DUSHANBE_CENTER,
|
|
663
|
+
zoom: 11,
|
|
664
|
+
},
|
|
665
|
+
maplibregl,
|
|
666
|
+
);
|
|
667
|
+
|
|
668
|
+
if (disposed) {
|
|
669
|
+
instance.destroy();
|
|
670
|
+
return;
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
map = instance;
|
|
674
|
+
} catch (error) {
|
|
675
|
+
// подписки JSApi нет — показать своё сообщение вместо карты
|
|
676
|
+
console.error(error);
|
|
677
|
+
}
|
|
678
|
+
});
|
|
679
|
+
|
|
680
|
+
onBeforeUnmount(() => {
|
|
681
|
+
disposed = true;
|
|
682
|
+
map?.destroy();
|
|
683
|
+
map = null;
|
|
684
|
+
});
|
|
685
|
+
</script>
|
|
686
|
+
```
|
|
687
|
+
|
|
688
|
+
Замечания по этому паттерну:
|
|
689
|
+
|
|
690
|
+
- Импорт `mahal_map` внутри `onMounted` обязателен в SSR-окружении: пакет работает с `window`/`document`.
|
|
691
|
+
- `ClientOnly` (Nuxt) или эквивалент нужен по той же причине.
|
|
692
|
+
- Для карты с `container` в виде элемента инстанс регистрируется под ключом по умолчанию `"map"`. Для нескольких карт на странице передавайте `container` строкой с разными `id`, иначе `getInstance()` вернёт не тот инстанс.
|
|
693
|
+
- `map.destroy()` снимает карту, логотип и запись из реестра инстансов.
|
|
694
|
+
- Синхронный `MahalMap.create()` в этом же коде работает без изменений — если проверка подписки не нужна, замените `await MahalMap.createAsync(...)` на `MahalMap.create(...)`.
|
|
695
|
+
|
|
696
|
+
### `MahalMap.onReady(container, callback)`
|
|
697
|
+
|
|
698
|
+
Вызывает `callback`, когда карта создана и MapLibre завершил загрузку.
|
|
699
|
+
|
|
700
|
+
```ts
|
|
701
|
+
MahalMap.onReady("map", (maplibreMap) => {
|
|
702
|
+
maplibreMap.resize();
|
|
703
|
+
});
|
|
704
|
+
```
|
|
705
|
+
|
|
706
|
+
`callback` получает нативный `Map` объект из MapLibre GL JS.
|
|
707
|
+
|
|
708
|
+
### `MahalMap.getInstance(container)`
|
|
709
|
+
|
|
710
|
+
Возвращает ранее созданный инстанс карты по ключу контейнера.
|
|
711
|
+
|
|
712
|
+
```ts
|
|
713
|
+
const map = MahalMap.getInstance("map");
|
|
714
|
+
map.setZoom(14);
|
|
715
|
+
```
|
|
716
|
+
|
|
717
|
+
Если инстанс не найден, будет выброшена ошибка.
|
|
718
|
+
|
|
719
|
+
### `MahalMap.hasInstance(container)`
|
|
720
|
+
|
|
721
|
+
Проверяет, существует ли карта с таким ключом контейнера.
|
|
722
|
+
|
|
723
|
+
```ts
|
|
724
|
+
if (MahalMap.hasInstance("map")) {
|
|
725
|
+
const map = MahalMap.getInstance("map");
|
|
726
|
+
}
|
|
727
|
+
```
|
|
728
|
+
|
|
729
|
+
### `MahalMap.removeInstance(container)`
|
|
730
|
+
|
|
731
|
+
Удаляет инстанс из внутреннего реестра и возвращает `boolean`.
|
|
732
|
+
|
|
733
|
+
```ts
|
|
734
|
+
const removed = MahalMap.removeInstance("map");
|
|
735
|
+
```
|
|
736
|
+
|
|
737
|
+
Метод удаляет только запись из реестра. Для полного удаления карты используйте `destroy()`.
|
|
738
|
+
|
|
739
|
+
### `MahalMap.setDefaultLanguage(lang)`
|
|
740
|
+
|
|
741
|
+
Задает язык по умолчанию для новых карт.
|
|
742
|
+
|
|
743
|
+
```ts
|
|
744
|
+
MahalMap.setDefaultLanguage("ru");
|
|
745
|
+
keyUtils.saveKey("YOUR_MAP_API_KEY");
|
|
746
|
+
|
|
747
|
+
const map = MahalMap.create({ container: "map" }, maplibregl);
|
|
748
|
+
```
|
|
749
|
+
|
|
750
|
+
После этого новые карты без `options.lang` будут использовать русский стандартный стиль. Для `tj` или пустого значения стандартные стили будут только с `token`.
|
|
751
|
+
|
|
752
|
+
## Методы инстанса карты
|
|
753
|
+
|
|
754
|
+
### `map.getMap()`
|
|
755
|
+
|
|
756
|
+
Возвращает нативный MapLibre `Map`.
|
|
757
|
+
|
|
758
|
+
```ts
|
|
759
|
+
const maplibreMap = map.getMap();
|
|
760
|
+
maplibreMap.resize();
|
|
761
|
+
```
|
|
762
|
+
|
|
763
|
+
Используйте этот метод, если нужна функция MapLibre, которой нет в Mahal Map SDK.
|
|
764
|
+
|
|
765
|
+
### `map.getCamera()`
|
|
766
|
+
|
|
767
|
+
Возвращает `CameraController` для управления камерой.
|
|
768
|
+
|
|
769
|
+
```ts
|
|
770
|
+
const camera = map.getCamera();
|
|
771
|
+
camera.flyTo({
|
|
772
|
+
center: [69.624024, 40.279687],
|
|
773
|
+
zoom: 14,
|
|
774
|
+
});
|
|
775
|
+
```
|
|
776
|
+
|
|
777
|
+
### `map.setStyle(theme)`
|
|
778
|
+
|
|
779
|
+
Переключает светлую/тёмную тему внутри выбранного `family`.
|
|
780
|
+
|
|
781
|
+
```ts
|
|
782
|
+
map.setStyle("dark"); // family: "navigator" → navigator-dark
|
|
783
|
+
map.setStyle("light"); // → navigator-light
|
|
784
|
+
```
|
|
785
|
+
|
|
786
|
+
Адрес стиля строит `Maps3D.styleUrl()`. После загрузки нового стиля библиотека сама зовёт `refreshLayers()` — состояние слоёв переживает смену темы.
|
|
787
|
+
|
|
788
|
+
Метод ничего не делает, если карта создана с явным `style` или `preset` (стиль зафиксирован), либо если `Maps3D` не передан — у запасного стиля вариантов по теме нет.
|
|
789
|
+
|
|
790
|
+
### `map.setLanguage(lang)`
|
|
791
|
+
|
|
792
|
+
Запоминает язык для поиска и роутинга.
|
|
793
|
+
|
|
794
|
+
```ts
|
|
795
|
+
map.setLanguage("ru");
|
|
796
|
+
map.setLanguage("tj");
|
|
797
|
+
```
|
|
798
|
+
|
|
799
|
+
Стиль метод не трогает: подписи приходят из самого стиля платформы, отдельных URL по языкам больше нет.
|
|
800
|
+
|
|
801
|
+
### `map.setCenter(center)`
|
|
802
|
+
|
|
803
|
+
Меняет центр карты.
|
|
804
|
+
|
|
805
|
+
```ts
|
|
806
|
+
map.setCenter([69.624024, 40.279687]);
|
|
807
|
+
```
|
|
808
|
+
|
|
809
|
+
Формат координат: `[lng, lat]`.
|
|
810
|
+
|
|
811
|
+
### `map.setZoom(zoom)`
|
|
812
|
+
|
|
813
|
+
Меняет zoom карты.
|
|
814
|
+
|
|
815
|
+
```ts
|
|
816
|
+
map.setZoom(13);
|
|
817
|
+
```
|
|
818
|
+
|
|
819
|
+
### `map.addMarker(marker)`
|
|
820
|
+
|
|
821
|
+
Добавляет маркер на карту.
|
|
822
|
+
|
|
823
|
+
```ts
|
|
824
|
+
import { MahalMapDefaultMarker } from "mahal_map";
|
|
825
|
+
|
|
826
|
+
const marker = new MahalMapDefaultMarker({
|
|
827
|
+
coordinates: [69.624024, 40.279687],
|
|
828
|
+
color: "#278960",
|
|
829
|
+
});
|
|
830
|
+
|
|
831
|
+
map.addMarker(marker);
|
|
832
|
+
```
|
|
833
|
+
|
|
834
|
+
Маркер должен реализовать интерфейс:
|
|
835
|
+
|
|
836
|
+
```ts
|
|
837
|
+
interface IMapMarker {
|
|
838
|
+
getElement(): HTMLElement;
|
|
839
|
+
getCoordinates(): [number, number];
|
|
840
|
+
isDraggable?(): boolean;
|
|
841
|
+
getAnchor?():
|
|
842
|
+
| "center"
|
|
843
|
+
| "top"
|
|
844
|
+
| "bottom"
|
|
845
|
+
| "left"
|
|
846
|
+
| "right"
|
|
847
|
+
| "top-left"
|
|
848
|
+
| "top-right"
|
|
849
|
+
| "bottom-left"
|
|
850
|
+
| "bottom-right";
|
|
851
|
+
}
|
|
852
|
+
```
|
|
853
|
+
|
|
854
|
+
### `map.destroy()`
|
|
855
|
+
|
|
856
|
+
Удаляет логотип SDK, вызывает `remove()` у MapLibre карты и удаляет инстанс из внутреннего реестра.
|
|
857
|
+
|
|
858
|
+
```ts
|
|
859
|
+
map.destroy();
|
|
860
|
+
```
|
|
861
|
+
|
|
862
|
+
Используйте при размонтировании страницы или компонента.
|
|
863
|
+
|
|
864
|
+
## Статические методы-обертки
|
|
865
|
+
|
|
866
|
+
Для browser SDK и случаев, когда удобнее работать с функциями, доступны статические методы:
|
|
867
|
+
|
|
868
|
+
```ts
|
|
869
|
+
MahalMap.getMap(map);
|
|
870
|
+
MahalMap.getCamera(map);
|
|
871
|
+
MahalMap.setStyle(map, "dark");
|
|
872
|
+
MahalMap.setLanguage(map, "ru");
|
|
873
|
+
MahalMap.setCenter(map, [69.624024, 40.279687]);
|
|
874
|
+
MahalMap.setZoom(map, 14);
|
|
875
|
+
MahalMap.addMarker(map, marker);
|
|
876
|
+
MahalMap.getMaps3DLayer(map);
|
|
877
|
+
MahalMap.whenMaps3DReady(map);
|
|
878
|
+
MahalMap.toggle3DBuildings(map, false);
|
|
879
|
+
|
|
880
|
+
// Реестр слоёв
|
|
881
|
+
MahalMap.setLayer(map, "terrain", true, { mode: "on" });
|
|
882
|
+
MahalMap.getLayerState(map, "terrain");
|
|
883
|
+
MahalMap.getLayers(map);
|
|
884
|
+
MahalMap.onLayers(map, (state) => console.log(state.id, state.active));
|
|
885
|
+
MahalMap.refreshLayers(map);
|
|
886
|
+
|
|
887
|
+
// Выделение зданий и клики
|
|
888
|
+
MahalMap.onBuildingClick(map, (building) => console.log(building?.id));
|
|
889
|
+
MahalMap.selectBuilding(map, 123456789);
|
|
890
|
+
MahalMap.selectedBuilding(map);
|
|
891
|
+
MahalMap.setSelectionStyle(map, { color: "#e23b2f" });
|
|
892
|
+
MahalMap.clearSelection(map);
|
|
893
|
+
MahalMap.onRoadClick(map, (road) => console.log(road?.name));
|
|
894
|
+
MahalMap.roadAt(map, { x: 320, y: 240 });
|
|
895
|
+
|
|
896
|
+
MahalMap.destroy(map);
|
|
897
|
+
```
|
|
898
|
+
|
|
899
|
+
Эти методы вызывают соответствующие методы переданного инстанса.
|
|
900
|
+
|
|
901
|
+
## Browser SDK функции
|
|
902
|
+
|
|
903
|
+
При подключении `mahal_map.sdk.js` функции доступны на глобальном объекте `MahalMap`.
|
|
904
|
+
|
|
905
|
+
```js
|
|
906
|
+
const map = MahalMap.create({
|
|
907
|
+
container: "map",
|
|
908
|
+
center: [69.624024, 40.279687],
|
|
909
|
+
zoom: 12,
|
|
910
|
+
});
|
|
911
|
+
|
|
912
|
+
MahalMap.setStyle(map, "dark");
|
|
913
|
+
MahalMap.setLanguage(map, "ru");
|
|
914
|
+
MahalMap.setZoom(map, 14);
|
|
915
|
+
```
|
|
916
|
+
|
|
917
|
+
Доступные функции карты в browser SDK:
|
|
918
|
+
|
|
919
|
+
| Функция | Описание |
|
|
920
|
+
| -------------------------------------- | ------------------------------------------------------------- |
|
|
921
|
+
| `create(options)` | Создает карту. Требует `apikey` в URL SDK скрипта. |
|
|
922
|
+
| `createAsync(options)` | Создает карту после проверки подписки JSApi (только без Maps3D). |
|
|
923
|
+
| `onReady(container, callback)` | Выполняет callback после загрузки карты. |
|
|
924
|
+
| `getInstance(container)` | Возвращает инстанс карты. |
|
|
925
|
+
| `hasInstance(container)` | Проверяет наличие инстанса. |
|
|
926
|
+
| `removeInstance(container)` | Удаляет инстанс из реестра. |
|
|
927
|
+
| `getMap(instance)` | Возвращает нативный MapLibre Map. |
|
|
928
|
+
| `getCamera(instance)` | Возвращает CameraController. |
|
|
929
|
+
| `setStyle(instance, theme)` | Переключает тему стандартного стиля. |
|
|
930
|
+
| `setLanguage(instance, lang)` | Переключает язык стандартного стиля. |
|
|
931
|
+
| `setCenter(instance, center)` | Меняет центр карты. |
|
|
932
|
+
| `setZoom(instance, zoom)` | Меняет zoom карты. |
|
|
933
|
+
| `addMarker(instance, marker)` | Добавляет маркер. |
|
|
934
|
+
| `getMaps3DLayer(instance)` | Возвращает инстанс слоя Maps3D (`undefined`, если Maps3D не передан). |
|
|
935
|
+
| `whenMaps3DReady(instance)` | Промис слоя Maps3D после `attach()` (готов `layer.buildings`). |
|
|
936
|
+
| `toggle3DBuildings(instance, enabled)` | Вкл/выкл объёмные здания на лету. |
|
|
937
|
+
| `setLayer(instance, id, on, params?)` | Включить/выключить слой платформы. |
|
|
938
|
+
| `getLayerState(instance, id)` | Снимок состояния одного слоя. |
|
|
939
|
+
| `getLayers(instance)` | Снимок всех слоёв. |
|
|
940
|
+
| `onLayers(instance, callback)` | Подписка на изменения слоёв; возвращает отписку. |
|
|
941
|
+
| `refreshLayers(instance)` | Пере-применить волю клиента ко всем слоям. |
|
|
942
|
+
| `onBuildingClick(instance, callback)` | Клик по зданию. |
|
|
943
|
+
| `selectBuilding(instance, id, style?)` | Выделить здание по `osm_id`. |
|
|
944
|
+
| `clearSelection(instance)` | Снять выделение. |
|
|
945
|
+
| `selectedBuilding(instance)` | Идентификатор выделенного здания или `null`. |
|
|
946
|
+
| `setSelectionStyle(instance, style)` | Облик выделения. |
|
|
947
|
+
| `onRoadClick(instance, callback)` | Клик по дороге. |
|
|
948
|
+
| `roadAt(instance, point, tolPx?)` | Дорога под точкой холста. |
|
|
949
|
+
| `destroy(instance)` | Полностью удаляет карту. |
|
|
950
|
+
| `loadKeyFromScriptUrl()` | Читает `apikey` из URL SDK скрипта. |
|
|
951
|
+
| `loadLanguageFromScriptUrl()` | Читает `lang` из URL SDK скрипта. |
|
|
952
|
+
|
|
953
|
+
## CameraController
|
|
954
|
+
|
|
955
|
+
`CameraController` доступен через `map.getCamera()` или `MahalMap.getCamera(map)`.
|
|
956
|
+
|
|
957
|
+
### `camera.setZoom(zoom, smooth?)`
|
|
958
|
+
|
|
959
|
+
Меняет zoom. Если `smooth` не передан, используется плавная анимация.
|
|
960
|
+
|
|
961
|
+
```ts
|
|
962
|
+
camera.setZoom(14);
|
|
963
|
+
camera.setZoom(10, false);
|
|
964
|
+
```
|
|
965
|
+
|
|
966
|
+
### `camera.setBearing(bearing, smooth?)`
|
|
967
|
+
|
|
968
|
+
Меняет поворот карты.
|
|
969
|
+
|
|
970
|
+
```ts
|
|
971
|
+
camera.setBearing(45);
|
|
972
|
+
camera.setBearing(0, false);
|
|
973
|
+
```
|
|
974
|
+
|
|
975
|
+
### `camera.setPitch(pitch, smooth?)`
|
|
976
|
+
|
|
977
|
+
Меняет наклон карты.
|
|
978
|
+
|
|
979
|
+
```ts
|
|
980
|
+
camera.setPitch(60);
|
|
981
|
+
camera.setPitch(0, false);
|
|
982
|
+
```
|
|
983
|
+
|
|
984
|
+
### `camera.toggle3D(is3D)`
|
|
985
|
+
|
|
986
|
+
Включает или выключает 3D-вид.
|
|
987
|
+
|
|
988
|
+
```ts
|
|
989
|
+
camera.toggle3D(true);
|
|
990
|
+
camera.toggle3D(false);
|
|
991
|
+
```
|
|
992
|
+
|
|
993
|
+
При включении задается `pitch: 60`, при выключении `pitch: 0` и `bearing: 0`.
|
|
994
|
+
|
|
995
|
+
### `camera.resetNorth()`
|
|
996
|
+
|
|
997
|
+
Возвращает карту на север и сбрасывает наклон.
|
|
998
|
+
|
|
999
|
+
```ts
|
|
1000
|
+
camera.resetNorth();
|
|
1001
|
+
```
|
|
1002
|
+
|
|
1003
|
+
### `camera.flyTo(options)`
|
|
1004
|
+
|
|
1005
|
+
Выполняет плавный перелет камеры. Принимает `FlyToOptions` из MapLibre GL JS.
|
|
1006
|
+
|
|
1007
|
+
```ts
|
|
1008
|
+
camera.flyTo({
|
|
1009
|
+
center: [69.624024, 40.279687],
|
|
1010
|
+
zoom: 15,
|
|
1011
|
+
});
|
|
1012
|
+
```
|
|
1013
|
+
|
|
1014
|
+
SDK добавляет стандартные значения `speed`, `curve` и `essential`, но переданные значения могут их переопределить.
|
|
1015
|
+
|
|
1016
|
+
### `camera.getPitch()`
|
|
1017
|
+
|
|
1018
|
+
Возвращает текущий наклон карты.
|
|
1019
|
+
|
|
1020
|
+
```ts
|
|
1021
|
+
const pitch = camera.getPitch();
|
|
1022
|
+
```
|
|
1023
|
+
|
|
1024
|
+
## MahalMapDefaultMarker
|
|
1025
|
+
|
|
1026
|
+
`MahalMapDefaultMarker` - готовый маркер, который можно использовать с `map.addMarker()`.
|
|
1027
|
+
|
|
1028
|
+
```ts
|
|
1029
|
+
import { MahalMapDefaultMarker } from "mahal_map";
|
|
1030
|
+
|
|
1031
|
+
const marker = new MahalMapDefaultMarker({
|
|
1032
|
+
coordinates: [69.624024, 40.279687],
|
|
1033
|
+
color: "#278960",
|
|
1034
|
+
draggable: true,
|
|
1035
|
+
anchor: "bottom",
|
|
1036
|
+
});
|
|
1037
|
+
|
|
1038
|
+
map.addMarker(marker);
|
|
1039
|
+
```
|
|
1040
|
+
|
|
1041
|
+
Параметры:
|
|
1042
|
+
|
|
1043
|
+
| Параметр | Тип | Описание |
|
|
1044
|
+
| ------------- | ------------------ | ----------------------------------------------------------------------- |
|
|
1045
|
+
| `coordinates` | `[number, number]` | Координаты маркера в формате `[lng, lat]`. |
|
|
1046
|
+
| `draggable` | `boolean` | Делает HTML-элемент маркера draggable. |
|
|
1047
|
+
| `anchor` | `string` | Anchor MapLibre маркера. |
|
|
1048
|
+
| `color` | `string` | Цвет стандартного SVG маркера или замена `fill` в пользовательском SVG. |
|
|
1049
|
+
| `svg` | `string` | Полностью пользовательский SVG. |
|
|
1050
|
+
| `innerSvg` | `string` | SVG внутри стандартного маркера. |
|
|
1051
|
+
| `innerUrl` | `string` | URL изображения внутри стандартного маркера. |
|
|
1052
|
+
|
|
1053
|
+
Методы маркера:
|
|
1054
|
+
|
|
1055
|
+
```ts
|
|
1056
|
+
marker.getElement();
|
|
1057
|
+
marker.getCoordinates();
|
|
1058
|
+
marker.isDraggable();
|
|
1059
|
+
marker.getAnchor();
|
|
1060
|
+
```
|
|
1061
|
+
|
|
1062
|
+
## Несколько карт
|
|
1063
|
+
|
|
1064
|
+
Каждая карта сохраняется по ключу `container`.
|
|
1065
|
+
|
|
1066
|
+
```ts
|
|
1067
|
+
const mainMap = MahalMap.create({ container: "main" }, maplibregl);
|
|
1068
|
+
const miniMap = MahalMap.create({ container: "mini" }, maplibregl);
|
|
1069
|
+
|
|
1070
|
+
MahalMap.getInstance("main").setZoom(14);
|
|
1071
|
+
MahalMap.getInstance("mini").setStyle("dark");
|
|
1072
|
+
```
|
|
1073
|
+
|
|
1074
|
+
Если `container` не передан, ключом будет `"map"`. Для нескольких карт всегда указывайте разные контейнеры.
|
|
1075
|
+
|
|
1076
|
+
## Пользовательский стиль
|
|
1077
|
+
|
|
1078
|
+
Можно передать любой MapLibre style URL:
|
|
1079
|
+
|
|
1080
|
+
```ts
|
|
1081
|
+
const map = MahalMap.create(
|
|
1082
|
+
{
|
|
1083
|
+
container: "map",
|
|
1084
|
+
style: "https://example.com/custom-style.json",
|
|
1085
|
+
},
|
|
1086
|
+
maplibregl,
|
|
1087
|
+
);
|
|
1088
|
+
```
|
|
1089
|
+
|
|
1090
|
+
Стиль при этом считается зафиксированным: `setStyle()` и `setLanguage()` его не подменяют.
|
|
1091
|
+
|
|
1092
|
+
С переданным `Maps3D` URL всё равно проходит через `Maps3D.mapOptions()`, поэтому `transformRequest` с ключом на месте — тайлы и шрифты платформы внутри своего стиля продолжают работать.
|
|
1093
|
+
|
|
1094
|
+
## Жизненный цикл
|
|
1095
|
+
|
|
1096
|
+
Рекомендуемый порядок работы:
|
|
1097
|
+
|
|
1098
|
+
1. Создать DOM-контейнер.
|
|
1099
|
+
2. Сохранить map token через `keyUtils.saveKey()` или передать `apikey` в URL browser SDK.
|
|
1100
|
+
3. Создать карту через `MahalMap.create()`.
|
|
1101
|
+
4. Дождаться загрузки через `MahalMap.onReady()`, если нужен доступ к загруженной MapLibre карте.
|
|
1102
|
+
5. Добавлять маркеры, менять камеру, тему или язык.
|
|
1103
|
+
6. Вызвать `destroy()` при удалении страницы или компонента.
|
|
1104
|
+
|
|
1105
|
+
```ts
|
|
1106
|
+
const map = MahalMap.create({ container: "map" }, maplibregl);
|
|
1107
|
+
|
|
1108
|
+
MahalMap.onReady("map", () => {
|
|
1109
|
+
map.setZoom(13);
|
|
1110
|
+
});
|
|
1111
|
+
|
|
1112
|
+
// При размонтировании:
|
|
1113
|
+
map.destroy();
|
|
1114
|
+
```
|
|
1115
|
+
|
|
1116
|
+
## MeasureTool (линейка и планиметр)
|
|
1117
|
+
|
|
1118
|
+
`MeasureTool` — инструмент измерения расстояния и площади прямо на карте (линейка + планиметр, как в Яндекс.Картах). Полностью самодостаточен: сам рисует точки, линии, полигон и подписи поверх MapLibre, сам обрабатывает клики/drag/удаление точек. Приложение только передает стили (цвета, иконки, подписи единиц) и слушает `onChange`.
|
|
1119
|
+
|
|
1120
|
+
```ts
|
|
1121
|
+
import { MeasureTool } from "mahal_map";
|
|
1122
|
+
|
|
1123
|
+
const map = MahalMap.getInstance("map").getMap();
|
|
1124
|
+
|
|
1125
|
+
const measureTool = new MeasureTool(map, {
|
|
1126
|
+
mode: "distance",
|
|
1127
|
+
style: {
|
|
1128
|
+
lineColor: "#278960",
|
|
1129
|
+
pointColor: "#FFFFFF",
|
|
1130
|
+
pointStrokeColor: "#278960",
|
|
1131
|
+
fillColor: "#278960",
|
|
1132
|
+
fillOpacity: 0.15,
|
|
1133
|
+
},
|
|
1134
|
+
labels: {
|
|
1135
|
+
meters: "м",
|
|
1136
|
+
kilometers: "км",
|
|
1137
|
+
squareMeters: "м²",
|
|
1138
|
+
squareKilometers: "км²",
|
|
1139
|
+
},
|
|
1140
|
+
onChange: (state) => {
|
|
1141
|
+
console.log(state.mode, state.draft, state.shapes);
|
|
1142
|
+
},
|
|
1143
|
+
onCloseRequest: () => {
|
|
1144
|
+
measureTool.stop();
|
|
1145
|
+
},
|
|
1146
|
+
});
|
|
1147
|
+
|
|
1148
|
+
measureTool.start("distance");
|
|
1149
|
+
```
|
|
1150
|
+
|
|
1151
|
+
### Важно: цвета — реальные, не CSS-переменные
|
|
1152
|
+
|
|
1153
|
+
MapLibre GL проверяет `paint`-свойства слоя и не понимает `var(--primary)` — только hex/rgb. Если в приложении цвета живут в CSS-переменных (тема light/dark), резолвьте их в реальное значение перед передачей в `style`:
|
|
1154
|
+
|
|
1155
|
+
```ts
|
|
1156
|
+
const primary =
|
|
1157
|
+
getComputedStyle(document.documentElement)
|
|
1158
|
+
.getPropertyValue("--primary")
|
|
1159
|
+
.trim() || "#278960";
|
|
1160
|
+
|
|
1161
|
+
const measureTool = new MeasureTool(map, {
|
|
1162
|
+
style: { lineColor: primary, pointStrokeColor: primary, fillColor: primary },
|
|
1163
|
+
});
|
|
1164
|
+
```
|
|
1165
|
+
|
|
1166
|
+
Значения `badgeBackground`, `badgeTextColor` и другие DOM-стили бейджа — обычный CSS, туда `var(--x)` передавать можно.
|
|
1167
|
+
|
|
1168
|
+
### Конструктор: `new MeasureTool(map, options?)`
|
|
1169
|
+
|
|
1170
|
+
| Опция | Тип | Описание |
|
|
1171
|
+
| ---------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1172
|
+
| `mode` | `"distance" \| "area"` | Режим по умолчанию. По умолчанию `"distance"`. |
|
|
1173
|
+
| `sourceIdPrefix` | `string` | Префикс id source/layer на карте. По умолчанию генерируется уникальный (`"mahal-measure-1"`, `"mahal-measure-2"`, ...) — так несколько инструментов на одной карте не конфликтуют. Задайте явно, если нужен предсказуемый id. |
|
|
1174
|
+
| `style` | `MeasureStyleOptions` | Цвета и размеры точек/линий/заливки/бейджа. |
|
|
1175
|
+
| `icons` | `MeasureIcons` | SVG-иконки `trash` / `close` / `check` для бейджей. |
|
|
1176
|
+
| `labels` | `MeasureLabels` | Подписи единиц: `meters`, `kilometers`, `squareMeters`, `squareKilometers`. |
|
|
1177
|
+
| `onChange` | `(state: MeasureState) => void` | Вызывается при любом изменении: новая точка, drag, смена режима и т.д. |
|
|
1178
|
+
| `onCloseRequest` | `() => void` | Вызывается по клику на ✕ в бейджике активной фигуры — решение "выключить инструмент" остается за приложением. |
|
|
1179
|
+
|
|
1180
|
+
### Методы
|
|
1181
|
+
|
|
1182
|
+
| Метод | Описание |
|
|
1183
|
+
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
1184
|
+
| `start(mode?)` | Включает инструмент и начинает/продолжает рисование в указанном режиме. |
|
|
1185
|
+
| `stop()` | Выключает инструмент, прячет активный бейдж. Сохраненные фигуры остаются на карте. |
|
|
1186
|
+
| `setMode(mode)` | Переключает режим. Если фигура уже рисуется — её точки сохраняются, меняется только тип (линия ⇄ полигон), как в Яндекс.Картах. |
|
|
1187
|
+
| `finishDraft()` | Завершает текущую фигуру (если валидна — от 2 точек для линии, от 3 для полигона) и начинает новую. |
|
|
1188
|
+
| `removeShape(shapeId)` | Удаляет фигуру (черновик или уже сохраненную) целиком. |
|
|
1189
|
+
| `removePoint(shapeId, pointId)` | Удаляет одну точку фигуры. |
|
|
1190
|
+
| `clearAll()` | Удаляет все фигуры и черновик. |
|
|
1191
|
+
| `getState()` | Возвращает текущий `MeasureState` (снимок, без подписки). |
|
|
1192
|
+
| `setStyleOptions(style)` | Обновляет палитру (частично, `Partial<MeasureStyleOptions>`) без пересоздания инструмента: перекрашивает существующие слои и бейджи. Нужен при смене темы карты. |
|
|
1193
|
+
| `refresh()` | Пересоздает источники/слои и перерисовывает фигуры. Инструмент делает это сам после `setStyle()`; метод оставлен как страховка. |
|
|
1194
|
+
| `destroy()` | Полностью снимает слои, обработчики и DOM-бейджи. Вызывать при размонтировании. Повторный вызов безопасен. |
|
|
1195
|
+
|
|
1196
|
+
### Смена стиля карты (тема, язык)
|
|
1197
|
+
|
|
1198
|
+
`map.setStyle()` — а значит и `mahalMap.setStyle('dark')`, и смена языка — применяется MapLibre диффом: все слои, добавленные в рантайме, удаляются как отсутствующие в новом стиле, и событие `style.load` при этом не эмитится. `MeasureTool` переживает это сам: он слушает `styledata` и восстанавливает источники/слои с теми же id, а `render()` создает недостающие слои при каждой отрисовке. Фигуры, черновик и `getState()` не меняются, лишних `onChange` не будет.
|
|
1199
|
+
|
|
1200
|
+
Хосту делать ничего не нужно — обходы вида `map.fire('style.load')` после `setStyle()` можно убирать. Цвета за темой карты не следуют автоматически: после переключения вызовите `setStyleOptions()` с новой палитрой.
|
|
1201
|
+
|
|
1202
|
+
```ts
|
|
1203
|
+
mahalMap.setStyle("dark");
|
|
1204
|
+
measureTool.setStyleOptions({
|
|
1205
|
+
lineColor: "#4ADE80",
|
|
1206
|
+
pointStrokeColor: "#4ADE80",
|
|
1207
|
+
fillColor: "#4ADE80",
|
|
1208
|
+
badgeBackground: "#19191A",
|
|
1209
|
+
badgeTextColor: "#FFFFFF",
|
|
1210
|
+
});
|
|
1211
|
+
```
|
|
1212
|
+
|
|
1213
|
+
### Взаимодействие на карте
|
|
1214
|
+
|
|
1215
|
+
- клик по карте — добавляет точку в текущую фигуру;
|
|
1216
|
+
- перетаскивание существующей точки — двигает её, расстояние/площадь пересчитываются на лету;
|
|
1217
|
+
- правый клик по точке — удаляет её;
|
|
1218
|
+
- наведение на линию/ребро полигона — показывает точку-призрак прямо под курсором; зажатие мыши вставляет в этом месте новую точку и сразу тянет её (как вставка узла в Яндекс.Картах);
|
|
1219
|
+
- бейдж активной (незавершенной) фигуры — показывает значение и три кнопки: ✓ (завершить фигуру), 🗑 (удалить), ✕ (вызывает `onCloseRequest`);
|
|
1220
|
+
- у уже сохраненных фигур — постоянный мини-бейдж: только значение и 🗑 (удалить), не пропадает при рисовании следующей фигуры.
|
|
1221
|
+
|
|
1222
|
+
### `MeasureState`
|
|
1223
|
+
|
|
1224
|
+
```ts
|
|
1225
|
+
interface MeasureState {
|
|
1226
|
+
active: boolean;
|
|
1227
|
+
mode: "distance" | "area";
|
|
1228
|
+
draft: MeasureShape | null;
|
|
1229
|
+
shapes: MeasureShape[];
|
|
1230
|
+
}
|
|
1231
|
+
|
|
1232
|
+
interface MeasureShape {
|
|
1233
|
+
id: string;
|
|
1234
|
+
mode: "distance" | "area";
|
|
1235
|
+
points: { id: string; lngLat: [number, number] }[];
|
|
1236
|
+
closed: boolean;
|
|
1237
|
+
distance: number; // метры
|
|
1238
|
+
area: number; // квадратные метры, 0 для линии
|
|
1239
|
+
}
|
|
1240
|
+
```
|
|
1241
|
+
|
|
1242
|
+
## Сервисы поиска и маршрутов
|
|
1243
|
+
|
|
1244
|
+
Сервисы работают независимо от карты: их можно вызывать без `MahalMap.create()`. Токен передаётся аргументом в каждый вызов — сохранённый через `keyUtils.saveKey()` map token для них не используется.
|
|
1245
|
+
|
|
1246
|
+
```ts
|
|
1247
|
+
import { Search, SearchPoi, SearchByLocation, CheckJSApi, Router } from "mahal_map";
|
|
1248
|
+
```
|
|
1249
|
+
|
|
1250
|
+
### `Search(text, token, additionalParam?)`
|
|
1251
|
+
|
|
1252
|
+
Поиск адресов (геокодер). Вызовы дебаунсятся на 500 мс: при вводе по символу уходит один запрос.
|
|
1253
|
+
|
|
1254
|
+
```ts
|
|
1255
|
+
const results = await Search("Рудаки 33", token, {
|
|
1256
|
+
lat: "38.5598",
|
|
1257
|
+
lng: "68.7870",
|
|
1258
|
+
limit: 10,
|
|
1259
|
+
});
|
|
1260
|
+
```
|
|
1261
|
+
|
|
1262
|
+
| Параметр | Тип | Описание |
|
|
1263
|
+
| -------- | --- | -------- |
|
|
1264
|
+
| `text` | `string` | Строка поиска. |
|
|
1265
|
+
| `token` | `string` | Токен сервиса. Обязателен, иначе `[MahalMap SDK] Search token is required`. |
|
|
1266
|
+
| `additionalParam.lat` / `.lng` | `string` | Точка для сортировки результатов по удалённости. |
|
|
1267
|
+
| `additionalParam.limit` | `number` | Максимум результатов. |
|
|
1268
|
+
| `additionalParam.type` | `string` | Фильтр по типу объекта. |
|
|
1269
|
+
|
|
1270
|
+
Возвращает `ISearchResponse[]`.
|
|
1271
|
+
|
|
1272
|
+
### `SearchPoi(text, token, additionalParam?)`
|
|
1273
|
+
|
|
1274
|
+
Поиск POI (организации, объекты). Сигнатура и дебаунс те же, что у `Search`, таймер отдельный — параллельный ввод в двух полях не перебивает запросы друг друга.
|
|
1275
|
+
|
|
1276
|
+
```ts
|
|
1277
|
+
const places = await SearchPoi("кафе", token, { lat: "38.5598", lng: "68.7870", limit: 20 });
|
|
1278
|
+
```
|
|
1279
|
+
|
|
1280
|
+
Возвращает `ISearchResponse[]`.
|
|
1281
|
+
|
|
1282
|
+
### `SearchByLocation(params)`
|
|
1283
|
+
|
|
1284
|
+
Обратный геокодинг: адреса и POI по координатам. Без дебаунса.
|
|
1285
|
+
|
|
1286
|
+
```ts
|
|
1287
|
+
const res = await SearchByLocation({
|
|
1288
|
+
lat: 38.5598,
|
|
1289
|
+
lng: 68.787,
|
|
1290
|
+
token,
|
|
1291
|
+
});
|
|
1292
|
+
```
|
|
1293
|
+
|
|
1294
|
+
| Поле | Тип | Обязательное |
|
|
1295
|
+
| ---- | --- | ------------ |
|
|
1296
|
+
| `lat` | `string \| number` | да |
|
|
1297
|
+
| `lng` | `string \| number` | да |
|
|
1298
|
+
| `token` | `string` | да |
|
|
1299
|
+
| `type` | `string` | нет |
|
|
1300
|
+
|
|
1301
|
+
### `CheckJSApi(token)`
|
|
1302
|
+
|
|
1303
|
+
Проверяет, активна ли подписка JSApi у токена.
|
|
1304
|
+
|
|
1305
|
+
```ts
|
|
1306
|
+
const { success, message } = await CheckJSApi(token);
|
|
1307
|
+
|
|
1308
|
+
if (!success) {
|
|
1309
|
+
console.warn("Подписка не активна:", message);
|
|
1310
|
+
}
|
|
1311
|
+
```
|
|
1312
|
+
|
|
1313
|
+
Промис резолвится и при отрицательном ответе — `success: false` это результат проверки, а не сбой. Исключение бросается только если вызов не дошёл до сервиса (сеть, CORS, таймаут) или токен пустой.
|
|
1314
|
+
|
|
1315
|
+
Этот же вызов используется внутри [`MahalMap.createAsync()`](#mahalmapcreateasyncoptions-maplibreobject-maps3dctor), когда `Maps3D` не передан и карта поднимается на запасном стиле.
|
|
1316
|
+
|
|
1317
|
+
### `Router(points, typeData, token)`
|
|
1318
|
+
|
|
1319
|
+
Маршрут между точками.
|
|
1320
|
+
|
|
1321
|
+
```ts
|
|
1322
|
+
const routes = await Router(
|
|
1323
|
+
[
|
|
1324
|
+
[68.787, 38.5598],
|
|
1325
|
+
[68.809, 38.561],
|
|
1326
|
+
],
|
|
1327
|
+
"geojson",
|
|
1328
|
+
token,
|
|
1329
|
+
);
|
|
1330
|
+
```
|
|
1331
|
+
|
|
1332
|
+
| Параметр | Тип | Описание |
|
|
1333
|
+
| -------- | --- | -------- |
|
|
1334
|
+
| `points` | `number[][]` | Точки в формате `[lng, lat]`. |
|
|
1335
|
+
| `typeData` | `string` | `"geojson"` — декодирует polyline в массив координат. Другое значение оставляет `geometry` строкой polyline. |
|
|
1336
|
+
| `token` | `string` | Токен сервиса. |
|
|
1337
|
+
|
|
1338
|
+
Возвращает `IRoute[]`.
|
|
1339
|
+
|
|
1340
|
+
## License
|
|
1341
|
+
|
|
1342
|
+
ISC
|