@mapgis/webclient-mapboxgl-plugin 17.0.6 → 17.2.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.
Files changed (48) hide show
  1. package/README.md +11 -35
  2. package/dist/es5/webclient-common.min.js +15 -4
  3. package/dist/es5/webclient-mapboxgl-plugin.min.js +1 -1
  4. package/dist/webclient-mapboxgl-plugin-es6.min.js +1 -1
  5. package/documention/MapViewMapboxgl.html +1233 -8
  6. package/documention/Popup.html +3 -3
  7. package/documention/Screenshot.html +0 -11
  8. package/documention/SketchEditorMapboxgl.html +31 -2
  9. package/documention/index.html +4 -4
  10. package/documention/scripts/sideBar.js +16 -2
  11. package/package.json +3 -4
  12. package/documention/document_ArcGISVectorTileLayerView.js.html +0 -265
  13. package/documention/document_EchartsLayerView.js.html +0 -246
  14. package/documention/document_GraphicsLayerView.js.html +0 -314
  15. package/documention/document_IGSFeatureLayerView.js.html +0 -218
  16. package/documention/document_IGSMapImageLayerView.js.html +0 -240
  17. package/documention/document_IGSTileLayerView.js.html +0 -236
  18. package/documention/document_IGSVectorTileLayerView.js.html +0 -264
  19. package/documention/document_MapVLayerView.js.html +0 -247
  20. package/documention/document_WMSLayerView.js.html +0 -240
  21. package/documention/document_WMTSLayerView.js.html +0 -234
  22. package/documention/document_WebTileLayerView.js.html +0 -240
  23. package/documention/document_support_FeatureRenderView.js.html +0 -682
  24. package/documention/document_support_MapboxglGraphicsLayer.js.html +0 -1184
  25. package/documention/document_support_SourceMetaData.js.html +0 -223
  26. package/documention/document_support_Utils.js.html +0 -624
  27. package/documention/document_support_mapbox_mapboxCustomUtil.js.html +0 -322
  28. package/documention/sketchEditor_SketchEditorMapboxgl.js.html +0 -875
  29. package/documention/util_ConvertRendererToStyleLayerUtil.js.html +0 -844
  30. package/documention/util_MapboxglFeatureRender.js.html +0 -225
  31. package/documention/util_MapboxglPlugin.js.html +0 -284
  32. package/documention/view_MapViewMapboxgl.js.html +0 -1882
  33. package/documention/view_utils_ArcGISVectorTileLayerUtil.js.html +0 -382
  34. package/documention/view_utils_EchartsLayerUtil.js.html +0 -194
  35. package/documention/view_utils_IGSMapImageUtil.js.html +0 -373
  36. package/documention/view_utils_IGSTileLayerUtil.js.html +0 -285
  37. package/documention/view_utils_IGSVectorTileLayerUtil.js.html +0 -379
  38. package/documention/view_utils_MapVLayerUtil.js.html +0 -197
  39. package/documention/view_utils_Popup.js.html +0 -525
  40. package/documention/view_utils_Screenshot.js.html +0 -320
  41. package/documention/view_utils_WMSLayerUtil.js.html +0 -337
  42. package/documention/view_utils_WMTSLayerUtil.js.html +0 -331
  43. package/documention/view_utils_WebTileLayerUtil.js.html +0 -284
  44. package/documention/view_utils_echarts_EchartsLayerPlugin.js.html +0 -419
  45. package/documention/view_utils_mapV_MapVLayerPlugin.js.html +0 -527
  46. package/documention/view_utils_mapV_MapvBaseLayer.js.html +0 -477
  47. package/documention/view_utils_support_rasterLayerUtil.js.html +0 -244
  48. package/documention/view_utils_support_vectorLayerUtil.js.html +0 -503
@@ -1,1882 +0,0 @@
1
-
2
-
3
- <!DOCTYPE html>
4
- <html lang="en">
5
-
6
- <head>
7
-
8
- <meta charset="utf-8">
9
- <meta name="viewport" content="width=device-width, initial-scale=1">
10
- <title>Client for JavaScript view/MapViewMapboxgl.js</title>
11
- <!--[if lt IE 9]>
12
- <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
13
- <![endif]-->
14
- <link type="text/css" rel="stylesheet" href="styles/app.min.css">
15
- <link type="text/css" rel="stylesheet" href="styles/iframe.css">
16
- <link type="text/css" rel="stylesheet" href="">
17
-
18
-
19
- </head>
20
-
21
-
22
-
23
- <body class="layout small-header">
24
- <div id="stickyNavbarOverlay"></div>
25
-
26
-
27
- <div class="top-nav">
28
- <div class="inner">
29
- <a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
30
- <span aria-hidden="true"></span>
31
- <span aria-hidden="true"></span>
32
- <span aria-hidden="true"></span>
33
- </a>
34
- <div class="logo">
35
-
36
- <h1> MapGIS Client for JavaScript API</h1>
37
-
38
-
39
- </div>
40
- <div class="menu">
41
-
42
- <div class="navigation">
43
-
44
-
45
- <a
46
- class="link user-link "
47
- href="/static/modules/common/api/common-mapgis/index.html"
48
- >
49
- Common
50
- </a>
51
-
52
- <a
53
- class="link user-link "
54
- href="/static/modules/cesium/api/cesium-mapgis/index.html"
55
- >
56
- Cesium
57
- </a>
58
-
59
- <a
60
- class="link user-link "
61
- href="/static/modules/mapboxgl/api/mapboxgl-mapgis/index.html"
62
- >
63
- MapboxGL
64
- </a>
65
-
66
- <a
67
- class="link user-link "
68
- href="/static/modules/leaflet/api/leaflet-mapgis/index.html"
69
- >
70
- Leaflet
71
- </a>
72
-
73
- <a
74
- class="link user-link "
75
- href="/static/modules/openlayers/api/openLayers-mapgis/index.html"
76
- >
77
- OpenLayers
78
- </a>
79
-
80
-
81
-
82
- </div>
83
- </div>
84
- </div>
85
- </div>
86
-
87
- <div id="main">
88
- <div
89
- class="sidebar "
90
- id="sidebarNav"
91
- >
92
- <div>
93
- <span class="mapgis-api-document-span"><a href="index.html">API文档</a></span>
94
- </div>
95
-
96
- <div class="search-wrapper">
97
- <input id="search" type="text" placeholder="搜索文档..." class="input">
98
- </div>
99
-
100
- <nav>
101
-
102
- <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="">undefined</div><ul class="mapgis-sidebar-menus"><li><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>二维场景信息弹窗(leaflet引擎)
103
- 参考示例:
104
- <a href='#MapView'>[初始化二维场景视图]</a>
105
- [ES6引入方式]:<br/>
106
- import { Popup } from '@mapgis/webclient-leaflet-plugin' <br/>
107
- 自定义样式说明:<br/>
108
- zondy-popup__content 弹窗容器样式<br/>
109
- zondy-popup__tip 弹窗对话框箭头样式<br/>
110
- zondy-popup__header 弹窗头部样式<br/>
111
- zondy-popup__content 弹窗主体样式<br/>
112
- zondy-popup__footer 弹窗底部样式<br/></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="">undefined</div><ul class="mapgis-sidebar-menus"><li><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><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchEditorMapboxgl.html">SketchEditorMapboxgl</a><span style="display: none;"><p>二维场景草图编辑类<br/>
113
- <br>[ES5引入方式]:<br/>
114
- const { SketchEditorMapboxgl } = Zondy <br/>
115
- [ES6引入方式]:<br/>
116
- import { SketchEditorMapboxgl } from &quot;@mapgis/webclient-leaflet-plugin&quot; <br/></p></span></li></ul></div>
117
-
118
- </nav>
119
- </div>
120
- <div class="core" id="main-content-wrapper">
121
- <div class="content">
122
- <header id="page-title" class="page-title">
123
- <span class="page-title-main">类名</span>
124
- <span class="page-title-sub">view/MapViewMapboxgl.js</span>
125
- </header>
126
-
127
-
128
-
129
-
130
-
131
- <section>
132
- <article>
133
- <pre class="prettyprint source linenums"><code>import {
134
- Zondy,
135
- defaultValue,
136
- MapView,
137
- Point,
138
- Extent,
139
- SpatialReference,
140
- ViewEventType,
141
- LayerType,
142
- Projection,
143
- Geometry,
144
- isNull,
145
- proj4,
146
- TileInfoUtil,
147
- toJSON,
148
- Map,
149
- getGUID
150
- } from '@mapgis/webclient-common'
151
- import mapboxgl from '@mapgis/mapbox-gl'
152
- import { getLayerView } from '../document/index'
153
- import MapViewUtil from './utils/MapViewUtil'
154
- import Popup from './utils/Popup'
155
- import Screenshot from './utils/Screenshot'
156
- import { mapboxCustomCRS } from '../document/support/mapbox/mapboxCustomUtil'
157
-
158
- class MapViewMapboxgl extends MapView {
159
- constructor(options) {
160
- super(options)
161
- options = defaultValue(options, {})
162
- this._options = options
163
- /**
164
- * 地图视图中心点
165
- * @member {Point} MapView.prototype.center
166
- */
167
- // 统一center的类型
168
- this._center = defaultValue(options.center, undefined)
169
- if (
170
- this._center &amp;&amp;
171
- Array.isArray(this._center) &amp;&amp;
172
- this._center.length > 1
173
- ) {
174
- this._center = new Point({
175
- coordinates: [this._center[0], this._center[1]]
176
- })
177
- }
178
- /**
179
- * 地图视图可视范围
180
- * @member {Extent} MapView.prototype.extent
181
- */
182
- this._extent = defaultValue(options.extent, undefined)
183
- /**
184
- * 地图视图宽度
185
- * @readonly
186
- * @member {Number} MapView.prototype.width
187
- */
188
- this.width = undefined
189
- /**
190
- * 地图视图高度
191
- * @readonly
192
- * @member {Number} MapView.prototype.height
193
- */
194
- this.height = undefined
195
-
196
- /**
197
- * 地图层级
198
- * @member {Number} MapView.prototype.zoom
199
- */
200
- this._zoom = defaultValue(options.zoom, 0)
201
-
202
- /**
203
- * 地图视图比例尺
204
- * @member {Number} MapView.prototype.scale
205
- */
206
- this._scale = defaultValue(options.scale, undefined)
207
-
208
- /**
209
- * 地图视图最大比例尺
210
- * @member {Number} MapView.prototype.maxScale
211
- */
212
- this.maxScale = defaultValue(options.maxScale, undefined)
213
- /**
214
- * 地图视图最小比例尺
215
- * @member {Number} MapView.prototype.minScale
216
- */
217
- this.minScale = defaultValue(options.minScale, undefined)
218
-
219
- /**
220
- * 地图弹框popup
221
- * @member {Popup} MapView.prototype.popup
222
- */
223
- this.popup = defaultValue(options.popup, undefined)
224
-
225
- /**
226
- * 视图空间参考系
227
- * @readonly
228
- * @member {SpatialReference} MapView.prototype._spatialReference
229
- */
230
- this._spatialReference = undefined
231
- this._referenceLayer = undefined
232
- this.crs = undefined
233
- /**
234
- * 是否锁定视图空间参考系
235
- * @member {Boolean} MapView.prototype.spatialReferenceLocked
236
- */
237
- this.spatialReferenceLocked = defaultValue(
238
- options.spatialReferenceLocked,
239
- false
240
- )
241
- /**
242
- * 试图是否静止
243
- * @member {Boolean} MapView.prototype.stationary
244
- * @readonly
245
- */
246
- this.stationary = true
247
- /**
248
- * 初始化图层的额外参数,请参考MapBoxGl的API文档
249
- * @member {Object} MapView.prototype.extendOptions
250
- */
251
- this.extendOptions = defaultValue(options.extendOptions, {})
252
- /**
253
- * 地图视图最大显示范围。用户不设置时,将地图范围作为地图视图的最大显示范围,用户设置时采用用户设置的。地图视图初始化时,会根据此范围计算地图视图的最小比例尺,当瓦片数据的最大比例尺小于此比例尺时,无法显示。在相同视图大小下,fullExtent越大,地图视图的最小比例尺越小。
254
- * @readonly
255
- * @member {Extent} MapView.prototype.fullExtent
256
- */
257
- /**
258
- * 初始化MapBoxGl视图的额外参数,请参考MapBox官网的图层初始化参数
259
- * @member {Object} MapView.prototype.extendOptions
260
- */
261
- this.extendOptions = defaultValue(options.extendOptions, {})
262
- if (options.fullExtent) {
263
- let fullExtent = Extent.fromJSON(options.fullExtent.toJSON())
264
- if (!fullExtent.spatialReference.isGeographic) {
265
- fullExtent = Projection.project(
266
- fullExtent,
267
- new SpatialReference({
268
- wkid: 4326
269
- })
270
- )
271
- }
272
- // 初始化地图最大范围(4326坐标系)
273
- this._initFullExtent = fullExtent
274
- }
275
- // 地图最大范围(4326坐标系)
276
- this._fullExtent = this._initFullExtent
277
- // 地图范围,4326坐标系
278
- this._mapExtent = null
279
- }
280
-
281
- /**
282
- * 初始化一个地图视图对象
283
- * @param isFirst 是否是第一次构造视图
284
- * @private
285
- * */
286
- _initView(isFirst, options) {
287
- const self = this
288
- mapboxgl.accessToken =
289
- 'pk.eyJ1IjoiemtidWQiLCJhIjoiY2w5OGF2NXIyMzQ5bjNub2luem85Y2Z4OCJ9.uX09XQPOX5E7sOohws2l_Q'
290
- // 如果是初次构造视图(初次获取到crs),且未设置视图中心点,则取_fullExtent中心作为视图中心点
291
- if (isFirst &amp;&amp; !this._center) {
292
- if (this.fullExtent) {
293
- this._center = this._fullExtent.center
294
- }
295
- }
296
- // 根据fullExtent获取leaflet的maxBounds
297
- const maxBounds = this._getMaxBounds()
298
- // 初始化比例尺
299
- if (!this._zoom &amp;&amp; this._scale) {
300
- this._initScale(this._scale)
301
- }
302
- let fitBoundsOptions = undefined
303
- if (!this._center &amp;&amp; !this._zoom) {
304
- if (this._extent) {
305
- fitBoundsOptions = [
306
- [this._extent.xmin, this._extent.ymin],
307
- [this._extent.xmax, this._extent.ymax]
308
- ]
309
- }
310
- }
311
- const viewOptions = {
312
- // 经纬度一定要设置crs参数
313
- crs: this.crs,
314
- // MapBox的maxBounds需要优化
315
- maxBounds,
316
- // 地图容器div的id
317
- container: this._viewId,
318
- // 设置地图样式信息
319
- style: {
320
- version: 8,
321
- sources: {},
322
- layers: [
323
- {
324
- id: getGUID(),
325
- type: 'background',
326
- paint: {
327
- 'background-color': 'rgba(255, 255, 255,1)'
328
- }
329
- }
330
- ]
331
- },
332
- zoom: this._zoom,
333
- center: this._center.coordinates,
334
- fitBoundsOptions,
335
- preserveDrawingBuffer: true
336
- }
337
- // 初始化参数可被用户覆盖
338
- Object.keys(this.extendOptions).forEach((key) => {
339
- viewOptions[key] = Object.assign(
340
- viewOptions[key],
341
- this.extendOptions[key]
342
- )
343
- })
344
- this._innerView = new mapboxgl.Map(viewOptions)
345
- this.engineType = 'mapboxgl'
346
- // 初始化视图事件
347
- this._initViewEvent()
348
- if (!this._center &amp;&amp; !this._zoom &amp;&amp; this._extent) {
349
- this.flyTo({ extent: this._this._extent }, { animate: false })
350
- }
351
- // 获取视图大小
352
- this._initSize()
353
- // 初始化最大比例尺和最小比例尺
354
- this._initScaleLimit()
355
- // 初始化地图视图弹框,目前仅支持location方式打开弹框
356
- this._initPopup()
357
- // 设置鼠标样式
358
- this._initCursor()
359
-
360
- return new Promise((resolve) => {
361
- if (self._innerView.loaded()) {
362
- resolve(self)
363
- } else {
364
- self._innerView.once('load', () => {
365
- resolve(self)
366
- })
367
- }
368
- })
369
- }
370
-
371
- // 只定义内部变量this.minScale、this.maxScale
372
- _initScaleLimit() {
373
- // maxScale对应maxZoom,minScale对应minZoom
374
- // 如果用户设置了minScale/maxScale,则地图将直接采用用户设置的值。如果用户未设置地图视图会根据全图范围,计算视图的最小比例尺。
375
- if (this._options.minScale !== undefined) {
376
- // 在mapView上设置了minScale:
377
- // 如果minScale大于0,则设置引擎的minZoom为minScale对应的层级;
378
- // 如果minScale小于等于0,则设置引擎minZoom为undefined,minScale置为零。
379
- if (this.minScale > 0) {
380
- const zoom = this._getZoomByScale(this.minScale)
381
- if (zoom !== undefined) {
382
- this._innerView.setMinZoom(zoom)
383
- }
384
- } else {
385
- this.minScale = 0
386
- this._innerView.setMinZoom(undefined)
387
- }
388
- } else {
389
- // 用户未设置minScale:(地图视图会根据全图范围,计算视图的最小比例尺。)
390
- // 如果引擎上的minZoom有值且是有限值,则minScale为全图范围对应的比例尺;
391
- // 否则,minZoom也为undefined。
392
- const minZoom = this._innerView.getMinZoom()
393
- if (isFinite(minZoom)) {
394
- this.minScale = this._getScaleByZoom(this.minZoom)
395
- } else {
396
- this.minScale = undefined
397
- }
398
- }
399
- if (this._options.maxScale !== undefined) {
400
- // 在mapView上设置了maxScale:
401
- // 如果maxScale大于0,则设置引擎的maxZoom为maxScale对应的层级;
402
- // 如果maxScale小于等于0,则设置引擎maxZoom为undefined,maxScale置为0。
403
- // 初始option设置过maxScale
404
- if (this.maxScale > 0) {
405
- const zoom = this._getZoomByScale(this.maxScale)
406
- if (zoom !== undefined) {
407
- this._innerView.setMaxZoom(zoom)
408
- }
409
- } else if (this.maxScale &lt;= 0) {
410
- this.maxScale = 0
411
- this._innerView.setMaxZoom(undefined)
412
- }
413
- } else {
414
- // mapView没有设置maxScale:
415
- // 如果引擎上的maxZoom有值且是有限值,则maxScale为引擎视图最大层级对应的比例尺;
416
- // 否则,maxZoom也为undefined。
417
-
418
- // 处理超过lod层级时,导致部分图层投影转换出现非法值问题
419
- let maxZoom = this._innerView.getMaxZoom()
420
- const crs = this.crs || {}
421
- const options = crs.options || {}
422
- const lods = options.lods
423
- if (lods &amp;&amp; Array.isArray(lods)) {
424
- if (maxZoom >= lods.length - 1) {
425
- maxZoom = lods.length - 1
426
- this._innerView.setMaxZoom(maxZoom)
427
- }
428
- }
429
-
430
- if (isFinite(maxZoom)) {
431
- this.maxScale = this._getScaleByZoom(maxZoom)
432
- } else {
433
- this.maxScale = undefined
434
- }
435
- }
436
- if (!this._scale || this._scale &lt;= 0) {
437
- // 当_scale没有值或小于等于0,取最小比例尺的值
438
- this._scale = this.minScale
439
- } else if (this._scale > this.minScale) {
440
- // 当_scale大于minScale,则超出比例尺范围限制,_scale置为最小比例尺的值
441
- this._scale = this.minScale
442
- } else if (this._scale &lt; this.maxScale) {
443
- // 当_scale小于maxScale,则超出比例尺范围限制,_scale置为最大比例尺的值
444
- this._scale = this.maxScale
445
- }
446
- }
447
-
448
- // 构造crs对象
449
- _createCrsObject(options) {
450
- mapboxCustomCRS(mapboxgl, proj4)
451
- if (
452
- !options.spatialReference ||
453
- !options.resolutions ||
454
- !options.origin ||
455
- !options.extent
456
- ) {
457
- return
458
- }
459
- let wkt
460
- if (options.spatialReference.wkid) {
461
- wkt = Projection.getEPSGByWKID(options.spatialReference.wkid).strProject
462
- } else if (options.spatialReference.wkt) {
463
- wkt = options.spatialReference.wkt
464
- }
465
- const extentBounds = [
466
- options.extent.xmin,
467
- options.extent.ymin,
468
- options.extent.xmax,
469
- options.extent.ymax
470
- ]
471
-
472
- const code = `EPSG:${options.spatialReference.wkid}`
473
- const def = wkt
474
- const crs = new mapboxgl.Proj.CRS(code, def, {
475
- resolutions: options.resolutions,
476
- origin: options.origin,
477
- tileSize: options.tileSize,
478
- bounds: extentBounds,
479
- lods: options.lod
480
- })
481
- crs.options = options
482
- return crs
483
- }
484
-
485
- _reCreateView() {
486
- // 重置视图
487
- if (this._innerView) {
488
- // 停止视图动画
489
- this._innerView._animatingZoom = false
490
- // 销毁容器,此处会停止飞行动画、pan动画
491
- this._innerView.remove()
492
- }
493
- return this._initView(true, this._options)
494
- }
495
-
496
- _isEqualBounds(bounds1, bounds2) {
497
- let isEqual = true
498
- if (
499
- bounds1 &amp;&amp;
500
- bounds2 &amp;&amp;
501
- Array.isArray(bounds1) &amp;&amp;
502
- Array.isArray(bounds2) &amp;&amp;
503
- bounds1.length === bounds2.length
504
- ) {
505
- for (const i in bounds1) {
506
- if (bounds1[i] !== bounds2[i]) {
507
- isEqual = false
508
- break
509
- }
510
- }
511
- } else if (
512
- (!bounds1 &amp;&amp; !bounds2) ||
513
- (Array.isArray(bounds1) &amp;&amp;
514
- bounds1.length === 0 &amp;&amp;
515
- Array.isArray(bounds2) &amp;&amp;
516
- bounds2.length === 0)
517
- ) {
518
- isEqual = true
519
- } else {
520
- isEqual = false
521
- }
522
- return isEqual
523
- }
524
-
525
- /**
526
- * 初始化地图视图事件
527
- * @private
528
- * */
529
- _initViewEvent() {
530
- const self = this
531
- // 定义一个变量存储单击触发事件
532
- this._clickStore = null
533
- // 定义一个变量存储拖拽事件参数
534
- this._dragParams = { isDrag: false, origin: null, action: '', button: null }
535
-
536
- // 地图视图加载完毕事件
537
- self.fire(ViewEventType.loaded, {})
538
-
539
- // leaflet注册点击事件
540
- this._innerView.on('click', (event) => {
541
- // 单击触发事件,300ms延迟
542
- self._clickStore = setTimeout(function () {
543
- // 发送左键单击点击事件
544
- if (self._clickStore) {
545
- self.fire(ViewEventType.click, MapViewUtil.getMouseEvent(event, self))
546
- }
547
- }, 300)
548
- // 发送立即点击事件
549
- self.fire(
550
- ViewEventType.immediateClick,
551
- MapViewUtil.getMouseEvent(event, self)
552
- )
553
- })
554
-
555
- // 注册鼠标右键按下事件
556
- this._innerView.on('contextmenu', (event) => {
557
- // 单击触发事件,300ms延迟
558
- self._clickStore = setTimeout(function () {
559
- // 发送鼠标右键按下事件
560
- if (self._clickStore) {
561
- self.fire(ViewEventType.click, MapViewUtil.getMouseEvent(event, self))
562
- }
563
- }, 300)
564
- // 发送立即点击事件
565
- self.fire(
566
- ViewEventType.immediateClick,
567
- MapViewUtil.getMouseEvent(event, self)
568
- )
569
- })
570
-
571
- // 注册双击事件
572
- this._innerView.on('dblclick', (event) => {
573
- // 单击事件清理
574
- if (self._clickStore) {
575
- clearTimeout(this._clickStore)
576
- self._clickStore = null
577
- }
578
- // 发送双击事件
579
- self.fire(
580
- ViewEventType.doubleClick,
581
- MapViewUtil.getMouseEvent(event, self)
582
- )
583
- })
584
-
585
- // 注册鼠标按下事件
586
- this._innerView.on('mousedown', (event) => {
587
- // 发送鼠标按下事件
588
- self.fire(
589
- ViewEventType.pointerDown,
590
- MapViewUtil.getMouseEvent(event, self)
591
- )
592
- // 发送鼠标拖拽开始事件
593
- if (!this._dragParams.isDrag) {
594
- this._dragParams.origin = {
595
- x: event.originalEvent.layerX,
596
- y: event.originalEvent.layerY
597
- }
598
- this._dragParams.button = event.originalEvent.button
599
- this._dragParams.action = 'mouse-down'
600
- this._dragParams.isDrag = false
601
- }
602
- })
603
-
604
- // 注册鼠标抬起事件
605
- this._innerView.on('mouseup', (event) => {
606
- // 发送鼠标抬起事件
607
- self.fire(ViewEventType.pointerUp, MapViewUtil.getMouseEvent(event, self))
608
- // 发送鼠标拖拽结束事件
609
- if (self._dragParams.isDrag &amp;&amp; this._dragParams.action === 'update') {
610
- this._dragParams.action = 'end'
611
- self.fire(
612
- ViewEventType.drag,
613
- MapViewUtil.getDragEvent(
614
- event,
615
- self,
616
- self._dragParams.origin,
617
- this._dragParams.action
618
- )
619
- )
620
- }
621
- self._dragParams = {
622
- isDrag: false,
623
- origin: null,
624
- action: '',
625
- button: null
626
- }
627
- })
628
-
629
- // 注册鼠标移动事件
630
- this._innerView.on('mousemove', (event) => {
631
- // 发送鼠标移动视图事件
632
- self.fire(
633
- ViewEventType.pointerMove,
634
- MapViewUtil.getMouseEvent(event, self)
635
- )
636
- // console.log('self._dragParams.isDrag', self._dragParams.isDrag)
637
- // 发送鼠标拖拽中事件
638
- if (self._dragParams.isDrag) {
639
- self.fire(
640
- ViewEventType.drag,
641
- MapViewUtil.getDragEvent(
642
- event,
643
- self,
644
- self._dragParams.origin,
645
- self._dragParams.action,
646
- self._dragParams.button
647
- )
648
- )
649
- self._dragParams.action = 'update'
650
- } else if (this._dragParams.action === 'mouse-down') {
651
- this._dragParams.action = 'start'
652
- self._dragParams.isDrag = true
653
- }
654
- })
655
-
656
- // 注册键盘按下事件
657
- this._innerView.on('dragstart', (event) => {
658
- // 发送鼠标拖拽开始事件
659
- this._dragParams.origin = {
660
- x: event.originalEvent.layerX,
661
- y: event.originalEvent.layerY
662
- }
663
- this._dragParams.action = 'start'
664
- // 发送键盘按下事件
665
- self.fire(
666
- ViewEventType.drag,
667
- MapViewUtil.getDragEvent(
668
- event,
669
- self,
670
- this._dragParams.origin,
671
- this._dragParams.action
672
- )
673
- )
674
- })
675
-
676
- this._innerView.on('drag', (event) => {
677
- // 发送键盘按下事件
678
- this._dragParams.action = 'update'
679
- self.fire(
680
- ViewEventType.drag,
681
- MapViewUtil.getDragEvent(
682
- event,
683
- self,
684
- this._dragParams.origin,
685
- this._dragParams.action
686
- )
687
- )
688
- })
689
-
690
- this._innerView.on('dragend', (event) => {
691
- // 发送键盘按下事件
692
- this._dragParams.action = 'end'
693
- self.fire(
694
- ViewEventType.drag,
695
- MapViewUtil.getDragEvent(
696
- event,
697
- self,
698
- this._dragParams.origin,
699
- this._dragParams.action
700
- )
701
- )
702
- self._dragParams = {
703
- origin: null,
704
- action: '',
705
- button: null
706
- }
707
- })
708
-
709
- this._innerView.on('rotatestart', (event) => {
710
- // 发送鼠标拖拽开始事件
711
- this._dragParams.origin = {
712
- x: event.originalEvent.layerX,
713
- y: event.originalEvent.layerY
714
- }
715
- this._dragParams.action = 'start'
716
- // 发送键盘按下事件
717
- self.fire(
718
- ViewEventType.drag,
719
- MapViewUtil.getDragEvent(
720
- event,
721
- self,
722
- this._dragParams.origin,
723
- this._dragParams.action
724
- )
725
- )
726
- })
727
-
728
- this._innerView.on('rotate', (event) => {
729
- // 发送键盘按下事件
730
- this._dragParams.action = 'update'
731
- self.fire(
732
- ViewEventType.drag,
733
- MapViewUtil.getDragEvent(
734
- event,
735
- self,
736
- this._dragParams.origin,
737
- this._dragParams.action
738
- )
739
- )
740
- })
741
-
742
- this._innerView.on('rotateend', (event) => {
743
- // 发送键盘按下事件
744
- this._dragParams.action = 'end'
745
- self.fire(
746
- ViewEventType.drag,
747
- MapViewUtil.getDragEvent(
748
- event,
749
- self,
750
- this._dragParams.origin,
751
- this._dragParams.action
752
- )
753
- )
754
- self._dragParams = {
755
- origin: null,
756
- action: '',
757
- button: null
758
- }
759
- })
760
-
761
- // 注册视图开始改变事件
762
- this._innerView.on('movestart', () => {
763
- self.stationary = false
764
- })
765
-
766
- // 注册zoom变化事件
767
- this._innerView.on('zoom', (event) => {
768
- self._map.layers.forEach(function (layer) {
769
- switch (layer.type) {
770
- case LayerType.igsFeature:
771
- case LayerType.graphics:
772
- // showLayerByScale(self, layer)
773
- break
774
- default:
775
- break
776
- }
777
- })
778
- // 发送zoom变化事件
779
- self.fire(ViewEventType.zoom, {
780
- zoom: event.target._zoom,
781
- event
782
- })
783
- })
784
- // 注册zoom end事件
785
- this._innerView.on('zoomend', (event) => {
786
- // 更新地图视野范围,比例尺
787
- self._zoomEndHandler()
788
- // 发送地图视图改变事件
789
- self.fire(
790
- ViewEventType.viewChange,
791
- MapViewUtil.getViewChangeEvent(event, self)
792
- )
793
- })
794
-
795
- // 注册地图移动完成事件
796
- this._innerView.on('moveend', (event) => {
797
- // 更新地图视中心
798
- self._moveEndHandler()
799
- // 发送地图视图改变事件
800
- self.fire(
801
- ViewEventType.viewChange,
802
- MapViewUtil.getViewChangeEvent(event, self)
803
- )
804
- // self.fire(ViewEventType.mapMove, event)
805
- self.stationary = true
806
- })
807
-
808
- // 注册地图大小变化事件
809
- this._innerView.on('resize', () => {
810
- const oldWidth = Number(self.width)
811
- const oldHeight = Number(self.height)
812
- // 更新地图窗口宽高
813
- self._initSize()
814
- // 发送地图初始化后触发的事件
815
- self.fire(ViewEventType.resize, {
816
- oldWidth,
817
- oldHeight,
818
- width: self.width,
819
- height: self.height
820
- })
821
- })
822
- // 注册监控键盘事件
823
- this._listenKey()
824
- }
825
-
826
- /**
827
- * 设置(鼠标)操作地图事件是否可用
828
- * @private
829
- * @param {String} actionType 操作类型
830
- * @param {Boolean} isEnable 是否可用
831
- * */
832
- _mapActionControl(actionType, isEnable) {
833
- if (!this._innerView) return
834
- if (actionType === 'drag-pan') {
835
- // 左键拖拽地图
836
- if (isEnable) {
837
- this._innerView.dragPan.enable()
838
- } else {
839
- this._innerView.dragPan.disable()
840
- }
841
- } else if (actionType === 'double-click-zoom') {
842
- // 双击放大地图
843
- if (isEnable) {
844
- this._innerView.doubleClickZoom.enable()
845
- } else {
846
- this._innerView.doubleClickZoom.disable()
847
- }
848
- } else if (actionType === 'drag-rotate') {
849
- // 右键旋转地图
850
- if (isEnable) {
851
- this._innerView.dragRotate.enable()
852
- } else {
853
- this._innerView.dragRotate.disable()
854
- }
855
- }
856
- }
857
-
858
- /**
859
- * 注册监控键盘事件
860
- * @private
861
- * */
862
- _listenKey() {
863
- const self = this
864
- const canvas = this._innerView._canvas
865
- canvas.setAttribute('tabIndex', '-1')
866
- canvas.onclick = () => {
867
- canvas.focus()
868
- }
869
- canvas.addEventListener('keydown', (event) => {
870
- self.fire(ViewEventType.keyDown, MapViewUtil.getKeyEvent(event, self))
871
- })
872
- canvas.addEventListener('keyup', (event) => {
873
- self.fire(ViewEventType.keyUp, MapViewUtil.getKeyEvent(event, self))
874
- })
875
- }
876
-
877
- /**
878
- * @description 初始化获取视图尺寸大小
879
- * @private
880
- */
881
- _initSize() {
882
- // const container = this._innerView.getContainer()
883
- // this.width = container.offsetWidth
884
- // this.height = container.offsetHeight
885
- const canvas = this._innerView.getCanvas()
886
- const width = canvas.style ? canvas.style.width : canvas.width
887
- const height = canvas.style ? canvas.style.height : canvas.height
888
- this.width = Number(width.toString().replace('px', ''))
889
- this.height = Number(height.toString().replace('px', ''))
890
- }
891
-
892
- /**
893
- * zoom end事件处理器
894
- * @private
895
- * */
896
- _zoomEndHandler() {
897
- // 更新地图视野范围
898
- this.getExtent()
899
- // 更新地图层级
900
- this.getZoom()
901
- // 更新地图比例尺
902
- this.getScale()
903
- }
904
-
905
- /**
906
- * @description 获取当前视图容器的宽高,单位像素&lt;a id='getSize'>&lt;/a>
907
- * @return {Object} 当前视图容器的宽高对象
908
- * */
909
- getSize() {
910
- return { width: this.width, height: this.height }
911
- }
912
-
913
- _moveEndHandler() {
914
- // 更新地图视野中心
915
- this.getCenter()
916
- // 更新地图视野范围
917
- this.getExtent()
918
- }
919
-
920
- // 创建layerView对象
921
- _createLayerViewObj(layer) {
922
- return getLayerView(this, layer)
923
- }
924
-
925
- /**
926
- * 初始化弹窗
927
- * @private
928
- * */
929
- _initPopup() {
930
- this.popup = new Popup({ view: this })
931
- }
932
-
933
- /**
934
- * &lt;a id='hitTest'>&lt;/a>
935
- * @description 穿透检测,图元拾取。目前支持graphic类型拾取结果,支持图层类型GraphicLayer,FeatureLayer。
936
- * @param {Object} screenPoint 屏幕像素坐标点,例如{ x: 900, y: 500 }
937
- * @return {Array} 图元检测结果
938
- * @example &lt;caption>&lt;h7>根据基础图层对象或者图层id查询并返回实际图层&lt;/h7>&lt;/caption>
939
- * // ES6引入方式
940
- * import { MapView } from "@mapgis/webclient-mapboxgl-plugin";
941
- * import { Map, Point, Polygon, MultiPolygon ,Extent, GraphicsLayer, Feature, Circle, IGSFeatureLayer, IGSTileLayer } from "@mapgis/webclient-common";
942
-
943
- * // 初始化图层管理容器
944
- * const map = new Map();
945
- * // 初始化地图视图对象
946
- * this.mapView = new MapView({
947
- * // 视图id
948
- * viewId: "mapgis-2d-viewer",
949
- * // 图层管理容器
950
- * map: map,
951
- * })
952
- * // 创建一个要素crs
953
- * const feature = [
954
- * new Feature({
955
- * id: '11113',
956
- * geometry: new Circle({
957
- * center: [113, 35],
958
- * radius: 10000,
959
- * radiusUnit: 'kilometers',
960
- * })
961
- * }),
962
- * new Feature({
963
- * id: '11114',
964
- * geometry: new Polygon({
965
- * coordinates: [
966
- * // 外圈
967
- * [
968
- * [113.0, 29.0],
969
- * [116.0, 29.0],
970
- * [116.0, 35.0],
971
- * [113.0, 35.0],
972
- * [113.0, 29.0]
973
- * ]
974
- * ]
975
- * })
976
- * }),
977
- * new Feature({
978
- * id: '11115',
979
- * geometry:new MultiPolygon({
980
- * coordinates: [
981
- * [
982
- * // 外圈
983
- * [
984
- * [112.0, 28.0],
985
- * [115.0, 28.0],
986
- * [115.0, 30.0],
987
- * [112.0, 30.0],
988
- * [112.0, 28.0]
989
- * ],
990
- * // 第一个内圈
991
- * [
992
- * [112.2, 28.2],
993
- * [112.2, 29.8],
994
- * [114.8, 29.8],
995
- * [114.8, 28.2],
996
- * [112.2, 28.2]
997
- * ]
998
- * ]
999
- * ]
1000
- * })
1001
- * })
1002
- * ]
1003
- * // 初始化几何图层
1004
- * const graphicsLayer = new GraphicsLayer({
1005
- * graphics:feature
1006
- * })
1007
- * map.add(this.graphicsLayer)
1008
- * const result = this.mapView.hitTest({x:1100,y:600})
1009
- * */
1010
- hitTest(screenPoint) {
1011
- if (!this._innerView) return
1012
- const hitTestResult = []
1013
- const layerIds = this._getInnerStyleLayerIds()
1014
- // 使用引擎queryRenderedFeatures查询到引擎要素对象
1015
- const queryResult = this._innerView.queryRenderedFeatures(
1016
- [screenPoint.x, screenPoint.y],
1017
- {
1018
- layers: layerIds
1019
- }
1020
- )
1021
- queryResult.forEach((item) => {
1022
- if (
1023
- !item.properties ||
1024
- item.properties.id === undefined ||
1025
- !item.layer ||
1026
- !item.layer.id
1027
- ) {
1028
- return
1029
- }
1030
- // 从引擎要素对象上取到对应的公共层layerId、featureId
1031
- const layerId = item.layer.id.split('_')[0]
1032
- const featureId = item.properties.id
1033
- // 获取layer对象和feature对象
1034
- let layer = this.getLayer(layerId)
1035
- if (!layer) {
1036
- layer = this._graphicsLayers.find((layer) => layer.id === layerId)
1037
- }
1038
- let features = null
1039
- if (
1040
- layer.type === LayerType.igsFeature ||
1041
- layer.type === LayerType.geojson
1042
- ) {
1043
- const layerView = this._getLayerView(layer)
1044
- if (layerView.featureSet &amp;&amp; layerView.featureSet.features) {
1045
- features = layerView.featureSet.features.filter((item) => {
1046
- if (item.id === featureId) {
1047
- return item
1048
- }
1049
- })
1050
- }
1051
- } else if (layer.type === LayerType.graphics) {
1052
- if (layer.graphics) {
1053
- const featureCollection = layer.graphics.filter((item) => {
1054
- if (item.id === featureId) {
1055
- return item
1056
- }
1057
- })
1058
- features = featureCollection.items
1059
- }
1060
- }
1061
- const feature = features &amp;&amp; features.length > 0 ? features[0] : null
1062
- const graphicHit = {
1063
- graphic: feature,
1064
- layer,
1065
- mapPoint: this.toMap(screenPoint),
1066
- type: 'graphic'
1067
- }
1068
- hitTestResult.push(graphicHit)
1069
- })
1070
- return hitTestResult
1071
- }
1072
-
1073
- // 获取mapbox内部的styleLayerId
1074
- _getInnerStyleLayerIds() {
1075
- let layerIds = []
1076
- const layers = this._map.allLayers.items.concat(this._graphicsLayers.items)
1077
- layers.forEach((layer) => {
1078
- if (
1079
- layer.type === LayerType.igsFeature ||
1080
- layer.type === LayerType.geojson
1081
- ) {
1082
- const innerLayerView = this._getLayerView(layer)
1083
- if (innerLayerView) {
1084
- layerIds = layerIds.concat(innerLayerView.layerIDs)
1085
- }
1086
- } else if (layer.type === LayerType.graphics) {
1087
- const innerLayer = this.getInnerLayer(layer)
1088
- if (innerLayer &amp;&amp; innerLayer.getStyleLayerIds) {
1089
- layerIds = layerIds.concat(innerLayer.getStyleLayerIds())
1090
- }
1091
- }
1092
- })
1093
- return layerIds
1094
- }
1095
-
1096
- toMap(screenPoint) {
1097
- if (!screenPoint) return
1098
- const latLngPoint = this._innerView.unproject([
1099
- screenPoint.x,
1100
- screenPoint.y
1101
- ])
1102
- let geoPoint = new Point({
1103
- coordinates: [latLngPoint.lng, latLngPoint.lat]
1104
- })
1105
- if (this._spatialReference &amp;&amp; !this._spatialReference.isGeographic) {
1106
- geoPoint = Projection.project(geoPoint, this._spatialReference)
1107
- } else {
1108
- geoPoint.spatialReference = this._spatialReference
1109
- }
1110
- return geoPoint
1111
- }
1112
-
1113
- toScreen(point) {
1114
- let _point = Geometry.fromJSON(point)
1115
- if (!_point.spatialReference.isGeographic) {
1116
- _point = Projection.project(
1117
- _point,
1118
- new SpatialReference({
1119
- wkid: 4326
1120
- })
1121
- )
1122
- }
1123
- const screenPoint = this._innerView.project([
1124
- _point.coordinates[0],
1125
- _point.coordinates[1]
1126
- ])
1127
- return screenPoint
1128
- }
1129
-
1130
- /**
1131
- * &lt;a id='takeScreenshot'>&lt;/a>
1132
- * @description 屏幕快照
1133
- * @param {Object} [options = {}] 屏幕快照配置配置
1134
- * @param {PictureFormat} [options.format = PictureFormat.png] 照片格式,支持png,jpeg格式
1135
- * @param {String} [options.filename = 'screenshotFile'] 下载文件名
1136
- * @param {Number} [options.width = undefined] 图片宽度
1137
- * @param {Number} [options.height = undefined] 图片高度
1138
- * @param {Number} [options.x = undefined] 图片原点x
1139
- * @param {Number} [options.y = undefined] 图片原点y
1140
- * @param {Boolean} [options.isDownload = true] 是否下载图片
1141
- * @return {Object} 屏幕快照 {dataUrl String },且浏览器会下载图片
1142
- * @example &lt;caption>&lt;h7>屏幕快照&lt;/h7>&lt;/caption>
1143
- * // ES5引入方式
1144
- * const { Map, MapView } = Zondy
1145
- * const { PictureFormat } = Zondy.Enum
1146
- * // ES6引入方式
1147
- * import { Map, MapView } from "@mapgis/webclient-mapboxgl-plugin"
1148
- * import { PictureFormat } from "@mapgis/webclient-common"
1149
- * // 初始化图层管理容器
1150
- * const map = new Map();
1151
- * // 初始化地图视图对象
1152
- * const mapView = new MapView({
1153
- * // 二维场景视图的容器(html的div标签)ID
1154
- * viewId: "二维场景视图的容器的id",
1155
- * // 图层管理容器
1156
- * map: map
1157
- * })
1158
- * // 设置屏幕快照参数
1159
- * const screenshotOptions: {
1160
- * format: PictureFormat.png
1161
- * }
1162
- * // 开始屏幕快照
1163
- * mapView.takeScreenshot(screenshotOptions).then((result) => {
1164
- * // 获取base64格式的url字符串
1165
- * console.log("dataUrl:", result.dataUrl)
1166
- * })
1167
- * */
1168
- takeScreenshot(options) {
1169
- options.view = this
1170
- let screenshotResult = null
1171
- if (!this._screenshot) {
1172
- this._screenshot = new Screenshot(options)
1173
- screenshotResult = this._screenshot._addView()
1174
- } else {
1175
- screenshotResult = this._screenshot._addView()
1176
- }
1177
- return screenshotResult
1178
- }
1179
-
1180
- flyTo(options, animateOptions = { animate: true }) {
1181
- options = defaultValue(options, {})
1182
- const zoom = defaultValue(options.zoom, 1)
1183
-
1184
- // 获取center
1185
- const center = this._getFlyToCenter(options)
1186
-
1187
- // 获取extent
1188
- const extent = this._getFlyToExtent(options)
1189
-
1190
- if (this._innerView) {
1191
- if (center) {
1192
- this._innerView.flyTo({
1193
- center: [center.coordinates[0], center.coordinates[1]],
1194
- zoom
1195
- })
1196
- } else if (extent) {
1197
- this._innerView.fitBounds(
1198
- [
1199
- [extent.xmin, extent.ymin], // 西南
1200
- [extent.xmax, extent.ymax] // 东北
1201
- ],
1202
- animateOptions
1203
- )
1204
- }
1205
- }
1206
- }
1207
-
1208
- /**
1209
- * 视点跳转为给定的目标&lt;a id='goTo'>&lt;/a>
1210
- * @param goToTarget 跳转参数
1211
- * @param {Point|Array} [goToTarget.center] 视图跳转中心点
1212
- * @param {Number} [goToTarget.zoom] 视图跳转层级
1213
- * @param {Number} [goToTarget.scale] 视图跳转比例尺
1214
- * @param {Geometry|Array&lt;Geometry>|Collection&lt;Geometry>} [goToTarget.target] 按范围跳转
1215
- * @param options 动画参数
1216
- * @param {Boolean} [options.animate = true ] 新视图的过渡是否开启动画,默认开启动画
1217
- * @param {Number} [options.duration = 200 ] 动画的持续时间,以毫秒为单位,默认200毫秒
1218
- * @example &lt;caption>&lt;h7>中心点跳转示例&lt;/h7>&lt;/caption>
1219
- * // ES5引入方式
1220
- * const { Map, MapView } = Zondy
1221
- * // ES6引入方式
1222
- * import { Map, MapViewMapboxgl as MapView } from "@mapgis/webclient-leaflet-plugin"
1223
- * // 初始化图层管理容器
1224
- * map = new .Map();
1225
- * // 初始化地图视图对象
1226
- * mapView = new MapView({
1227
- * // 视图id
1228
- * viewId: "view-id",
1229
- * // 图层管理容器
1230
- * map: map
1231
- * });
1232
- * // 视点跳转
1233
- * mapView.goTo({
1234
- * // 跳转中心点
1235
- * center: [115.47643872463577, 30.980700423496124],
1236
- * // 地图层级
1237
- * zoom: 8
1238
- * });
1239
- *
1240
- * @example &lt;caption>&lt;h7>按范围跳转示例&lt;/h7>&lt;/caption>
1241
- * // ES5引入方式
1242
- * const { Map, MapView } = Zondy
1243
- * const { Extent, Circle } = Zondy.Geometry
1244
- * // ES6引入方式
1245
- * import { Map, MapViewMapboxgl as MapView } from "@mapgis/webclient-leaflet-plugin"
1246
- * // 初始化图层管理容器
1247
- * map = new Map();
1248
- * // 初始化地图视图对象
1249
- * mapView = new MapView({
1250
- * // 视图id
1251
- * viewId: "view-id",
1252
- * // 图层管理容器
1253
- * map: map
1254
- * });
1255
- * const extent1 = new Extent({
1256
- * xmin: 111.88463529230717,
1257
- * ymin: 28.646934514163803,
1258
- * xmax: 116.89989408129225,
1259
- * ymax: 33.07991791253288,
1260
- * })
1261
- * const geometry2 = new Circle({
1262
- * center: [111, 29],
1263
- * radius: 100,
1264
- * radiusUnit: "kilometers",
1265
- * })
1266
- * mapView
1267
- * .goTo({
1268
- * target: [extent1, geometry2],
1269
- * })
1270
- * .then(() => {
1271
- * console.log("gotoExtent callback")
1272
- * })
1273
- */
1274
- goTo(goToTarget = {}, options = {}) {
1275
- let center
1276
- let zoom
1277
- let resultPromise = new Promise((resolve) => {
1278
- resolve()
1279
- })
1280
- if (this._innerView) {
1281
- // 获取center,zoom
1282
- if (
1283
- !isNull(goToTarget.center) ||
1284
- !isNull(goToTarget.zoom) ||
1285
- !isNull(goToTarget.scale)
1286
- ) {
1287
- if (!isNull(goToTarget.center)) {
1288
- center = this._getFlyToCenter({ center: goToTarget.center })
1289
- } else {
1290
- center = this._center
1291
- }
1292
- // 同时设置scale和zoom时,scale优先于zoom
1293
- if (!isNull(goToTarget.scale) &amp;&amp; goToTarget.scale > 0) {
1294
- zoom = this._getZoomByScale(goToTarget.scale)
1295
- } else if (!isNull(goToTarget.zoom) &amp;&amp; goToTarget.zoom > 0) {
1296
- zoom = goToTarget.zoom
1297
- } else {
1298
- zoom = this._zoom
1299
- }
1300
- }
1301
- // 几何对象 或 几何数组 或 几何集合collection的 extent
1302
- let extent
1303
- if (!isNull(goToTarget.target)) {
1304
- const targetExtent = this._getTargetExtent(goToTarget.target)
1305
- if (
1306
- targetExtent.xmin !== targetExtent.xmax &amp;&amp;
1307
- targetExtent.ymin !== targetExtent.ymax
1308
- ) {
1309
- extent = targetExtent
1310
- } else {
1311
- center = this._getFlyToCenter({
1312
- center: new Point({
1313
- coordinates: [targetExtent.xmin, targetExtent.ymin]
1314
- })
1315
- })
1316
- }
1317
- }
1318
- // 获取goto动画参数
1319
- const animateOptions = { animate: true, duration: 200 }
1320
- if (!isNull(options)) {
1321
- if (!isNull(options.animate)) {
1322
- animateOptions.animate = options.animate
1323
- }
1324
- if (!isNull(options.duration)) {
1325
- animateOptions.duration = options.duration
1326
- }
1327
- }
1328
- if (center) {
1329
- // 中心点跳转
1330
- let centerLat = center.coordinates[1]
1331
- let centerLng = center.coordinates[0]
1332
- // 如果中心点超过fullExtent,则取fullExtent中心为当前中心点
1333
- if (this._fullExtent) {
1334
- if (
1335
- centerLat > this._fullExtent.ymax ||
1336
- centerLat &lt; this._fullExtent.ymin
1337
- ) {
1338
- centerLat = (this._fullExtent.ymax + this._fullExtent.ymin) / 2
1339
- }
1340
- if (
1341
- centerLng > this._fullExtent.xmax ||
1342
- centerLng &lt; this._fullExtent.xmin
1343
- ) {
1344
- centerLng = (this._fullExtent.xmax + this._fullExtent.xmin) / 2
1345
- }
1346
- }
1347
- if (isFinite(centerLat) &amp;&amp; isFinite(centerLng)) {
1348
- // 如果中心点坐标和层级与当前视图相同,则不跳转
1349
- let isSame = false
1350
- const viewCenter = this._innerView.getCenter()
1351
- if (
1352
- zoom === this._zoom &amp;&amp;
1353
- centerLat === viewCenter.lat &amp;&amp;
1354
- centerLng === viewCenter.lng
1355
- ) {
1356
- isSame = true
1357
- }
1358
- if (!isSame) {
1359
- const flyToOptions = {
1360
- center: [center.coordinates[0], center.coordinates[1]],
1361
- zoom
1362
- }
1363
- Object.assign(flyToOptions, animateOptions)
1364
- resultPromise = new Promise((resolve) => {
1365
- this._innerView.flyTo(flyToOptions)
1366
- this._innerView.once('moveend', () => {
1367
- resolve()
1368
- })
1369
- })
1370
- }
1371
- }
1372
- } else if (extent) {
1373
- // 范围跳转
1374
- let xmin = extent.xmin
1375
- let xmax = extent.xmax
1376
- let ymin = extent.ymin
1377
- let ymax = extent.ymax
1378
- if (this._fullExtent) {
1379
- if (xmin &lt; this._fullExtent.xmin) {
1380
- xmin = this._fullExtent.xmin
1381
- }
1382
- if (xmax > this._fullExtent.xmax) {
1383
- xmax = this._fullExtent.xmax
1384
- }
1385
- if (ymin &lt; this._fullExtent.ymin) {
1386
- ymin = this._fullExtent.ymin
1387
- }
1388
- if (ymax > this._fullExtent.ymax) {
1389
- ymax = this._fullExtent.ymax
1390
- }
1391
- }
1392
- if (
1393
- isFinite(xmin) &amp;&amp;
1394
- isFinite(xmax) &amp;&amp;
1395
- isFinite(ymin) &amp;&amp;
1396
- isFinite(ymax)
1397
- ) {
1398
- // 如果extent与当前地图视图范围所在中心和层级不一致,则跳转
1399
- // resultPromise = this._setViewExtent(extent, animateOptions)
1400
- this._innerView.fitBounds(
1401
- [
1402
- [extent.xmin, extent.ymin], // 西南
1403
- [extent.xmax, extent.ymax] // 东北
1404
- ],
1405
- animateOptions
1406
- )
1407
- }
1408
- }
1409
- }
1410
- return resultPromise
1411
- }
1412
-
1413
- /**
1414
- * 获取当前视图的中心点(经纬度中心点)&lt;a id='getCenter'>&lt;/a>
1415
- * @return {Object} 中心点对象
1416
- * */
1417
- getCenter() {
1418
- const center = this._innerView.getCenter()
1419
- let centerCrs = new Point({ coordinates: [center.lng, center.lat] })
1420
- this._center = centerCrs
1421
- const spatialReference = this._spatialReference
1422
- if (!spatialReference.isGeographic) {
1423
- centerCrs = Projection.project(centerCrs, spatialReference)
1424
- }
1425
- return centerCrs
1426
- }
1427
-
1428
- /**
1429
- * &lt;a id='setCenter'>&lt;/a>
1430
- * 设置缩视野中心&lt;a id='setCenter'>&lt;/a>
1431
- * @private
1432
- * @param {Point} value 视图中心
1433
- * */
1434
- setCenter(value) {
1435
- if (!this._innerView) return
1436
- if (Array.isArray(value) &amp;&amp; value.length > 1) {
1437
- this._center = new Point({
1438
- coordinates: [value[0], value[1]],
1439
- spatialReference: this._spatialReference
1440
- })
1441
- this.flyTo({ zoom: this._zoom, center: this._center })
1442
- } else if (value instanceof Point) {
1443
- this._center = value
1444
- this.flyTo({ zoom: this._zoom, center: this._center })
1445
- }
1446
- }
1447
-
1448
- /**
1449
- * 获取当前缩放级数&lt;a id='getZoom'>&lt;/a>
1450
- * @return {Number} 当前缩放级数
1451
- * */
1452
- getZoom() {
1453
- this._zoom = this._innerView.getZoom()
1454
- return this._zoom
1455
- }
1456
-
1457
- /**
1458
- * &lt;a id='setZoom'>&lt;/a>
1459
- * 设置缩放级数
1460
- * @private
1461
- * @param {Number} value 视图层级
1462
- * */
1463
- setZoom(value) {
1464
- if (!this._innerView) return
1465
-
1466
- this._zoom = value
1467
- this.flyTo({ zoom: value, center: this._center })
1468
- }
1469
-
1470
- /**
1471
- * 获取当前视图的地理范围&lt;a id='getExtent'>&lt;/a>
1472
- * @return {Extent} 获取当前视图的地理范围
1473
- * */
1474
- getExtent() {
1475
- if (!this._innerView) return
1476
- const latLngBounds = this._innerView.getBounds()
1477
- if (!latLngBounds || !latLngBounds._sw || !latLngBounds._ne) return
1478
- let extent = new Extent({
1479
- xmin: latLngBounds._sw.lng,
1480
- ymin: latLngBounds._sw.lat,
1481
- xmax: latLngBounds._ne.lng,
1482
- ymax: latLngBounds._ne.lat
1483
- })
1484
- const spatialReference = this._spatialReference
1485
- if (!spatialReference.isGeographic) {
1486
- extent = Projection.project(extent, spatialReference)
1487
- }
1488
- this._extent = extent
1489
- return extent
1490
- }
1491
-
1492
- /**
1493
- * &lt;a id='setExtent'>&lt;/a>
1494
- * 设置视野范围
1495
- * @private
1496
- * @param {Extent} value 范围对象
1497
- * */
1498
- setExtent(value) {
1499
- if (!this._innerView) return
1500
- this._extent = value
1501
- this.flyTo({ extent: value })
1502
- }
1503
-
1504
- /**
1505
- * &lt;a id='getScale'>&lt;/a>
1506
- * 获取当前比例尺
1507
- * @return {Number} 比例尺 实际10000米:地图1米
1508
- * */
1509
- getScale() {
1510
- const scale = this._getScaleByZoom(this._zoom)
1511
- this._scale = scale
1512
- return scale
1513
- }
1514
-
1515
- /**
1516
- * 根据层级获取比例尺
1517
- * @private
1518
- * @param {Number} zoom 层级
1519
- * @return {Number} 比例尺
1520
- * */
1521
- _getScaleByZoom(zoom) {
1522
- let scale
1523
- if (this.crs &amp;&amp; this.crs.options &amp;&amp; this.crs.options.lods) {
1524
- if (!isNull(zoom)) {
1525
- if (zoom % 1 === 0) {
1526
- const lod = this.crs.options.lods[zoom]
1527
- scale = lod.scale
1528
- } else {
1529
- const floorZoom = Math.floor(zoom)
1530
- const ceilZoom = Math.ceil(zoom)
1531
- const floorLod = this.crs.options.lods[floorZoom]
1532
- const ceilLod = this.crs.options.lods[ceilZoom]
1533
- if (floorLod === undefined &amp;&amp; ceilLod === undefined) {
1534
- scale = 0
1535
- } else if (floorLod === undefined) {
1536
- scale = ceilLod.scale
1537
- } else if (ceilLod === undefined) {
1538
- scale = floorLod.scale
1539
- } else {
1540
- scale =
1541
- floorLod.scale -
1542
- (floorLod.scale - ceilLod.scale) * (zoom - floorZoom)
1543
- }
1544
- }
1545
- }
1546
- }
1547
- return scale
1548
- }
1549
-
1550
- /**
1551
- * 初始化地图视图比例尺
1552
- * @private
1553
- * */
1554
- _initScale(value) {
1555
- if (this._scale &amp;&amp; this._scale > 0) {
1556
- this._zoom = this._getZoomByScale(value)
1557
- }
1558
- }
1559
-
1560
- /**
1561
- * 根据比例尺获取层级
1562
- * @private
1563
- * @param {Number} value 比例尺
1564
- * @return {Object} 比例尺层级与层级对应的比例尺
1565
- * */
1566
- _getZoomByScale(value) {
1567
- let zoom = undefined
1568
- if (this.crs &amp;&amp; this.crs.options &amp;&amp; this.crs.options.lods) {
1569
- let validScaleIndex = -1
1570
- for (let i = 0; i &lt; this.crs.options.lods.length; i++) {
1571
- const item = this.crs.options.lods[i]
1572
- const lastItem = this.crs.options.lods[i - 1]
1573
- if (item.scale &lt;= 0) {
1574
- break
1575
- } else if (validScaleIndex &lt; 0) {
1576
- validScaleIndex = i
1577
- }
1578
- if (i === validScaleIndex) {
1579
- if (item.scale > 0 &amp;&amp; value >= item.scale) {
1580
- zoom = item.level
1581
- break
1582
- }
1583
- } else if (
1584
- value >= item.scale &amp;&amp;
1585
- value &lt;= lastItem.scale &amp;&amp;
1586
- lastItem.scale !== item.scale
1587
- ) {
1588
- zoom =
1589
- item.level - (value - item.scale) / (lastItem.scale - item.scale)
1590
- break
1591
- } else if (i === this.crs.options.lods.length - 1) {
1592
- if (item.scale > 0 &amp;&amp; value &lt;= item.scale) {
1593
- zoom = item.level
1594
- break
1595
- }
1596
- }
1597
- }
1598
- }
1599
- return zoom
1600
- }
1601
-
1602
- /**
1603
- * &lt;a id='setScale'>&lt;/a>
1604
- * 设置当前比例尺
1605
- * @private
1606
- * @param {Number} value 比例尺 实际10000米:地图1米
1607
- * */
1608
- setScale(value) {
1609
- if (!this._innerView) return
1610
- const zoom = this._getZoomByScale(value)
1611
- // 视图定位
1612
- if (zoom) {
1613
- this.flyTo({ center: this._center, zoom })
1614
- }
1615
- }
1616
-
1617
- // 根据地图范围得到最大限度视图范围
1618
- _getMaxBounds() {
1619
- if (this._fullExtent) {
1620
- return [
1621
- [this._fullExtent.xmin, this._fullExtent.ymin],
1622
- [this._fullExtent.xmax, this._fullExtent.ymax]
1623
- ]
1624
- } else {
1625
- return []
1626
- }
1627
- }
1628
-
1629
- /**
1630
- * @description 比较两个crs对象是否相等
1631
- * @private
1632
- * @param {CRS} crs1 作比较的第一个CRS对象
1633
- * @param {CRS} crs2 作比较的第二个CRS对象
1634
- * @return {Boolean} crs对象是否相等
1635
- * */
1636
- _isEqualCrs(crs1, crs2) {
1637
- let isEqual = true
1638
- if (crs1 &amp;&amp; crs2) {
1639
- // 比较被设置的新Crs和当前this.crs是否相同。
1640
- // 判断标准 crs.option的resolutions,origin,bounds是否相等,以及crs.epsgCode相等
1641
- let crs1Info
1642
- if (crs1.epsgCode.split(':').length > 1) {
1643
- crs1Info = {
1644
- wkid: crs1.epsgCode.split(':')[1]
1645
- }
1646
- } else {
1647
- crs1Info = {
1648
- wkid: this.crs.epsgCode
1649
- }
1650
- }
1651
- let crs2Info
1652
- if (crs2.epsgCode.split(':').length > 1) {
1653
- crs2Info = {
1654
- wkid: crs2.epsgCode.split(':')[1]
1655
- }
1656
- } else {
1657
- crs2Info = {
1658
- wkid: crs2.epsgCode
1659
- }
1660
- }
1661
-
1662
- let isEqualSR
1663
- if (crs2Info.wkid === undefined || crs1Info.wkid === undefined) {
1664
- isEqualSR = TileInfoUtil.isSameSpatialReference(
1665
- crs2Info.wkt,
1666
- crs1Info.wkt
1667
- )
1668
- } else {
1669
- isEqualSR = TileInfoUtil.isSameSpatialReference(
1670
- crs2Info.wkid,
1671
- crs1Info.wkid
1672
- )
1673
- }
1674
- if (isEqualSR) {
1675
- // ArcgisMapImage图层临时处理,服务数据extent有问题,暂为解决。4326、3857参考系构建对应的Leaflet参考系对象,
1676
- // 因此没有options,不参与对比bounds、resolutions,暂时组织比较wkid
1677
- // 问题解决后,统一比较 crs.options,该if条件可移除
1678
- if (
1679
- (crs2Info.wkid === '4326' || crs2Info.wkid === '3857') &amp;&amp;
1680
- !crs2.options
1681
- ) {
1682
- isEqual = true
1683
- }
1684
- if (crs2.options) {
1685
- const newCrsOptions = crs2.options
1686
- crs2Info.resolutions = newCrsOptions.resolutions
1687
- crs2Info.origin = newCrsOptions.origin
1688
- crs2Info.bounds = newCrsOptions.bounds
1689
- crs1Info.resolutions = this.crs.options.resolutions
1690
- crs1Info.origin = this.crs.options.origin
1691
- crs1Info.bounds = this.crs.options.bounds
1692
- if (
1693
- JSON.stringify(crs2Info.resolutions) !==
1694
- JSON.stringify(crs1Info.resolutions) ||
1695
- JSON.stringify(crs2Info.origin) !==
1696
- JSON.stringify(crs1Info.origin) ||
1697
- !this._isEqualBounds(crs1Info.bounds, crs2Info.bounds)
1698
- ) {
1699
- isEqual = false
1700
- }
1701
- }
1702
- } else {
1703
- isEqual = false
1704
- }
1705
- } else if ((!crs1 &amp;&amp; crs2) || (crs1 &amp;&amp; !crs2)) {
1706
- isEqual = false
1707
- }
1708
- return isEqual
1709
- }
1710
-
1711
- /**
1712
- * &lt;a id='toJSON'>&lt;/a>
1713
- * 导出场景视图的配置文件
1714
- * @return {Object} 导出的配置文件
1715
- * */
1716
- toJSON() {
1717
- return {
1718
- extent: toJSON(this._extent, Extent),
1719
- center: toJSON(this._center, Point),
1720
- map: toJSON(this._map, Map),
1721
- viewId: this._viewId,
1722
- width: this.width,
1723
- height: this.height,
1724
- zoom: this.zoom,
1725
- scale: this.scale,
1726
- maxScale: this.maxScale,
1727
- minScale: this.minScale,
1728
- spatialReferenceLocked: this.spatialReferenceLocked
1729
- }
1730
- }
1731
- }
1732
-
1733
- Object.defineProperties(MapView.prototype, {
1734
- scale: {
1735
- get() {
1736
- return this._scale
1737
- },
1738
- set(value) {
1739
- this.setScale(value)
1740
- }
1741
- },
1742
- zoom: {
1743
- get() {
1744
- return this._zoom
1745
- },
1746
- set(value) {
1747
- this.setZoom(value)
1748
- }
1749
- },
1750
- extent: {
1751
- get() {
1752
- return this._extent
1753
- },
1754
- set(value) {
1755
- this.setExtent(value)
1756
- }
1757
- },
1758
- center: {
1759
- get() {
1760
- let center = this._center
1761
- if (this._spatialReference) {
1762
- if (!this.spatialReference.isGeographic) {
1763
- center = Projection.project(this._center, this._spatialReference)
1764
- }
1765
- }
1766
- return center
1767
- },
1768
- set(value) {
1769
- this.setCenter(value)
1770
- }
1771
- },
1772
- // fullExtent: {
1773
- // get() {
1774
- // if (!this._initFullExtent) {
1775
- // this._fullExtent = this._mapExtent
1776
- // } else {
1777
- // this._fullExtent = this._initFullExtent
1778
- // }
1779
- // let fullExtent
1780
- // if (this.spatialReference &amp;&amp; this._fullExtent) {
1781
- // if (!this.spatialReference.isGeographic) {
1782
- // fullExtent = Projection.project(
1783
- // this._fullExtent,
1784
- // this.spatialReference
1785
- // )
1786
- // } else {
1787
- // fullExtent = this._fullExtent
1788
- // }
1789
- // }
1790
- // return fullExtent
1791
- // },
1792
- // set(value) {
1793
- // let fullExtent
1794
- // if (!value.spatialReference.isGeographic) {
1795
- // fullExtent = Projection.project(
1796
- // value,
1797
- // new SpatialReference('EPSG:4326')
1798
- // )
1799
- // } else {
1800
- // fullExtent = value
1801
- // }
1802
- // this._fullExtent = fullExtent
1803
- // this._initFullExtent = Extent.fromJSON(fullExtent.toJSON())
1804
- // // Extent的改变引起Crs的改变
1805
- // this.setCrs()
1806
- // }
1807
- // },
1808
- spatialReference: {
1809
- get() {
1810
- return this._spatialReference
1811
- },
1812
- set(value) {
1813
- // this._spatialReference = value
1814
- }
1815
- },
1816
- rotation: {
1817
- get() {
1818
- return this._rotation
1819
- },
1820
- set(value) {
1821
- // this._rotation = value
1822
- // if (this._innerView) {
1823
- // this._innerView.setBearing(value)
1824
- // }
1825
- }
1826
- }
1827
- })
1828
-
1829
- /**
1830
- * 通过一个配置生成一个场景视图对象
1831
- * @param {Object} json 场景视图配置
1832
- * @return {MapView}
1833
- * */
1834
- MapViewMapboxgl.fromJSON = function (json) {
1835
- json = defaultValue(json, {})
1836
-
1837
- return new MapViewMapboxgl(json)
1838
- }
1839
-
1840
- Zondy.MapViewMapboxgl = MapViewMapboxgl
1841
- export default MapViewMapboxgl
1842
- </code></pre>
1843
- </article>
1844
- </section>
1845
-
1846
-
1847
-
1848
-
1849
- </div>
1850
-
1851
- <footer class="footer">
1852
- <div class="content has-text-centered">
1853
- <p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
1854
- <p class="sidebar-created-by">
1855
- <a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
1856
- <a href="http://192.168.82.89:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
1857
- </p>
1858
- </div>
1859
- </footer>
1860
-
1861
- </div>
1862
- <div id="side-nav" class="side-nav">
1863
- <div style="margin-bottom: 10px;">
1864
- <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
1865
- </div>
1866
- <div style="margin-bottom: 10px;">
1867
- <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
1868
- </div>
1869
- <div style="margin-bottom: 10px;">
1870
- <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
1871
- </div>
1872
- <div>
1873
- <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
1874
- </div>
1875
- </div>
1876
- </div>
1877
- <script src="scripts/linenumber.js"> </script>
1878
-
1879
- <script src="scripts/search.js"> </script>
1880
-
1881
- </body>
1882
- </html>