@mapgis/webclient-mapboxgl-plugin 17.2.8 → 17.2.10

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.
@@ -0,0 +1,4299 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+
6
+ <meta charset="utf-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1">
8
+ <title>Client for JavaScript MapView</title>
9
+ <!--[if lt IE 9]>
10
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11
+ <![endif]-->
12
+ <link type="text/css" rel="stylesheet" href="styles/app.min.css">
13
+ <link type="text/css" rel="stylesheet" href="styles/iframe.css">
14
+ <link type="text/css" rel="stylesheet" href="">
15
+
16
+
17
+ </head>
18
+
19
+
20
+
21
+ <body class="layout small-header">
22
+ <div id="stickyNavbarOverlay"></div>
23
+
24
+
25
+ <div class="top-nav">
26
+ <div class="inner">
27
+ <a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
28
+ <span aria-hidden="true"></span>
29
+ <span aria-hidden="true"></span>
30
+ <span aria-hidden="true"></span>
31
+ </a>
32
+ <div class="logo">
33
+
34
+ <h1> MapGIS Client for JavaScript API</h1>
35
+
36
+
37
+ </div>
38
+ <div class="menu">
39
+
40
+ <div class="navigation">
41
+
42
+
43
+ <a
44
+ class="link user-link "
45
+ href="/static/modules/common/api/common-mapgis/index.html"
46
+ >
47
+ Common
48
+ </a>
49
+
50
+ <a
51
+ class="link user-link "
52
+ href="/static/modules/cesium/api/cesium-mapgis/index.html"
53
+ >
54
+ Cesium-Plugin
55
+ </a>
56
+
57
+ <a
58
+ class="link user-link "
59
+ href="/static/modules/mapboxgl/api/mapboxgl-mapgis/index.html"
60
+ >
61
+ MapboxGL-Plugin
62
+ </a>
63
+
64
+ <a
65
+ class="link user-link "
66
+ href="/static/modules/leaflet/api/leaflet-mapgis/index.html"
67
+ >
68
+ Leaflet-Plugin
69
+ </a>
70
+
71
+ <a
72
+ class="link user-link "
73
+ href="/static/modules/openlayers/api/openLayers-mapgis/index.html"
74
+ >
75
+ OpenLayers-Plugin
76
+ </a>
77
+
78
+ <a
79
+ class="link user-link "
80
+ href="/static/modules/video/api/video-mapgis/index.html"
81
+ >
82
+ Video-Plugin
83
+ </a>
84
+
85
+
86
+
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <div id="main">
93
+ <div
94
+ class="sidebar "
95
+ id="sidebarNav"
96
+ >
97
+ <div>
98
+ <span class="mapgis-api-document-span"><a href="index.html">API文档</a></span>
99
+ </div>
100
+
101
+ <div class="search-wrapper">
102
+ <input id="search" type="text" placeholder="搜索文档..." class="input">
103
+ </div>
104
+
105
+ <nav>
106
+
107
+ <div class="category"><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">视图模块</div><ul class="mapgis-sidebar-menus"><li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" title="MapView"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MapView.html">MapView</a><span style="display: none;"><p>二维场景视图(mapboxgl引擎),对地图引擎进行管理,如果要对地图图层进行管理请参考<code>Map</code>,<br/>
108
+ 继承自<a href='http://webclient.smaryun.com/static/modules/common/api/common-mapgis/MapView.html' target='_blank'>zondy.MapView</a><br/>
109
+ 参考示例:
110
+ <a href='#MapView'>[初始化二维场景视图]</a>
111
+ <br>[ES5引入方式]:<br/>
112
+ zondy.mapboxgl.MapView() <br/>
113
+ [ES6引入方式]:<br/>
114
+ import { MapView } from '@mapgis/webclient-mapboxgl-plugin' <br/></p></span></li><li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" title="Popup"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Popup.html">Popup</a><span style="display: none;"><p>二维场景信息弹窗(mapboxgl引擎)
115
+ 参考示例:
116
+ <a href='#MapView'>[初始化二维场景视图]</a>
117
+ [ES6引入方式]:<br/>
118
+ import { Popup } from '@mapgis/webclient-mapboxgl-plugin' <br/>
119
+ 自定义样式说明:<br/>
120
+ zondy-popup__content 弹窗容器样式<br/>
121
+ zondy-popup__tip 弹窗对话框箭头样式<br/>
122
+ zondy-popup__header 弹窗头部样式<br/>
123
+ zondy-popup__content 弹窗主体样式<br/>
124
+ zondy-popup__footer 弹窗底部样式<br/></p></span></li><li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" title="Screenshot"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Screenshot.html">Screenshot</a><span style="display: none;"><p>打印工具</p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">草图编辑模块</div><ul class="mapgis-sidebar-menus"><li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" title="SketchEditor"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchEditor.html">SketchEditor</a><span style="display: none;"><p>二维Mapboxgl引擎草图编辑类<br/>
125
+ 继承自<a href='http://webclient.smaryun.com/static/modules/common/api/common-mapgis/SketchEditor.html' target='_blank'>zondy.SketchEditor</a><br/>
126
+ <br>[ES5引入方式]:<br/>
127
+ const { SketchEditor } = zondy.mapboxgl.tool.sketch <br/>
128
+ [ES6引入方式]:<br/>
129
+ import { SketchEditor } from &quot;@mapgis/webclient-leaflet-plugin&quot; <br/></p></span></li></ul></div>
130
+
131
+ </nav>
132
+ </div>
133
+ <div class="core" id="main-content-wrapper">
134
+ <div class="content">
135
+ <header id="page-title" class="page-title">
136
+ <span class="page-title-main">类名</span>
137
+ <span class="page-title-sub">MapView</span>
138
+ </header>
139
+
140
+
141
+
142
+
143
+
144
+ <section>
145
+
146
+ <article>
147
+ <div class="container-overview">
148
+
149
+
150
+ <div class='vertical-section'>
151
+ <div class="members">
152
+ <div class="member">
153
+
154
+
155
+
156
+
157
+ <h4 class="name" id="MapView">
158
+ <a class="href-link" href="#MapView">#</a>
159
+
160
+ <span class="code-name" style="font-size:30px">
161
+
162
+ new MapView<span class="signature">(options)</span>
163
+
164
+ </span>
165
+ </h4>
166
+
167
+
168
+
169
+ <div class="description">
170
+ <p>二维场景视图(mapboxgl引擎),对地图引擎进行管理,如果要对地图图层进行管理请参考<code>Map</code>,<br/>
171
+ 继承自<a href='http://webclient.smaryun.com/static/modules/common/api/common-mapgis/MapView.html' target='_blank'>zondy.MapView</a><br/>
172
+ 参考示例:
173
+ <a href='#MapView'>[初始化二维场景视图]</a>
174
+ <br>[ES5引入方式]:<br/>
175
+ zondy.mapboxgl.MapView() <br/>
176
+ [ES6引入方式]:<br/>
177
+ import { MapView } from '@mapgis/webclient-mapboxgl-plugin' <br/></p>
178
+ </div>
179
+
180
+
181
+
182
+
183
+
184
+
185
+
186
+
187
+
188
+
189
+ <h4>参数:</h4>
190
+
191
+ <div class="table-container">
192
+ <table class="params table">
193
+ <thead>
194
+ <tr>
195
+
196
+ <th>名称</th>
197
+
198
+
199
+ <th>类型</th>
200
+
201
+
202
+ <th style="min-width: 100px;">默认值</th>
203
+
204
+
205
+ <th class="last">描述</th>
206
+ </tr>
207
+ </thead>
208
+
209
+ <tbody>
210
+
211
+
212
+
213
+ <tr class="deep-level-0">
214
+
215
+ <td class="name"><code>options</code></td>
216
+
217
+
218
+ <td class="type">
219
+
220
+
221
+ <span class="param-type">Object</span>
222
+
223
+
224
+
225
+ </td>
226
+
227
+
228
+ <td class="default">
229
+
230
+ </td>
231
+
232
+
233
+ <td class="description last"><p>构造参数</p></td>
234
+ </tr>
235
+
236
+
237
+
238
+
239
+ <tr class="deep-level-1">
240
+
241
+ <td class="name"><code>map</code></td>
242
+
243
+
244
+ <td class="type">
245
+
246
+
247
+ <span class="param-type">Map</span>
248
+
249
+
250
+
251
+ </td>
252
+
253
+
254
+ <td class="default">
255
+
256
+ </td>
257
+
258
+
259
+ <td class="description last"><p>图层管理容器对象</p></td>
260
+ </tr>
261
+
262
+
263
+
264
+
265
+ <tr class="deep-level-1">
266
+
267
+ <td class="name"><code>viewId</code></td>
268
+
269
+
270
+ <td class="type">
271
+
272
+
273
+ <span class="param-type">String</span>
274
+
275
+
276
+
277
+ </td>
278
+
279
+
280
+ <td class="default">
281
+
282
+ </td>
283
+
284
+
285
+ <td class="description last"><p>二维场景视图的容器(html的div标签)ID</p></td>
286
+ </tr>
287
+
288
+
289
+
290
+
291
+ <tr class="deep-level-1">
292
+
293
+ <td class="name"><code>zoom</code></td>
294
+
295
+
296
+ <td class="type">
297
+
298
+
299
+ <span class="param-type">Number</span>
300
+
301
+
302
+
303
+ </td>
304
+
305
+
306
+ <td class="default">
307
+
308
+ 0
309
+
310
+ </td>
311
+
312
+
313
+ <td class="description last"><p>初始化二维场景视图时显示级数</p></td>
314
+ </tr>
315
+
316
+
317
+
318
+
319
+ <tr class="deep-level-1">
320
+
321
+ <td class="name"><code>center</code></td>
322
+
323
+
324
+ <td class="type">
325
+
326
+
327
+ <span class="param-type">Point</span>
328
+
329
+
330
+
331
+ </td>
332
+
333
+
334
+ <td class="default">
335
+
336
+ </td>
337
+
338
+
339
+ <td class="description last"><p>地图视图中心点</p></td>
340
+ </tr>
341
+
342
+
343
+
344
+
345
+ <tr class="deep-level-1">
346
+
347
+ <td class="name"><code>extent</code></td>
348
+
349
+
350
+ <td class="type">
351
+
352
+
353
+ <span class="param-type">Extent</span>
354
+
355
+
356
+
357
+ </td>
358
+
359
+
360
+ <td class="default">
361
+
362
+ </td>
363
+
364
+
365
+ <td class="description last"><p>地图视图可视范围</p></td>
366
+ </tr>
367
+
368
+
369
+
370
+
371
+ <tr class="deep-level-1">
372
+
373
+ <td class="name"><code>scale</code></td>
374
+
375
+
376
+ <td class="type">
377
+
378
+
379
+ <span class="param-type">Number</span>
380
+
381
+
382
+
383
+ </td>
384
+
385
+
386
+ <td class="default">
387
+
388
+ </td>
389
+
390
+
391
+ <td class="description last"><p>地图视图比例尺(比例尺的分母)</p></td>
392
+ </tr>
393
+
394
+
395
+
396
+
397
+ <tr class="deep-level-1">
398
+
399
+ <td class="name"><code>maxScale</code></td>
400
+
401
+
402
+ <td class="type">
403
+
404
+
405
+ <span class="param-type">Number</span>
406
+
407
+
408
+
409
+ </td>
410
+
411
+
412
+ <td class="default">
413
+
414
+ </td>
415
+
416
+
417
+ <td class="description last"><p>地图视图的最大比例尺(比例尺的分母,该值越小,比例尺越大)。视图的当前比列尺不会大于地图视图的最大比例尺。默认值为undefined,undefined表示用户未设置,视图的最大比例尺不受限制。maxScale的值应该始终小于minScale的值。</p></td>
418
+ </tr>
419
+
420
+
421
+
422
+
423
+ <tr class="deep-level-1">
424
+
425
+ <td class="name"><code>minScale</code></td>
426
+
427
+
428
+ <td class="type">
429
+
430
+
431
+ <span class="param-type">Number</span>
432
+
433
+
434
+
435
+ </td>
436
+
437
+
438
+ <td class="default">
439
+
440
+ </td>
441
+
442
+
443
+ <td class="description last"><p>地图视图的最小比例尺(比例尺的分母,该值越大,比例尺越小)。视图的当前比列尺不会小于地图视图的最小比例尺。默认值为undefined,undefined表示用户未设置,地图视图会根据全图范围,计算视图的最小比例尺。如果用户设置了该值,则地图将直接采用用户设置的值。minScale的值应该始终大于maxScale的值。</p></td>
444
+ </tr>
445
+
446
+
447
+
448
+
449
+ <tr class="deep-level-1">
450
+
451
+ <td class="name"><code>popup</code></td>
452
+
453
+
454
+ <td class="type">
455
+
456
+
457
+ <span class="param-type">Object</span>
458
+
459
+
460
+
461
+ </td>
462
+
463
+
464
+ <td class="default">
465
+
466
+ </td>
467
+
468
+
469
+ <td class="description last"><p>地图弹框</p></td>
470
+ </tr>
471
+
472
+
473
+
474
+
475
+
476
+
477
+
478
+ </tbody>
479
+ </table>
480
+ </div>
481
+
482
+
483
+
484
+
485
+
486
+
487
+ <dl class="details">
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
+ </dl>
520
+
521
+
522
+
523
+
524
+
525
+ <div class="method-parameter columns">
526
+ <div class="column is-2"><label>绑定事件:</label></div>
527
+ <div class="column is-10">
528
+ <ul>
529
+ <li>BaseView#event:地图视图加载完毕事件</li>
530
+
531
+ <li>BaseView#event:鼠标点击事件</li>
532
+
533
+ <li>BaseView#event:鼠标双击事件</li>
534
+
535
+ <li>BaseView#event:鼠标按下事件</li>
536
+
537
+ <li>BaseView#event:鼠标抬起事件</li>
538
+
539
+ <li>BaseView#event:鼠标右键点击事件</li>
540
+
541
+ <li>BaseView#event:鼠标移动事件</li>
542
+
543
+ <li>BaseView#event:鼠标移出视图事件</li>
544
+
545
+ <li>BaseView#event:鼠标移入视图事件</li>
546
+
547
+ <li>BaseView#event:zoom变化事件</li>
548
+
549
+ <li>BaseView#event:地图移动事件</li>
550
+
551
+ <li>BaseView#event:地图大小变化事件</li>
552
+
553
+ <li>BaseView#event:键盘输入事件</li>
554
+
555
+ <li>BaseView#event:键盘按下事件</li>
556
+
557
+ <li>BaseView#event:键盘抬起事件</li>
558
+
559
+ <li>BaseView#event:地图视图改变事件</li>
560
+ </ul>
561
+ </div>
562
+ </div>
563
+
564
+
565
+
566
+
567
+
568
+
569
+
570
+
571
+
572
+
573
+
574
+
575
+
576
+
577
+
578
+
579
+
580
+ <p class="summary"><h5>支持如下方法:</h5>
581
+ <a href='#flyTo'>[1、视点跳转]</a><br/>
582
+ <a href='#getCenter'>[2、获取当前视图的中心点]</a><br/>
583
+ <a href='#getZoom'>[3、获取当前缩放级数]</a><br/>
584
+ <a href='#getExtent'>[4、获取当前视图的地理范围]</a><br/>
585
+ <a href='#getSize'>[5、获取当前视图容器的宽高]</a><br/>
586
+ <a href='#toJSON'>[6、导出场景视图的配置文件]</a><br/>
587
+ <a href='#clone'>[7、克隆并返回一个新的场景视图对象]</a><br/>
588
+ <a href='#fromJSON'>[8、通过json构造并返回一个新的场景视图对象]</a><br/>
589
+ <a href='#takeScreenshot'>[9、屏幕快照]</a><br/>
590
+ <code>10、注册事件</code><br/>
591
+ <code>11、移除事件</code><br/>
592
+ <a href='#toMap'>[12、屏幕像素坐标点转地理坐标点]</a><br/>
593
+ <a href='#toScreen'>[13、地理坐标点转屏幕像素坐标点]</a><br/>
594
+ <a href='#hitTest'>[14、穿透检测]</a><br/>
595
+ <a href='#getLayer'>[15、根据实际图层对象查询并返回基础图层]</a><br/>
596
+ <a href='#getScale'>[16、获取当前比例尺]</a><br/></p>
597
+
598
+
599
+
600
+ <h5>示例</h5>
601
+
602
+ <p class="code-caption"><h7 id='MapView'>初始化一个二维场景视图</h7></p>
603
+
604
+
605
+ <pre class="prettyprint"><code>// ES5引入方式
606
+ const { Map } = zondy
607
+ const { MapView } = zondy.mapboxgl
608
+ // ES6引入方式
609
+ import { Map, MapView } from "@mapgis/webclient-mapboxgl-plugin"
610
+ // 初始化图层管理容器
611
+ const map = new Map();
612
+ // 初始化地图视图对象
613
+ const mapView = new MapView({
614
+ // 二维场景视图的容器(html的div标签)ID
615
+ viewId: "二维场景视图的容器的id",
616
+ // 图层管理容器
617
+ map: map
618
+ });</code></pre>
619
+
620
+
621
+
622
+
623
+ </div>
624
+ </div>
625
+ </div>
626
+
627
+
628
+ </div>
629
+
630
+
631
+ <h3 class="subsection-title">继承关系</h3>
632
+
633
+
634
+
635
+
636
+ <ul>
637
+ <li>zondy.MapViewBase</li>
638
+ </ul>
639
+
640
+
641
+
642
+
643
+
644
+
645
+
646
+
647
+
648
+
649
+
650
+
651
+
652
+
653
+
654
+ <div class='vertical-section'>
655
+ <h3 id='member'>成员变量</h3>
656
+ <div class="members">
657
+
658
+ <div class="member">
659
+
660
+ <span class="method-parameter is-pulled-right">
661
+ <label>类型:</label>
662
+
663
+ <span class="param-type">SpatialReference</span>
664
+
665
+
666
+ </span>
667
+
668
+ <h4 class="name" id="_spatialReference">
669
+ <a class="href-link" href="#_spatialReference">#</a>
670
+
671
+
672
+ <span class='tag'>readonly</span>
673
+
674
+
675
+ <span class="code-name">
676
+ _spatialReference
677
+ </span>
678
+
679
+ </h4>
680
+
681
+
682
+
683
+
684
+ <div class="description">
685
+ <p>视图空间参考系</p>
686
+ </div>
687
+
688
+
689
+
690
+
691
+
692
+ <dl class="details">
693
+
694
+
695
+
696
+
697
+
698
+
699
+
700
+
701
+
702
+
703
+
704
+
705
+
706
+
707
+
708
+
709
+
710
+
711
+
712
+
713
+
714
+
715
+
716
+
717
+
718
+
719
+
720
+
721
+
722
+
723
+
724
+ </dl>
725
+
726
+
727
+
728
+
729
+
730
+ </div>
731
+
732
+ <div class="member">
733
+
734
+ <span class="method-parameter is-pulled-right">
735
+ <label>类型:</label>
736
+
737
+ <span class="param-type">Point</span>
738
+
739
+
740
+ </span>
741
+
742
+ <h4 class="name" id="center">
743
+ <a class="href-link" href="#center">#</a>
744
+
745
+ <span class="code-name">
746
+ center
747
+ </span>
748
+
749
+ </h4>
750
+
751
+
752
+
753
+
754
+ <div class="description">
755
+ <p>地图视图中心点</p>
756
+ </div>
757
+
758
+
759
+
760
+
761
+
762
+ <dl class="details">
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
+ </dl>
795
+
796
+
797
+
798
+
799
+
800
+ </div>
801
+
802
+ <div class="member">
803
+
804
+ <span class="method-parameter is-pulled-right">
805
+ <label>类型:</label>
806
+
807
+ <span class="param-type">Object</span>
808
+
809
+
810
+ </span>
811
+
812
+ <h4 class="name" id="engineType">
813
+ <a class="href-link" href="#engineType">#</a>
814
+
815
+
816
+ <span class='tag'>readonly</span>
817
+
818
+
819
+ <span class="code-name">
820
+ engineType
821
+ </span>
822
+
823
+ </h4>
824
+
825
+
826
+
827
+
828
+ <div class="description">
829
+ <p>引擎类型,为'mapboxgl'</p>
830
+ </div>
831
+
832
+
833
+
834
+
835
+
836
+ <dl class="details">
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
+ </dl>
869
+
870
+
871
+
872
+
873
+
874
+ </div>
875
+
876
+ <div class="member">
877
+
878
+ <span class="method-parameter is-pulled-right">
879
+ <label>类型:</label>
880
+
881
+ <span class="param-type">Extent</span>
882
+
883
+
884
+ </span>
885
+
886
+ <h4 class="name" id="extent">
887
+ <a class="href-link" href="#extent">#</a>
888
+
889
+ <span class="code-name">
890
+ extent
891
+ </span>
892
+
893
+ </h4>
894
+
895
+
896
+
897
+
898
+ <div class="description">
899
+ <p>地图视图可视范围</p>
900
+ </div>
901
+
902
+
903
+
904
+
905
+
906
+ <dl class="details">
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
+ </dl>
939
+
940
+
941
+
942
+
943
+
944
+ </div>
945
+
946
+ <div class="member">
947
+
948
+ <span class="method-parameter is-pulled-right">
949
+ <label>类型:</label>
950
+
951
+ <span class="param-type">Extent</span>
952
+
953
+
954
+ </span>
955
+
956
+ <h4 class="name" id="fullExtent">
957
+ <a class="href-link" href="#fullExtent">#</a>
958
+
959
+ <span class="code-name">
960
+ fullExtent
961
+ </span>
962
+
963
+ </h4>
964
+
965
+
966
+
967
+
968
+ <div class="description">
969
+ <p>地图视图最大显示范围。用户不设置时,将地图范围作为地图视图的最大显示范围,用户设置时采用用户设置的。地图视图初始化时,会根据此范围计算地图视图的最小比例尺,当瓦片数据的最大比例尺小于此比例尺时,无法显示。在相同视图大小下,fullExtent越大,地图视图的最小比例尺越小。</p>
970
+ </div>
971
+
972
+
973
+
974
+
975
+
976
+ <dl class="details">
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
+ </dl>
1009
+
1010
+
1011
+
1012
+
1013
+
1014
+ </div>
1015
+
1016
+ <div class="member">
1017
+
1018
+ <span class="method-parameter is-pulled-right">
1019
+ <label>类型:</label>
1020
+
1021
+ <span class="param-type">Number</span>
1022
+
1023
+
1024
+ </span>
1025
+
1026
+ <h4 class="name" id="height">
1027
+ <a class="href-link" href="#height">#</a>
1028
+
1029
+
1030
+ <span class='tag'>readonly</span>
1031
+
1032
+
1033
+ <span class="code-name">
1034
+ height
1035
+ </span>
1036
+
1037
+ </h4>
1038
+
1039
+
1040
+
1041
+
1042
+ <div class="description">
1043
+ <p>地图视图高度</p>
1044
+ </div>
1045
+
1046
+
1047
+
1048
+
1049
+
1050
+ <dl class="details">
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
+ </dl>
1083
+
1084
+
1085
+
1086
+
1087
+
1088
+ </div>
1089
+
1090
+ <div class="member">
1091
+
1092
+ <span class="method-parameter is-pulled-right">
1093
+ <label>类型:</label>
1094
+
1095
+ <span class="param-type">Number</span>
1096
+
1097
+
1098
+ </span>
1099
+
1100
+ <h4 class="name" id="maxScale">
1101
+ <a class="href-link" href="#maxScale">#</a>
1102
+
1103
+ <span class="code-name">
1104
+ maxScale
1105
+ </span>
1106
+
1107
+ </h4>
1108
+
1109
+
1110
+
1111
+
1112
+ <div class="description">
1113
+ <p>地图视图最大比例尺</p>
1114
+ </div>
1115
+
1116
+
1117
+
1118
+
1119
+
1120
+ <dl class="details">
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
+ </dl>
1153
+
1154
+
1155
+
1156
+
1157
+
1158
+ </div>
1159
+
1160
+ <div class="member">
1161
+
1162
+ <span class="method-parameter is-pulled-right">
1163
+ <label>类型:</label>
1164
+
1165
+ <span class="param-type">Number</span>
1166
+
1167
+
1168
+ </span>
1169
+
1170
+ <h4 class="name" id="minScale">
1171
+ <a class="href-link" href="#minScale">#</a>
1172
+
1173
+ <span class="code-name">
1174
+ minScale
1175
+ </span>
1176
+
1177
+ </h4>
1178
+
1179
+
1180
+
1181
+
1182
+ <div class="description">
1183
+ <p>地图视图最小比例尺</p>
1184
+ </div>
1185
+
1186
+
1187
+
1188
+
1189
+
1190
+ <dl class="details">
1191
+
1192
+
1193
+
1194
+
1195
+
1196
+
1197
+
1198
+
1199
+
1200
+
1201
+
1202
+
1203
+
1204
+
1205
+
1206
+
1207
+
1208
+
1209
+
1210
+
1211
+
1212
+
1213
+
1214
+
1215
+
1216
+
1217
+
1218
+
1219
+
1220
+
1221
+
1222
+ </dl>
1223
+
1224
+
1225
+
1226
+
1227
+
1228
+ </div>
1229
+
1230
+ <div class="member">
1231
+
1232
+ <span class="method-parameter is-pulled-right">
1233
+ <label>类型:</label>
1234
+
1235
+ <span class="param-type"><a href="Popup.html">Popup</a></span>
1236
+
1237
+
1238
+ </span>
1239
+
1240
+ <h4 class="name" id="popup">
1241
+ <a class="href-link" href="#popup">#</a>
1242
+
1243
+ <span class="code-name">
1244
+ popup
1245
+ </span>
1246
+
1247
+ </h4>
1248
+
1249
+
1250
+
1251
+
1252
+ <div class="description">
1253
+ <p>地图弹框popup</p>
1254
+ </div>
1255
+
1256
+
1257
+
1258
+
1259
+
1260
+ <dl class="details">
1261
+
1262
+
1263
+
1264
+
1265
+
1266
+
1267
+
1268
+
1269
+
1270
+
1271
+
1272
+
1273
+
1274
+
1275
+
1276
+
1277
+
1278
+
1279
+
1280
+
1281
+
1282
+
1283
+
1284
+
1285
+
1286
+
1287
+
1288
+
1289
+
1290
+
1291
+
1292
+ </dl>
1293
+
1294
+
1295
+
1296
+
1297
+
1298
+ </div>
1299
+
1300
+ <div class="member">
1301
+
1302
+ <span class="method-parameter is-pulled-right">
1303
+ <label>类型:</label>
1304
+
1305
+ <span class="param-type">Number</span>
1306
+
1307
+
1308
+ </span>
1309
+
1310
+ <h4 class="name" id="scale">
1311
+ <a class="href-link" href="#scale">#</a>
1312
+
1313
+ <span class="code-name">
1314
+ scale
1315
+ </span>
1316
+
1317
+ </h4>
1318
+
1319
+
1320
+
1321
+
1322
+ <div class="description">
1323
+ <p>地图视图比例尺</p>
1324
+ </div>
1325
+
1326
+
1327
+
1328
+
1329
+
1330
+ <dl class="details">
1331
+
1332
+
1333
+
1334
+
1335
+
1336
+
1337
+
1338
+
1339
+
1340
+
1341
+
1342
+
1343
+
1344
+
1345
+
1346
+
1347
+
1348
+
1349
+
1350
+
1351
+
1352
+
1353
+
1354
+
1355
+
1356
+
1357
+
1358
+
1359
+
1360
+
1361
+
1362
+ </dl>
1363
+
1364
+
1365
+
1366
+
1367
+
1368
+ </div>
1369
+
1370
+ <div class="member">
1371
+
1372
+ <span class="method-parameter is-pulled-right">
1373
+ <label>类型:</label>
1374
+
1375
+ <span class="param-type">Boolean</span>
1376
+
1377
+
1378
+ </span>
1379
+
1380
+ <h4 class="name" id="spatialReferenceLocked">
1381
+ <a class="href-link" href="#spatialReferenceLocked">#</a>
1382
+
1383
+ <span class="code-name">
1384
+ spatialReferenceLocked
1385
+ </span>
1386
+
1387
+ </h4>
1388
+
1389
+
1390
+
1391
+
1392
+ <div class="description">
1393
+ <p>是否锁定视图空间参考系</p>
1394
+ </div>
1395
+
1396
+
1397
+
1398
+
1399
+
1400
+ <dl class="details">
1401
+
1402
+
1403
+
1404
+
1405
+
1406
+
1407
+
1408
+
1409
+
1410
+
1411
+
1412
+
1413
+
1414
+
1415
+
1416
+
1417
+
1418
+
1419
+
1420
+
1421
+
1422
+
1423
+
1424
+
1425
+
1426
+
1427
+
1428
+
1429
+
1430
+
1431
+
1432
+ </dl>
1433
+
1434
+
1435
+
1436
+
1437
+
1438
+ </div>
1439
+
1440
+ <div class="member">
1441
+
1442
+ <span class="method-parameter is-pulled-right">
1443
+ <label>类型:</label>
1444
+
1445
+ <span class="param-type">Boolean</span>
1446
+
1447
+
1448
+ </span>
1449
+
1450
+ <h4 class="name" id="stationary">
1451
+ <a class="href-link" href="#stationary">#</a>
1452
+
1453
+
1454
+ <span class='tag'>readonly</span>
1455
+
1456
+
1457
+ <span class="code-name">
1458
+ stationary
1459
+ </span>
1460
+
1461
+ </h4>
1462
+
1463
+
1464
+
1465
+
1466
+ <div class="description">
1467
+ <p>试图是否静止</p>
1468
+ </div>
1469
+
1470
+
1471
+
1472
+
1473
+
1474
+ <dl class="details">
1475
+
1476
+
1477
+
1478
+
1479
+
1480
+
1481
+
1482
+
1483
+
1484
+
1485
+
1486
+
1487
+
1488
+
1489
+
1490
+
1491
+
1492
+
1493
+
1494
+
1495
+
1496
+
1497
+
1498
+
1499
+
1500
+
1501
+
1502
+
1503
+
1504
+
1505
+
1506
+ </dl>
1507
+
1508
+
1509
+
1510
+
1511
+
1512
+ </div>
1513
+
1514
+ <div class="member">
1515
+
1516
+ <span class="method-parameter is-pulled-right">
1517
+ <label>类型:</label>
1518
+
1519
+ <span class="param-type">Number</span>
1520
+
1521
+
1522
+ </span>
1523
+
1524
+ <h4 class="name" id="width">
1525
+ <a class="href-link" href="#width">#</a>
1526
+
1527
+
1528
+ <span class='tag'>readonly</span>
1529
+
1530
+
1531
+ <span class="code-name">
1532
+ width
1533
+ </span>
1534
+
1535
+ </h4>
1536
+
1537
+
1538
+
1539
+
1540
+ <div class="description">
1541
+ <p>地图视图宽度</p>
1542
+ </div>
1543
+
1544
+
1545
+
1546
+
1547
+
1548
+ <dl class="details">
1549
+
1550
+
1551
+
1552
+
1553
+
1554
+
1555
+
1556
+
1557
+
1558
+
1559
+
1560
+
1561
+
1562
+
1563
+
1564
+
1565
+
1566
+
1567
+
1568
+
1569
+
1570
+
1571
+
1572
+
1573
+
1574
+
1575
+
1576
+
1577
+
1578
+
1579
+
1580
+ </dl>
1581
+
1582
+
1583
+
1584
+
1585
+
1586
+ </div>
1587
+
1588
+ <div class="member">
1589
+
1590
+ <span class="method-parameter is-pulled-right">
1591
+ <label>类型:</label>
1592
+
1593
+ <span class="param-type">Number</span>
1594
+
1595
+
1596
+ </span>
1597
+
1598
+ <h4 class="name" id="zoom">
1599
+ <a class="href-link" href="#zoom">#</a>
1600
+
1601
+ <span class="code-name">
1602
+ zoom
1603
+ </span>
1604
+
1605
+ </h4>
1606
+
1607
+
1608
+
1609
+
1610
+ <div class="description">
1611
+ <p>地图层级</p>
1612
+ </div>
1613
+
1614
+
1615
+
1616
+
1617
+
1618
+ <dl class="details">
1619
+
1620
+
1621
+
1622
+
1623
+
1624
+
1625
+
1626
+
1627
+
1628
+
1629
+
1630
+
1631
+
1632
+
1633
+
1634
+
1635
+
1636
+
1637
+
1638
+
1639
+
1640
+
1641
+
1642
+
1643
+
1644
+
1645
+
1646
+
1647
+
1648
+
1649
+
1650
+ </dl>
1651
+
1652
+
1653
+
1654
+
1655
+
1656
+ </div>
1657
+
1658
+ </div>
1659
+ </div>
1660
+
1661
+
1662
+
1663
+ <div class='vertical-section'>
1664
+ <h3 id='function'>方法</h3>
1665
+ <div class="members">
1666
+
1667
+ <div class="member">
1668
+
1669
+
1670
+
1671
+ <h4 class="name" id=".fromJSON">
1672
+ <a class="href-link" href="#.fromJSON">#</a>
1673
+
1674
+
1675
+ <span class='tag'>static</span>
1676
+
1677
+
1678
+ <span class="code-name" style="font-size:30px">
1679
+
1680
+ fromJSON<span class="signature">(json)</span>
1681
+
1682
+ </span>
1683
+ </h4>
1684
+
1685
+
1686
+
1687
+ <div class="description">
1688
+ <p><a id='fromJSON'></a>
1689
+ 通过一个配置生成一个场景视图对象</p>
1690
+ </div>
1691
+
1692
+
1693
+
1694
+
1695
+
1696
+
1697
+
1698
+
1699
+
1700
+
1701
+ <h4>参数:</h4>
1702
+
1703
+ <div class="table-container">
1704
+ <table class="params table">
1705
+ <thead>
1706
+ <tr>
1707
+
1708
+ <th>名称</th>
1709
+
1710
+
1711
+ <th>类型</th>
1712
+
1713
+
1714
+
1715
+ <th class="last">描述</th>
1716
+ </tr>
1717
+ </thead>
1718
+
1719
+ <tbody>
1720
+
1721
+
1722
+
1723
+ <tr class="deep-level-0">
1724
+
1725
+ <td class="name"><code>json</code></td>
1726
+
1727
+
1728
+ <td class="type">
1729
+
1730
+
1731
+ <span class="param-type">Object</span>
1732
+
1733
+
1734
+
1735
+ </td>
1736
+
1737
+
1738
+
1739
+ <td class="description last"><p>场景视图配置</p></td>
1740
+ </tr>
1741
+
1742
+
1743
+
1744
+
1745
+ </tbody>
1746
+ </table>
1747
+ </div>
1748
+
1749
+
1750
+
1751
+
1752
+
1753
+
1754
+ <dl class="details">
1755
+
1756
+
1757
+
1758
+
1759
+
1760
+
1761
+
1762
+
1763
+
1764
+
1765
+
1766
+
1767
+
1768
+
1769
+
1770
+
1771
+
1772
+
1773
+
1774
+
1775
+
1776
+
1777
+
1778
+
1779
+
1780
+
1781
+
1782
+
1783
+
1784
+
1785
+
1786
+ </dl>
1787
+
1788
+
1789
+
1790
+
1791
+
1792
+
1793
+
1794
+
1795
+
1796
+
1797
+
1798
+
1799
+
1800
+
1801
+
1802
+
1803
+
1804
+
1805
+ <div class='columns method-parameter'>
1806
+ <div class="column is-2"><label>返回值:</label></div>
1807
+ <div class="column is-10">
1808
+
1809
+
1810
+
1811
+ <div class="columns">
1812
+
1813
+
1814
+ <div class='column is-5 has-text-left'>
1815
+ <label>类型: </label>
1816
+
1817
+ <span class="param-type"><a href="MapView.html">MapView</a></span>
1818
+
1819
+
1820
+ </div>
1821
+
1822
+ </div>
1823
+
1824
+
1825
+ </div>
1826
+ </div>
1827
+
1828
+
1829
+
1830
+
1831
+
1832
+
1833
+ </div>
1834
+
1835
+ <div class="member">
1836
+
1837
+
1838
+
1839
+ <h4 class="name" id="flyTo">
1840
+ <a class="href-link" href="#flyTo">#</a>
1841
+
1842
+ <span class="code-name" style="font-size:30px">
1843
+
1844
+ flyTo<span class="signature">(options)</span>
1845
+
1846
+ </span>
1847
+ </h4>
1848
+
1849
+
1850
+
1851
+ <div class="description">
1852
+ <p>视点跳转</a></p>
1853
+ </div>
1854
+
1855
+
1856
+
1857
+
1858
+
1859
+
1860
+
1861
+
1862
+
1863
+
1864
+ <h4>参数:</h4>
1865
+
1866
+ <div class="table-container">
1867
+ <table class="params table">
1868
+ <thead>
1869
+ <tr>
1870
+
1871
+ <th>名称</th>
1872
+
1873
+
1874
+ <th>类型</th>
1875
+
1876
+
1877
+
1878
+ <th class="last">描述</th>
1879
+ </tr>
1880
+ </thead>
1881
+
1882
+ <tbody>
1883
+
1884
+
1885
+
1886
+ <tr class="deep-level-0">
1887
+
1888
+ <td class="name"><code>options</code></td>
1889
+
1890
+
1891
+ <td class="type">
1892
+
1893
+ </td>
1894
+
1895
+
1896
+
1897
+ <td class="description last"><p>跳转参数</p></td>
1898
+ </tr>
1899
+
1900
+
1901
+
1902
+
1903
+ <tr class="deep-level-1">
1904
+
1905
+ <td class="name"><code>center</code></td>
1906
+
1907
+
1908
+ <td class="type">
1909
+
1910
+
1911
+ <span class="param-type">Array</span>
1912
+
1913
+
1914
+
1915
+ </td>
1916
+
1917
+
1918
+
1919
+ <td class="description last"><p>跳转中心点</p></td>
1920
+ </tr>
1921
+
1922
+
1923
+
1924
+
1925
+ <tr class="deep-level-1">
1926
+
1927
+ <td class="name"><code>zoom</code></td>
1928
+
1929
+
1930
+ <td class="type">
1931
+
1932
+
1933
+ <span class="param-type">Number</span>
1934
+
1935
+
1936
+
1937
+ </td>
1938
+
1939
+
1940
+
1941
+ <td class="description last"><p>地图层级</p></td>
1942
+ </tr>
1943
+
1944
+
1945
+
1946
+
1947
+ <tr class="deep-level-1">
1948
+
1949
+ <td class="name"><code>extent</code></td>
1950
+
1951
+
1952
+ <td class="type">
1953
+
1954
+
1955
+ <span class="param-type">Extent</span>
1956
+
1957
+
1958
+
1959
+ </td>
1960
+
1961
+
1962
+
1963
+ <td class="description last"><p>按范围跳转</p></td>
1964
+ </tr>
1965
+
1966
+
1967
+
1968
+
1969
+
1970
+
1971
+
1972
+ </tbody>
1973
+ </table>
1974
+ </div>
1975
+
1976
+
1977
+
1978
+
1979
+
1980
+
1981
+ <dl class="details">
1982
+
1983
+
1984
+
1985
+
1986
+
1987
+
1988
+
1989
+
1990
+
1991
+
1992
+
1993
+
1994
+
1995
+
1996
+
1997
+
1998
+
1999
+
2000
+
2001
+
2002
+
2003
+
2004
+
2005
+
2006
+
2007
+
2008
+
2009
+
2010
+
2011
+
2012
+
2013
+ </dl>
2014
+
2015
+
2016
+
2017
+
2018
+
2019
+
2020
+
2021
+
2022
+
2023
+
2024
+
2025
+
2026
+
2027
+
2028
+
2029
+
2030
+
2031
+
2032
+
2033
+
2034
+
2035
+
2036
+
2037
+ <h5>示例</h5>
2038
+
2039
+ <p class="code-caption"><h7>中心点跳转示例</h7></p>
2040
+
2041
+
2042
+ <pre class="prettyprint"><code>// ES5引入方式
2043
+ const { Map } = zondy
2044
+ const { MapView } = zondy.mapboxgl
2045
+ // ES6引入方式
2046
+ import { Map, MapView } from "@mapgis/webclient-mapboxgl-plugin"
2047
+ // 初始化图层管理容器
2048
+ map = new .Map();
2049
+ // 初始化地图视图对象
2050
+ mapView = new MapView({
2051
+ // 视图id
2052
+ viewId: "view-id",
2053
+ // 图层管理容器
2054
+ map: map
2055
+ });
2056
+ // 视点跳转
2057
+ mapView.flyTo({
2058
+ // 跳转中心点
2059
+ center: [{x}, {y}],
2060
+ // 地图层级
2061
+ zoom: {zoom}
2062
+ });</code></pre>
2063
+
2064
+
2065
+ <p class="code-caption"><h7>按范围跳转示例</h7></p>
2066
+
2067
+
2068
+ <pre class="prettyprint"><code>// ES5引入方式
2069
+ const { Map } = zondy
2070
+ const { Extent } = zondy.geometry
2071
+ const { MapView } = zondy.mapboxgl
2072
+ // ES6引入方式
2073
+ import { Map, MapView, Extent } from "@mapgis/webclient-mapboxgl-plugin"
2074
+ // 初始化图层管理容器
2075
+ map = new Map();
2076
+ // 初始化地图视图对象
2077
+ mapView = new MapView({
2078
+ // 视图id
2079
+ viewId: "view-id",
2080
+ // 图层管理容器
2081
+ map: map
2082
+ });
2083
+ mapView.flyTo({
2084
+ // 范围几何
2085
+ extent: new Extent({
2086
+ "xmin":10,
2087
+ "xmax":210,
2088
+ "ymin":0,
2089
+ "ymax":100,
2090
+ })
2091
+ });</code></pre>
2092
+
2093
+
2094
+ <p class="code-caption"><h7>按范围跳转示例-拿到图层信息后跳转</h7></p>
2095
+
2096
+
2097
+ <pre class="prettyprint"><code>// ES5引入方式
2098
+ const { IGSMapImageLayer } = zondy.layer
2099
+ // ES6引入方式
2100
+ import { IGSMapImageLayer } from "@mapgis/webclient-mapboxgl-plugin"
2101
+ const igsMapImageLayer = new IGSMapImageLayer({
2102
+ url: 'http://192.168.82.89:8089/igs/rest/services/Map/Hubei4326/MapServer'
2103
+ });
2104
+ map.add(igsMapImageLayer);
2105
+ // 图层加载完毕
2106
+ igsMapImageLayer.on('layer-view-created', function (result) {
2107
+ console.log("加载完毕:", result.layer)
2108
+ //视点跳转
2109
+ mapView.flyTo({
2110
+ extent: result.layer.extent
2111
+ });
2112
+ })</code></pre>
2113
+
2114
+
2115
+
2116
+ </div>
2117
+
2118
+ <div class="member">
2119
+
2120
+
2121
+
2122
+ <h4 class="name" id="getCenter">
2123
+ <a class="href-link" href="#getCenter">#</a>
2124
+
2125
+ <span class="code-name" style="font-size:30px">
2126
+
2127
+ getCenter<span class="signature">()</span>
2128
+
2129
+ </span>
2130
+ </h4>
2131
+
2132
+
2133
+
2134
+ <div class="description">
2135
+ <p>获取当前视图的中心点(经纬度中心点)<a id='getCenter'></a></p>
2136
+ </div>
2137
+
2138
+
2139
+
2140
+
2141
+
2142
+
2143
+
2144
+
2145
+
2146
+
2147
+
2148
+
2149
+
2150
+
2151
+ <dl class="details">
2152
+
2153
+
2154
+
2155
+
2156
+
2157
+
2158
+
2159
+
2160
+
2161
+
2162
+
2163
+
2164
+
2165
+
2166
+
2167
+
2168
+
2169
+
2170
+
2171
+
2172
+
2173
+
2174
+
2175
+
2176
+
2177
+
2178
+
2179
+
2180
+
2181
+
2182
+
2183
+ </dl>
2184
+
2185
+
2186
+
2187
+
2188
+
2189
+
2190
+
2191
+
2192
+
2193
+
2194
+
2195
+
2196
+
2197
+
2198
+
2199
+
2200
+
2201
+
2202
+ <div class='columns method-parameter'>
2203
+ <div class="column is-2"><label>返回值:</label></div>
2204
+ <div class="column is-10">
2205
+
2206
+
2207
+
2208
+ <div class="columns">
2209
+
2210
+ <div class='param-desc column is-7'><p>中心点对象</p></div>
2211
+
2212
+
2213
+ <div class='column is-5 has-text-left'>
2214
+ <label>类型: </label>
2215
+
2216
+ <span class="param-type">Object</span>
2217
+
2218
+
2219
+ </div>
2220
+
2221
+ </div>
2222
+
2223
+
2224
+ </div>
2225
+ </div>
2226
+
2227
+
2228
+
2229
+
2230
+
2231
+
2232
+ </div>
2233
+
2234
+ <div class="member">
2235
+
2236
+
2237
+
2238
+ <h4 class="name" id="getExtent">
2239
+ <a class="href-link" href="#getExtent">#</a>
2240
+
2241
+ <span class="code-name" style="font-size:30px">
2242
+
2243
+ getExtent<span class="signature">()</span>
2244
+
2245
+ </span>
2246
+ </h4>
2247
+
2248
+
2249
+
2250
+ <div class="description">
2251
+ <p>获取当前视图的地理范围<a id='getExtent'></a></p>
2252
+ </div>
2253
+
2254
+
2255
+
2256
+
2257
+
2258
+
2259
+
2260
+
2261
+
2262
+
2263
+
2264
+
2265
+
2266
+
2267
+ <dl class="details">
2268
+
2269
+
2270
+
2271
+
2272
+
2273
+
2274
+
2275
+
2276
+
2277
+
2278
+
2279
+
2280
+
2281
+
2282
+
2283
+
2284
+
2285
+
2286
+
2287
+
2288
+
2289
+
2290
+
2291
+
2292
+
2293
+
2294
+
2295
+
2296
+
2297
+
2298
+
2299
+ </dl>
2300
+
2301
+
2302
+
2303
+
2304
+
2305
+
2306
+
2307
+
2308
+
2309
+
2310
+
2311
+
2312
+
2313
+
2314
+
2315
+
2316
+
2317
+
2318
+ <div class='columns method-parameter'>
2319
+ <div class="column is-2"><label>返回值:</label></div>
2320
+ <div class="column is-10">
2321
+
2322
+
2323
+
2324
+ <div class="columns">
2325
+
2326
+ <div class='param-desc column is-7'><p>获取当前视图的地理范围</p></div>
2327
+
2328
+
2329
+ <div class='column is-5 has-text-left'>
2330
+ <label>类型: </label>
2331
+
2332
+ <span class="param-type">Extent</span>
2333
+
2334
+
2335
+ </div>
2336
+
2337
+ </div>
2338
+
2339
+
2340
+ </div>
2341
+ </div>
2342
+
2343
+
2344
+
2345
+
2346
+
2347
+
2348
+ </div>
2349
+
2350
+ <div class="member">
2351
+
2352
+
2353
+
2354
+ <h4 class="name" id="getScale">
2355
+ <a class="href-link" href="#getScale">#</a>
2356
+
2357
+ <span class="code-name" style="font-size:30px">
2358
+
2359
+ getScale<span class="signature">()</span>
2360
+
2361
+ </span>
2362
+ </h4>
2363
+
2364
+
2365
+
2366
+ <div class="description">
2367
+ <p><a id='getScale'></a>
2368
+ 获取当前比例尺</p>
2369
+ </div>
2370
+
2371
+
2372
+
2373
+
2374
+
2375
+
2376
+
2377
+
2378
+
2379
+
2380
+
2381
+
2382
+
2383
+
2384
+ <dl class="details">
2385
+
2386
+
2387
+
2388
+
2389
+
2390
+
2391
+
2392
+
2393
+
2394
+
2395
+
2396
+
2397
+
2398
+
2399
+
2400
+
2401
+
2402
+
2403
+
2404
+
2405
+
2406
+
2407
+
2408
+
2409
+
2410
+
2411
+
2412
+
2413
+
2414
+
2415
+
2416
+ </dl>
2417
+
2418
+
2419
+
2420
+
2421
+
2422
+
2423
+
2424
+
2425
+
2426
+
2427
+
2428
+
2429
+
2430
+
2431
+
2432
+
2433
+
2434
+
2435
+ <div class='columns method-parameter'>
2436
+ <div class="column is-2"><label>返回值:</label></div>
2437
+ <div class="column is-10">
2438
+
2439
+
2440
+
2441
+ <div class="columns">
2442
+
2443
+ <div class='param-desc column is-7'><p>比例尺 实际10000米:地图1米</p></div>
2444
+
2445
+
2446
+ <div class='column is-5 has-text-left'>
2447
+ <label>类型: </label>
2448
+
2449
+ <span class="param-type">Number</span>
2450
+
2451
+
2452
+ </div>
2453
+
2454
+ </div>
2455
+
2456
+
2457
+ </div>
2458
+ </div>
2459
+
2460
+
2461
+
2462
+
2463
+
2464
+
2465
+ </div>
2466
+
2467
+ <div class="member">
2468
+
2469
+
2470
+
2471
+ <h4 class="name" id="getSize">
2472
+ <a class="href-link" href="#getSize">#</a>
2473
+
2474
+ <span class="code-name" style="font-size:30px">
2475
+
2476
+ getSize<span class="signature">()</span>
2477
+
2478
+ </span>
2479
+ </h4>
2480
+
2481
+
2482
+
2483
+ <div class="description">
2484
+ <p>获取当前视图容器的宽高,单位像素<a id='getSize'></a></p>
2485
+ </div>
2486
+
2487
+
2488
+
2489
+
2490
+
2491
+
2492
+
2493
+
2494
+
2495
+
2496
+
2497
+
2498
+
2499
+
2500
+ <dl class="details">
2501
+
2502
+
2503
+
2504
+
2505
+
2506
+
2507
+
2508
+
2509
+
2510
+
2511
+
2512
+
2513
+
2514
+
2515
+
2516
+
2517
+
2518
+
2519
+
2520
+
2521
+
2522
+
2523
+
2524
+
2525
+
2526
+
2527
+
2528
+
2529
+
2530
+
2531
+
2532
+ </dl>
2533
+
2534
+
2535
+
2536
+
2537
+
2538
+
2539
+
2540
+
2541
+
2542
+
2543
+
2544
+
2545
+
2546
+
2547
+
2548
+
2549
+
2550
+
2551
+ <div class='columns method-parameter'>
2552
+ <div class="column is-2"><label>返回值:</label></div>
2553
+ <div class="column is-10">
2554
+
2555
+
2556
+
2557
+ <div class="columns">
2558
+
2559
+ <div class='param-desc column is-7'><p>当前视图容器的宽高对象</p></div>
2560
+
2561
+
2562
+ <div class='column is-5 has-text-left'>
2563
+ <label>类型: </label>
2564
+
2565
+ <span class="param-type">Object</span>
2566
+
2567
+
2568
+ </div>
2569
+
2570
+ </div>
2571
+
2572
+
2573
+ </div>
2574
+ </div>
2575
+
2576
+
2577
+
2578
+
2579
+
2580
+
2581
+ </div>
2582
+
2583
+ <div class="member">
2584
+
2585
+
2586
+
2587
+ <h4 class="name" id="getZoom">
2588
+ <a class="href-link" href="#getZoom">#</a>
2589
+
2590
+ <span class="code-name" style="font-size:30px">
2591
+
2592
+ getZoom<span class="signature">()</span>
2593
+
2594
+ </span>
2595
+ </h4>
2596
+
2597
+
2598
+
2599
+ <div class="description">
2600
+ <p>获取当前缩放级数<a id='getZoom'></a></p>
2601
+ </div>
2602
+
2603
+
2604
+
2605
+
2606
+
2607
+
2608
+
2609
+
2610
+
2611
+
2612
+
2613
+
2614
+
2615
+
2616
+ <dl class="details">
2617
+
2618
+
2619
+
2620
+
2621
+
2622
+
2623
+
2624
+
2625
+
2626
+
2627
+
2628
+
2629
+
2630
+
2631
+
2632
+
2633
+
2634
+
2635
+
2636
+
2637
+
2638
+
2639
+
2640
+
2641
+
2642
+
2643
+
2644
+
2645
+
2646
+
2647
+
2648
+ </dl>
2649
+
2650
+
2651
+
2652
+
2653
+
2654
+
2655
+
2656
+
2657
+
2658
+
2659
+
2660
+
2661
+
2662
+
2663
+
2664
+
2665
+
2666
+
2667
+ <div class='columns method-parameter'>
2668
+ <div class="column is-2"><label>返回值:</label></div>
2669
+ <div class="column is-10">
2670
+
2671
+
2672
+
2673
+ <div class="columns">
2674
+
2675
+ <div class='param-desc column is-7'><p>当前缩放级数</p></div>
2676
+
2677
+
2678
+ <div class='column is-5 has-text-left'>
2679
+ <label>类型: </label>
2680
+
2681
+ <span class="param-type">Number</span>
2682
+
2683
+
2684
+ </div>
2685
+
2686
+ </div>
2687
+
2688
+
2689
+ </div>
2690
+ </div>
2691
+
2692
+
2693
+
2694
+
2695
+
2696
+
2697
+ </div>
2698
+
2699
+ <div class="member">
2700
+
2701
+
2702
+
2703
+ <h4 class="name" id="goTo">
2704
+ <a class="href-link" href="#goTo">#</a>
2705
+
2706
+ <span class="code-name" style="font-size:30px">
2707
+
2708
+ goTo<span class="signature">(goToTarget, options)</span>
2709
+
2710
+ </span>
2711
+ </h4>
2712
+
2713
+
2714
+
2715
+ <div class="description">
2716
+ <p>视点跳转为给定的目标<a id='goTo'></a></p>
2717
+ </div>
2718
+
2719
+
2720
+
2721
+
2722
+
2723
+
2724
+
2725
+
2726
+
2727
+
2728
+ <h4>参数:</h4>
2729
+
2730
+ <div class="table-container">
2731
+ <table class="params table">
2732
+ <thead>
2733
+ <tr>
2734
+
2735
+ <th>名称</th>
2736
+
2737
+
2738
+ <th>类型</th>
2739
+
2740
+
2741
+ <th style="min-width: 100px;">默认值</th>
2742
+
2743
+
2744
+ <th class="last">描述</th>
2745
+ </tr>
2746
+ </thead>
2747
+
2748
+ <tbody>
2749
+
2750
+
2751
+
2752
+ <tr class="deep-level-0">
2753
+
2754
+ <td class="name"><code>goToTarget</code></td>
2755
+
2756
+
2757
+ <td class="type">
2758
+
2759
+ </td>
2760
+
2761
+
2762
+ <td class="default">
2763
+
2764
+ </td>
2765
+
2766
+
2767
+ <td class="description last"><p>跳转参数</p></td>
2768
+ </tr>
2769
+
2770
+
2771
+
2772
+
2773
+ <tr class="deep-level-1">
2774
+
2775
+ <td class="name"><code>center</code></td>
2776
+
2777
+
2778
+ <td class="type">
2779
+
2780
+
2781
+ <span class="param-type">Point</span>
2782
+ |
2783
+
2784
+ <span class="param-type">Array</span>
2785
+
2786
+
2787
+
2788
+ </td>
2789
+
2790
+
2791
+ <td class="default">
2792
+
2793
+ </td>
2794
+
2795
+
2796
+ <td class="description last"><p>视图跳转中心点</p></td>
2797
+ </tr>
2798
+
2799
+
2800
+
2801
+
2802
+ <tr class="deep-level-1">
2803
+
2804
+ <td class="name"><code>zoom</code></td>
2805
+
2806
+
2807
+ <td class="type">
2808
+
2809
+
2810
+ <span class="param-type">Number</span>
2811
+
2812
+
2813
+
2814
+ </td>
2815
+
2816
+
2817
+ <td class="default">
2818
+
2819
+ </td>
2820
+
2821
+
2822
+ <td class="description last"><p>视图跳转层级</p></td>
2823
+ </tr>
2824
+
2825
+
2826
+
2827
+
2828
+ <tr class="deep-level-1">
2829
+
2830
+ <td class="name"><code>scale</code></td>
2831
+
2832
+
2833
+ <td class="type">
2834
+
2835
+
2836
+ <span class="param-type">Number</span>
2837
+
2838
+
2839
+
2840
+ </td>
2841
+
2842
+
2843
+ <td class="default">
2844
+
2845
+ </td>
2846
+
2847
+
2848
+ <td class="description last"><p>视图跳转比例尺</p></td>
2849
+ </tr>
2850
+
2851
+
2852
+
2853
+
2854
+ <tr class="deep-level-1">
2855
+
2856
+ <td class="name"><code>target</code></td>
2857
+
2858
+
2859
+ <td class="type">
2860
+
2861
+
2862
+ <span class="param-type">Geometry</span>
2863
+ |
2864
+
2865
+ <span class="param-type">Array.&lt;Geometry></span>
2866
+ |
2867
+
2868
+ <span class="param-type">Collection.&lt;Geometry></span>
2869
+
2870
+
2871
+
2872
+ </td>
2873
+
2874
+
2875
+ <td class="default">
2876
+
2877
+ </td>
2878
+
2879
+
2880
+ <td class="description last"><p>按范围跳转</p></td>
2881
+ </tr>
2882
+
2883
+
2884
+
2885
+
2886
+
2887
+
2888
+
2889
+
2890
+
2891
+ <tr class="deep-level-0">
2892
+
2893
+ <td class="name"><code>options</code></td>
2894
+
2895
+
2896
+ <td class="type">
2897
+
2898
+ </td>
2899
+
2900
+
2901
+ <td class="default">
2902
+
2903
+ </td>
2904
+
2905
+
2906
+ <td class="description last"><p>动画参数</p></td>
2907
+ </tr>
2908
+
2909
+
2910
+
2911
+
2912
+ <tr class="deep-level-1">
2913
+
2914
+ <td class="name"><code>animate</code></td>
2915
+
2916
+
2917
+ <td class="type">
2918
+
2919
+
2920
+ <span class="param-type">Boolean</span>
2921
+
2922
+
2923
+
2924
+ </td>
2925
+
2926
+
2927
+ <td class="default">
2928
+
2929
+ true
2930
+
2931
+ </td>
2932
+
2933
+
2934
+ <td class="description last"><p>新视图的过渡是否开启动画,默认开启动画</p></td>
2935
+ </tr>
2936
+
2937
+
2938
+
2939
+
2940
+ <tr class="deep-level-1">
2941
+
2942
+ <td class="name"><code>duration</code></td>
2943
+
2944
+
2945
+ <td class="type">
2946
+
2947
+
2948
+ <span class="param-type">Number</span>
2949
+
2950
+
2951
+
2952
+ </td>
2953
+
2954
+
2955
+ <td class="default">
2956
+
2957
+ 200
2958
+
2959
+ </td>
2960
+
2961
+
2962
+ <td class="description last"><p>动画的持续时间,以毫秒为单位,默认200毫秒</p></td>
2963
+ </tr>
2964
+
2965
+
2966
+
2967
+
2968
+
2969
+
2970
+
2971
+ </tbody>
2972
+ </table>
2973
+ </div>
2974
+
2975
+
2976
+
2977
+
2978
+
2979
+
2980
+ <dl class="details">
2981
+
2982
+
2983
+
2984
+
2985
+
2986
+
2987
+
2988
+
2989
+
2990
+
2991
+
2992
+
2993
+
2994
+
2995
+
2996
+
2997
+
2998
+
2999
+
3000
+
3001
+
3002
+
3003
+
3004
+
3005
+
3006
+
3007
+
3008
+
3009
+
3010
+
3011
+
3012
+ </dl>
3013
+
3014
+
3015
+
3016
+
3017
+
3018
+
3019
+
3020
+
3021
+
3022
+
3023
+
3024
+
3025
+
3026
+
3027
+
3028
+
3029
+
3030
+
3031
+
3032
+
3033
+
3034
+
3035
+
3036
+ <h5>示例</h5>
3037
+
3038
+ <p class="code-caption"><h7>中心点跳转示例</h7></p>
3039
+
3040
+
3041
+ <pre class="prettyprint"><code>// ES5引入方式
3042
+ const { Map } = zondy
3043
+ const { MapView } = zondy.mapboxgl
3044
+ // ES6引入方式
3045
+ import { Map } from "@mapgis/webclient-common"
3046
+ import { MapView } from "@mapgis/webclient-mapboxgl-plugin"
3047
+ // 初始化图层管理容器
3048
+ map = new .Map();
3049
+ // 初始化地图视图对象
3050
+ mapView = new MapView({
3051
+ // 视图id
3052
+ viewId: "view-id",
3053
+ // 图层管理容器
3054
+ map: map
3055
+ });
3056
+ // 视点跳转
3057
+ mapView.goTo({
3058
+ // 跳转中心点
3059
+ center: [115.47643872463577, 30.980700423496124],
3060
+ // 地图层级
3061
+ zoom: 8
3062
+ });</code></pre>
3063
+
3064
+
3065
+ <p class="code-caption"><h7>按范围跳转示例</h7></p>
3066
+
3067
+
3068
+ <pre class="prettyprint"><code>// ES5引入方式
3069
+ const { Map } = zondy
3070
+ const { Extent, Circle } = zondy.geometry
3071
+ const { MapView } = zondy.mapboxgl
3072
+ // ES6引入方式
3073
+ import { Map } from "@mapgis/webclient-common"
3074
+ import { MapView } from "@mapgis/webclient-mapboxgl-plugin"
3075
+ // 初始化图层管理容器
3076
+ map = new Map();
3077
+ // 初始化地图视图对象
3078
+ mapView = new MapView({
3079
+ // 视图id
3080
+ viewId: "view-id",
3081
+ // 图层管理容器
3082
+ map: map
3083
+ });
3084
+ const extent1 = new Extent({
3085
+ xmin: 111.88463529230717,
3086
+ ymin: 28.646934514163803,
3087
+ xmax: 116.89989408129225,
3088
+ ymax: 33.07991791253288,
3089
+ })
3090
+ const geometry2 = new Circle({
3091
+ center: [111, 29],
3092
+ radius: 100,
3093
+ radiusUnit: "kilometers",
3094
+ })
3095
+ mapView
3096
+ .goTo({
3097
+ target: [extent1, geometry2],
3098
+ })
3099
+ .then(() => {
3100
+ console.log("gotoExtent callback")
3101
+ })</code></pre>
3102
+
3103
+
3104
+
3105
+ </div>
3106
+
3107
+ <div class="member">
3108
+
3109
+
3110
+
3111
+ <h4 class="name" id="hitTest">
3112
+ <a class="href-link" href="#hitTest">#</a>
3113
+
3114
+ <span class="code-name" style="font-size:30px">
3115
+
3116
+ hitTest<span class="signature">(screenPoint)</span>
3117
+
3118
+ </span>
3119
+ </h4>
3120
+
3121
+
3122
+
3123
+ <div class="description">
3124
+ <p>穿透检测,图元拾取。目前支持graphic类型拾取结果,支持图层类型GraphicLayer,FeatureLayer。</p>
3125
+ </div>
3126
+
3127
+
3128
+
3129
+
3130
+
3131
+
3132
+
3133
+
3134
+
3135
+
3136
+ <h4>参数:</h4>
3137
+
3138
+ <div class="table-container">
3139
+ <table class="params table">
3140
+ <thead>
3141
+ <tr>
3142
+
3143
+ <th>名称</th>
3144
+
3145
+
3146
+ <th>类型</th>
3147
+
3148
+
3149
+
3150
+ <th class="last">描述</th>
3151
+ </tr>
3152
+ </thead>
3153
+
3154
+ <tbody>
3155
+
3156
+
3157
+
3158
+ <tr class="deep-level-0">
3159
+
3160
+ <td class="name"><code>screenPoint</code></td>
3161
+
3162
+
3163
+ <td class="type">
3164
+
3165
+
3166
+ <span class="param-type">Object</span>
3167
+
3168
+
3169
+
3170
+ </td>
3171
+
3172
+
3173
+
3174
+ <td class="description last"><p>屏幕像素坐标点,例如{ x: 900, y: 500 }</p></td>
3175
+ </tr>
3176
+
3177
+
3178
+
3179
+
3180
+ </tbody>
3181
+ </table>
3182
+ </div>
3183
+
3184
+
3185
+
3186
+
3187
+
3188
+
3189
+ <dl class="details">
3190
+
3191
+
3192
+
3193
+
3194
+
3195
+
3196
+
3197
+
3198
+
3199
+
3200
+
3201
+
3202
+
3203
+
3204
+
3205
+
3206
+
3207
+
3208
+
3209
+
3210
+
3211
+
3212
+
3213
+
3214
+
3215
+
3216
+
3217
+
3218
+
3219
+
3220
+
3221
+ </dl>
3222
+
3223
+
3224
+
3225
+
3226
+
3227
+
3228
+
3229
+
3230
+
3231
+
3232
+
3233
+
3234
+
3235
+
3236
+
3237
+
3238
+
3239
+
3240
+ <div class='columns method-parameter'>
3241
+ <div class="column is-2"><label>返回值:</label></div>
3242
+ <div class="column is-10">
3243
+
3244
+
3245
+
3246
+ <div class="columns">
3247
+
3248
+ <div class='param-desc column is-7'><p>图元检测结果</p></div>
3249
+
3250
+
3251
+ <div class='column is-5 has-text-left'>
3252
+ <label>类型: </label>
3253
+
3254
+ <span class="param-type">Array</span>
3255
+
3256
+
3257
+ </div>
3258
+
3259
+ </div>
3260
+
3261
+
3262
+ </div>
3263
+ </div>
3264
+
3265
+
3266
+
3267
+
3268
+
3269
+
3270
+ <h5>示例</h5>
3271
+
3272
+ <p class="code-caption"><h7>根据基础图层对象或者图层id查询并返回实际图层</h7></p>
3273
+
3274
+
3275
+ <pre class="prettyprint"><code>// ES5引入方式
3276
+ const { Map, Feature } = zondy
3277
+ const { Point, Polygon, MultiPolygon ,Extent, Circle } = zondy.geometry
3278
+ const { GraphicsLayer, IGSFeatureLayer, IGSTileLayer } = zondy.layer
3279
+ const { MapView } = zondy.mapboxgl
3280
+ // ES6引入方式
3281
+ import { MapView } from "@mapgis/webclient-mapboxgl-plugin";
3282
+ import { Map, Point, Polygon, MultiPolygon ,Extent, GraphicsLayer, Feature, Circle, IGSFeatureLayer, IGSTileLayer } from "@mapgis/webclient-common";
3283
+ // 初始化图层管理容器
3284
+ const map = new Map();
3285
+ // 初始化地图视图对象
3286
+ this.mapView = new MapView({
3287
+ // 视图id
3288
+ viewId: "mapgis-2d-viewer",
3289
+ // 图层管理容器
3290
+ map: map,
3291
+ })
3292
+ // 创建一个要素crs
3293
+ const feature = [
3294
+ new Feature({
3295
+ id: '11113',
3296
+ geometry: new Circle({
3297
+ center: [113, 35],
3298
+ radius: 10000,
3299
+ radiusUnit: 'kilometers',
3300
+ })
3301
+ }),
3302
+ new Feature({
3303
+ id: '11114',
3304
+ geometry: new Polygon({
3305
+ coordinates: [
3306
+ // 外圈
3307
+ [
3308
+ [113.0, 29.0],
3309
+ [116.0, 29.0],
3310
+ [116.0, 35.0],
3311
+ [113.0, 35.0],
3312
+ [113.0, 29.0]
3313
+ ]
3314
+ ]
3315
+ })
3316
+ }),
3317
+ new Feature({
3318
+ id: '11115',
3319
+ geometry:new MultiPolygon({
3320
+ coordinates: [
3321
+ [
3322
+ // 外圈
3323
+ [
3324
+ [112.0, 28.0],
3325
+ [115.0, 28.0],
3326
+ [115.0, 30.0],
3327
+ [112.0, 30.0],
3328
+ [112.0, 28.0]
3329
+ ],
3330
+ // 第一个内圈
3331
+ [
3332
+ [112.2, 28.2],
3333
+ [112.2, 29.8],
3334
+ [114.8, 29.8],
3335
+ [114.8, 28.2],
3336
+ [112.2, 28.2]
3337
+ ]
3338
+ ]
3339
+ ]
3340
+ })
3341
+ })
3342
+ ]
3343
+ // 初始化几何图层
3344
+ const graphicsLayer = new GraphicsLayer({
3345
+ graphics:feature
3346
+ })
3347
+ map.add(this.graphicsLayer)
3348
+ const result = this.mapView.hitTest({x:1100,y:600})</code></pre>
3349
+
3350
+
3351
+
3352
+ </div>
3353
+
3354
+ <div class="member">
3355
+
3356
+
3357
+
3358
+ <h4 class="name" id="takeScreenshot">
3359
+ <a class="href-link" href="#takeScreenshot">#</a>
3360
+
3361
+ <span class="code-name" style="font-size:30px">
3362
+
3363
+ takeScreenshot<span class="signature">(options<span class="signature-attributes">opt</span>)</span>
3364
+
3365
+ </span>
3366
+ </h4>
3367
+
3368
+
3369
+
3370
+ <div class="description">
3371
+ <p>屏幕快照</p>
3372
+ </div>
3373
+
3374
+
3375
+
3376
+
3377
+
3378
+
3379
+
3380
+
3381
+
3382
+
3383
+ <h4>参数:</h4>
3384
+
3385
+ <div class="table-container">
3386
+ <table class="params table">
3387
+ <thead>
3388
+ <tr>
3389
+
3390
+ <th>名称</th>
3391
+
3392
+
3393
+ <th>类型</th>
3394
+
3395
+
3396
+ <th style="min-width: 100px;">默认值</th>
3397
+
3398
+
3399
+ <th class="last">描述</th>
3400
+ </tr>
3401
+ </thead>
3402
+
3403
+ <tbody>
3404
+
3405
+
3406
+
3407
+ <tr class="deep-level-0">
3408
+
3409
+ <td class="name"><code>options</code></td>
3410
+
3411
+
3412
+ <td class="type">
3413
+
3414
+
3415
+ <span class="param-type">Object</span>
3416
+
3417
+
3418
+
3419
+ </td>
3420
+
3421
+
3422
+ <td class="default">
3423
+
3424
+ {}
3425
+
3426
+ </td>
3427
+
3428
+
3429
+ <td class="description last"><p>屏幕快照配置配置</p></td>
3430
+ </tr>
3431
+
3432
+
3433
+
3434
+
3435
+ <tr class="deep-level-1">
3436
+
3437
+ <td class="name"><code>format</code></td>
3438
+
3439
+
3440
+ <td class="type">
3441
+
3442
+
3443
+ <span class="param-type">PictureFormat</span>
3444
+
3445
+
3446
+
3447
+ </td>
3448
+
3449
+
3450
+ <td class="default">
3451
+
3452
+ PictureFormat.png
3453
+
3454
+ </td>
3455
+
3456
+
3457
+ <td class="description last"><p>照片格式,支持png,jpeg格式</p></td>
3458
+ </tr>
3459
+
3460
+
3461
+
3462
+
3463
+ <tr class="deep-level-1">
3464
+
3465
+ <td class="name"><code>filename</code></td>
3466
+
3467
+
3468
+ <td class="type">
3469
+
3470
+
3471
+ <span class="param-type">String</span>
3472
+
3473
+
3474
+
3475
+ </td>
3476
+
3477
+
3478
+ <td class="default">
3479
+
3480
+ 'screenshotFile'
3481
+
3482
+ </td>
3483
+
3484
+
3485
+ <td class="description last"><p>下载文件名</p></td>
3486
+ </tr>
3487
+
3488
+
3489
+
3490
+
3491
+ <tr class="deep-level-1">
3492
+
3493
+ <td class="name"><code>width</code></td>
3494
+
3495
+
3496
+ <td class="type">
3497
+
3498
+
3499
+ <span class="param-type">Number</span>
3500
+
3501
+
3502
+
3503
+ </td>
3504
+
3505
+
3506
+ <td class="default">
3507
+
3508
+ </td>
3509
+
3510
+
3511
+ <td class="description last"><p>图片宽度</p></td>
3512
+ </tr>
3513
+
3514
+
3515
+
3516
+
3517
+ <tr class="deep-level-1">
3518
+
3519
+ <td class="name"><code>height</code></td>
3520
+
3521
+
3522
+ <td class="type">
3523
+
3524
+
3525
+ <span class="param-type">Number</span>
3526
+
3527
+
3528
+
3529
+ </td>
3530
+
3531
+
3532
+ <td class="default">
3533
+
3534
+ </td>
3535
+
3536
+
3537
+ <td class="description last"><p>图片高度</p></td>
3538
+ </tr>
3539
+
3540
+
3541
+
3542
+
3543
+ <tr class="deep-level-1">
3544
+
3545
+ <td class="name"><code>x</code></td>
3546
+
3547
+
3548
+ <td class="type">
3549
+
3550
+
3551
+ <span class="param-type">Number</span>
3552
+
3553
+
3554
+
3555
+ </td>
3556
+
3557
+
3558
+ <td class="default">
3559
+
3560
+ </td>
3561
+
3562
+
3563
+ <td class="description last"><p>图片原点x</p></td>
3564
+ </tr>
3565
+
3566
+
3567
+
3568
+
3569
+ <tr class="deep-level-1">
3570
+
3571
+ <td class="name"><code>y</code></td>
3572
+
3573
+
3574
+ <td class="type">
3575
+
3576
+
3577
+ <span class="param-type">Number</span>
3578
+
3579
+
3580
+
3581
+ </td>
3582
+
3583
+
3584
+ <td class="default">
3585
+
3586
+ </td>
3587
+
3588
+
3589
+ <td class="description last"><p>图片原点y</p></td>
3590
+ </tr>
3591
+
3592
+
3593
+
3594
+
3595
+ <tr class="deep-level-1">
3596
+
3597
+ <td class="name"><code>isDownload</code></td>
3598
+
3599
+
3600
+ <td class="type">
3601
+
3602
+
3603
+ <span class="param-type">Boolean</span>
3604
+
3605
+
3606
+
3607
+ </td>
3608
+
3609
+
3610
+ <td class="default">
3611
+
3612
+ true
3613
+
3614
+ </td>
3615
+
3616
+
3617
+ <td class="description last"><p>是否下载图片</p></td>
3618
+ </tr>
3619
+
3620
+
3621
+
3622
+
3623
+
3624
+
3625
+
3626
+ </tbody>
3627
+ </table>
3628
+ </div>
3629
+
3630
+
3631
+
3632
+
3633
+
3634
+
3635
+ <dl class="details">
3636
+
3637
+
3638
+
3639
+
3640
+
3641
+
3642
+
3643
+
3644
+
3645
+
3646
+
3647
+
3648
+
3649
+
3650
+
3651
+
3652
+
3653
+
3654
+
3655
+
3656
+
3657
+
3658
+
3659
+
3660
+
3661
+
3662
+
3663
+
3664
+
3665
+
3666
+
3667
+ </dl>
3668
+
3669
+
3670
+
3671
+
3672
+
3673
+
3674
+
3675
+
3676
+
3677
+
3678
+
3679
+
3680
+
3681
+
3682
+
3683
+
3684
+
3685
+
3686
+ <div class='columns method-parameter'>
3687
+ <div class="column is-2"><label>返回值:</label></div>
3688
+ <div class="column is-10">
3689
+
3690
+
3691
+
3692
+ <div class="columns">
3693
+
3694
+ <div class='param-desc column is-7'><p>屏幕快照 {dataUrl String },且浏览器会下载图片</p></div>
3695
+
3696
+
3697
+ <div class='column is-5 has-text-left'>
3698
+ <label>类型: </label>
3699
+
3700
+ <span class="param-type">Object</span>
3701
+
3702
+
3703
+ </div>
3704
+
3705
+ </div>
3706
+
3707
+
3708
+ </div>
3709
+ </div>
3710
+
3711
+
3712
+
3713
+
3714
+
3715
+
3716
+ <h5>示例</h5>
3717
+
3718
+ <p class="code-caption"><h7>屏幕快照</h7></p>
3719
+
3720
+
3721
+ <pre class="prettyprint"><code>// ES5引入方式
3722
+ const { Map } = zondy
3723
+ const { PictureFormat } = zondy.Enum
3724
+ const { MapView } = zondy.mapboxgl
3725
+ // ES6引入方式
3726
+ import { MapView } from "@mapgis/webclient-mapboxgl-plugin"
3727
+ import { Map, PictureFormat } from "@mapgis/webclient-common"
3728
+ // 初始化图层管理容器
3729
+ const map = new Map();
3730
+ // 初始化地图视图对象
3731
+ const mapView = new MapView({
3732
+ // 二维场景视图的容器(html的div标签)ID
3733
+ viewId: "二维场景视图的容器的id",
3734
+ // 图层管理容器
3735
+ map: map
3736
+ })
3737
+ // 设置屏幕快照参数
3738
+ const screenshotOptions: {
3739
+ format: PictureFormat.png
3740
+ }
3741
+ // 开始屏幕快照
3742
+ mapView.takeScreenshot(screenshotOptions).then((result) => {
3743
+ // 获取base64格式的url字符串
3744
+ console.log("dataUrl:", result.dataUrl)
3745
+ })</code></pre>
3746
+
3747
+
3748
+
3749
+ </div>
3750
+
3751
+ <div class="member">
3752
+
3753
+
3754
+
3755
+ <h4 class="name" id="toJSON">
3756
+ <a class="href-link" href="#toJSON">#</a>
3757
+
3758
+ <span class="code-name" style="font-size:30px">
3759
+
3760
+ toJSON<span class="signature">()</span>
3761
+
3762
+ </span>
3763
+ </h4>
3764
+
3765
+
3766
+
3767
+ <div class="description">
3768
+ <p><a id='toJSON'></a>
3769
+ 导出场景视图的配置文件</p>
3770
+ </div>
3771
+
3772
+
3773
+
3774
+
3775
+
3776
+
3777
+
3778
+
3779
+
3780
+
3781
+
3782
+
3783
+
3784
+
3785
+ <dl class="details">
3786
+
3787
+
3788
+
3789
+
3790
+
3791
+
3792
+
3793
+
3794
+
3795
+
3796
+
3797
+
3798
+
3799
+
3800
+
3801
+
3802
+
3803
+
3804
+
3805
+
3806
+
3807
+
3808
+
3809
+
3810
+
3811
+
3812
+
3813
+
3814
+
3815
+
3816
+
3817
+ </dl>
3818
+
3819
+
3820
+
3821
+
3822
+
3823
+
3824
+
3825
+
3826
+
3827
+
3828
+
3829
+
3830
+
3831
+
3832
+
3833
+
3834
+
3835
+
3836
+ <div class='columns method-parameter'>
3837
+ <div class="column is-2"><label>返回值:</label></div>
3838
+ <div class="column is-10">
3839
+
3840
+
3841
+
3842
+ <div class="columns">
3843
+
3844
+ <div class='param-desc column is-7'><p>导出的配置文件</p></div>
3845
+
3846
+
3847
+ <div class='column is-5 has-text-left'>
3848
+ <label>类型: </label>
3849
+
3850
+ <span class="param-type">Object</span>
3851
+
3852
+
3853
+ </div>
3854
+
3855
+ </div>
3856
+
3857
+
3858
+ </div>
3859
+ </div>
3860
+
3861
+
3862
+
3863
+
3864
+
3865
+
3866
+ </div>
3867
+
3868
+ <div class="member">
3869
+
3870
+
3871
+
3872
+ <h4 class="name" id="toMap">
3873
+ <a class="href-link" href="#toMap">#</a>
3874
+
3875
+ <span class="code-name" style="font-size:30px">
3876
+
3877
+ toMap<span class="signature">(screenPoint)</span>
3878
+
3879
+ </span>
3880
+ </h4>
3881
+
3882
+
3883
+
3884
+ <div class="description">
3885
+ <p><a id='toMap'></a>
3886
+ 屏幕像素坐标点转地理坐标点</p>
3887
+ </div>
3888
+
3889
+
3890
+
3891
+
3892
+
3893
+
3894
+
3895
+
3896
+
3897
+
3898
+ <h4>参数:</h4>
3899
+
3900
+ <div class="table-container">
3901
+ <table class="params table">
3902
+ <thead>
3903
+ <tr>
3904
+
3905
+ <th>名称</th>
3906
+
3907
+
3908
+ <th>类型</th>
3909
+
3910
+
3911
+
3912
+ <th class="last">描述</th>
3913
+ </tr>
3914
+ </thead>
3915
+
3916
+ <tbody>
3917
+
3918
+
3919
+
3920
+ <tr class="deep-level-0">
3921
+
3922
+ <td class="name"><code>screenPoint</code></td>
3923
+
3924
+
3925
+ <td class="type">
3926
+
3927
+
3928
+ <span class="param-type">Object</span>
3929
+
3930
+
3931
+
3932
+ </td>
3933
+
3934
+
3935
+
3936
+ <td class="description last"><p>屏幕像素坐标点,例如{ x: 900, y: 500 }</p></td>
3937
+ </tr>
3938
+
3939
+
3940
+
3941
+
3942
+ </tbody>
3943
+ </table>
3944
+ </div>
3945
+
3946
+
3947
+
3948
+
3949
+
3950
+
3951
+ <dl class="details">
3952
+
3953
+
3954
+
3955
+
3956
+
3957
+
3958
+
3959
+
3960
+
3961
+
3962
+
3963
+
3964
+
3965
+
3966
+
3967
+
3968
+
3969
+
3970
+
3971
+
3972
+
3973
+
3974
+
3975
+
3976
+
3977
+
3978
+
3979
+
3980
+
3981
+
3982
+
3983
+ </dl>
3984
+
3985
+
3986
+
3987
+
3988
+
3989
+
3990
+
3991
+
3992
+
3993
+
3994
+
3995
+
3996
+
3997
+
3998
+
3999
+
4000
+
4001
+
4002
+ <div class='columns method-parameter'>
4003
+ <div class="column is-2"><label>返回值:</label></div>
4004
+ <div class="column is-10">
4005
+
4006
+
4007
+
4008
+ <div class="columns">
4009
+
4010
+ <div class='param-desc column is-7'><p>地理坐标点</p></div>
4011
+
4012
+
4013
+ <div class='column is-5 has-text-left'>
4014
+ <label>类型: </label>
4015
+
4016
+ <span class="param-type">Point</span>
4017
+
4018
+
4019
+ </div>
4020
+
4021
+ </div>
4022
+
4023
+
4024
+ </div>
4025
+ </div>
4026
+
4027
+
4028
+
4029
+
4030
+
4031
+
4032
+ <h5>示例</h5>
4033
+
4034
+ <p class="code-caption"><h5>屏幕像素坐标点转地理坐标示例</h5></p>
4035
+
4036
+
4037
+ <pre class="prettyprint"><code>// ES5引入方式
4038
+ const { Map } = zondy
4039
+ const { Point, Extent } = zondy.geometry
4040
+ const { MapView } = zondy.mapboxgl
4041
+ // ES6引入方式
4042
+ import { MapView } from "@mapgis/webclient-mapboxgl-plugin"
4043
+ import { Map, Point, Extent } from "@mapgis/webclient-common"
4044
+ // 初始化图层管理容器
4045
+ const map = new Map();
4046
+ // 初始化地图视图对象
4047
+ const mapView = new MapView({
4048
+ // 视图id
4049
+ viewId: "mapgis-2d-viewer",
4050
+ // 图层管理容器
4051
+ map: map
4052
+ });
4053
+ const screenPoint = { x: 900, y: 500 }
4054
+ mapView.toMap(screenPoint)</code></pre>
4055
+
4056
+
4057
+
4058
+ </div>
4059
+
4060
+ <div class="member">
4061
+
4062
+
4063
+
4064
+ <h4 class="name" id="toScreen">
4065
+ <a class="href-link" href="#toScreen">#</a>
4066
+
4067
+ <span class="code-name" style="font-size:30px">
4068
+
4069
+ toScreen<span class="signature">(point)</span>
4070
+
4071
+ </span>
4072
+ </h4>
4073
+
4074
+
4075
+
4076
+ <div class="description">
4077
+ <p><a id='toScreen'></a>
4078
+ 地理坐标点转屏幕像素坐标点</p>
4079
+ </div>
4080
+
4081
+
4082
+
4083
+
4084
+
4085
+
4086
+
4087
+
4088
+
4089
+
4090
+ <h4>参数:</h4>
4091
+
4092
+ <div class="table-container">
4093
+ <table class="params table">
4094
+ <thead>
4095
+ <tr>
4096
+
4097
+ <th>名称</th>
4098
+
4099
+
4100
+ <th>类型</th>
4101
+
4102
+
4103
+
4104
+ <th class="last">描述</th>
4105
+ </tr>
4106
+ </thead>
4107
+
4108
+ <tbody>
4109
+
4110
+
4111
+
4112
+ <tr class="deep-level-0">
4113
+
4114
+ <td class="name"><code>point</code></td>
4115
+
4116
+
4117
+ <td class="type">
4118
+
4119
+
4120
+ <span class="param-type">Point</span>
4121
+
4122
+
4123
+
4124
+ </td>
4125
+
4126
+
4127
+
4128
+ <td class="description last"><p>地理坐标点</p></td>
4129
+ </tr>
4130
+
4131
+
4132
+
4133
+
4134
+ </tbody>
4135
+ </table>
4136
+ </div>
4137
+
4138
+
4139
+
4140
+
4141
+
4142
+
4143
+ <dl class="details">
4144
+
4145
+
4146
+
4147
+
4148
+
4149
+
4150
+
4151
+
4152
+
4153
+
4154
+
4155
+
4156
+
4157
+
4158
+
4159
+
4160
+
4161
+
4162
+
4163
+
4164
+
4165
+
4166
+
4167
+
4168
+
4169
+
4170
+
4171
+
4172
+
4173
+
4174
+
4175
+ </dl>
4176
+
4177
+
4178
+
4179
+
4180
+
4181
+
4182
+
4183
+
4184
+
4185
+
4186
+
4187
+
4188
+
4189
+
4190
+
4191
+
4192
+
4193
+
4194
+ <div class='columns method-parameter'>
4195
+ <div class="column is-2"><label>返回值:</label></div>
4196
+ <div class="column is-10">
4197
+
4198
+
4199
+
4200
+ <div class="columns">
4201
+
4202
+ <div class='param-desc column is-7'><p>屏幕像素坐标点</p></div>
4203
+
4204
+
4205
+ <div class='column is-5 has-text-left'>
4206
+ <label>类型: </label>
4207
+
4208
+ <span class="param-type">Object</span>
4209
+
4210
+
4211
+ </div>
4212
+
4213
+ </div>
4214
+
4215
+
4216
+ </div>
4217
+ </div>
4218
+
4219
+
4220
+
4221
+
4222
+
4223
+
4224
+ <h5>示例</h5>
4225
+
4226
+ <p class="code-caption"><h5>地理坐标点转屏幕像素坐标示例</h5></p>
4227
+
4228
+
4229
+ <pre class="prettyprint"><code>// ES5引入方式
4230
+ const { Map } = zondy
4231
+ const { Point, Extent } = zondy.geometry
4232
+ const { MapView } = zondy.mapboxgl
4233
+ // ES6引入方式
4234
+ import { MapView } from "@mapgis/webclient-mapboxgl-plugin"
4235
+ import { Map, Point, Extent } from "@mapgis/webclient-common"
4236
+ // 初始化图层管理容器
4237
+ const map = new Map();
4238
+ // 初始化地图视图对象
4239
+ const mapView = new MapView({
4240
+ // 视图id
4241
+ viewId: "mapgis-2d-viewer",
4242
+ // 图层管理容器
4243
+ map: map
4244
+ });
4245
+ const geoPoint = new Point({ coordinates: [123, 23, 0] })
4246
+ mapView.toScreen(geoPoint)</code></pre>
4247
+
4248
+
4249
+
4250
+ </div>
4251
+
4252
+ </div>
4253
+ </div>
4254
+
4255
+
4256
+
4257
+
4258
+
4259
+ </article>
4260
+
4261
+ </section>
4262
+
4263
+
4264
+
4265
+
4266
+ </div>
4267
+
4268
+ <footer class="footer">
4269
+ <div class="content has-text-centered">
4270
+ <p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
4271
+ <p class="sidebar-created-by">
4272
+ <a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
4273
+ <a href="http://webclient.smaryun.com:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
4274
+ </p>
4275
+ </div>
4276
+ </footer>
4277
+
4278
+ </div>
4279
+ <div id="side-nav" class="side-nav">
4280
+ <div style="margin-bottom: 10px;">
4281
+ <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
4282
+ </div>
4283
+ <div style="margin-bottom: 10px;">
4284
+ <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
4285
+ </div>
4286
+ <div style="margin-bottom: 10px;">
4287
+ <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
4288
+ </div>
4289
+ <div>
4290
+ <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
4291
+ </div>
4292
+ </div>
4293
+ </div>
4294
+ <script src="scripts/linenumber.js"> </script>
4295
+
4296
+ <script src="scripts/search.js"> </script>
4297
+
4298
+ </body>
4299
+ </html>