@mapgis/webclient-mapboxgl-plugin 10.3.3 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/README.md +51 -124
  2. package/dist/es5/webclient-common.min.js +90 -0
  3. package/dist/es5/webclient-mapboxgl-plugin.min.js +1 -0
  4. package/dist/webclient-mapboxgl-plugin-es6.min.js +1 -0
  5. package/documention/EchartsLayer.html +379 -0
  6. package/documention/MapViewMapboxgl.html +3587 -0
  7. package/documention/Popup.html +1523 -0
  8. package/documention/Screenshot.html +1089 -0
  9. package/documention/SketchEditorMapboxgl.html +3383 -0
  10. package/documention/document_ArcGISVectorTileLayerView.js.html +265 -0
  11. package/documention/document_EchartsLayerView.js.html +246 -0
  12. package/documention/document_GraphicsLayerView.js.html +314 -0
  13. package/documention/document_IGSFeatureLayerView.js.html +218 -0
  14. package/documention/document_IGSMapImageLayerView.js.html +240 -0
  15. package/documention/document_IGSTileLayerView.js.html +236 -0
  16. package/documention/document_IGSVectorTileLayerView.js.html +264 -0
  17. package/documention/document_MapVLayerView.js.html +247 -0
  18. package/documention/document_WMSLayerView.js.html +240 -0
  19. package/documention/document_WMTSLayerView.js.html +234 -0
  20. package/documention/document_WebTileLayerView.js.html +240 -0
  21. package/documention/document_support_FeatureRenderView.js.html +682 -0
  22. package/documention/document_support_MapboxglGraphicsLayer.js.html +1184 -0
  23. package/documention/document_support_SourceMetaData.js.html +223 -0
  24. package/documention/document_support_Utils.js.html +624 -0
  25. package/documention/document_support_mapbox_mapboxCustomUtil.js.html +322 -0
  26. package/documention/global.html +252 -0
  27. package/documention/index.html +251 -0
  28. package/documention/module-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%8F%AF%E8%A7%86%E5%8C%96.MapvLayer.html +445 -0
  29. package/documention/scripts/app.min.js +1 -0
  30. package/documention/scripts/linenumber.js +26 -0
  31. package/documention/scripts/search.js +45 -0
  32. package/documention/scripts/sideBar.js +11 -0
  33. package/documention/sketchEditor_SketchEditorMapboxgl.js.html +875 -0
  34. package/documention/styles/anchor.png +0 -0
  35. package/documention/styles/app.min.css +1 -0
  36. package/documention/styles/c.png +0 -0
  37. package/documention/styles/iframe.css +29 -0
  38. package/documention/styles/m.png +0 -0
  39. package/documention/styles/prettify-jsdoc.css +111 -0
  40. package/documention/styles/prettify-tomorrow.css +132 -0
  41. package/documention/styles/reset.css +44 -0
  42. package/documention/styles/up-arrow.png +0 -0
  43. package/documention/tutorial-1./345/277/253/351/200/237/345/205/245/351/227/250.html +165 -0
  44. package/documention/util_ConvertRendererToStyleLayerUtil.js.html +844 -0
  45. package/documention/util_MapboxglFeatureRender.js.html +225 -0
  46. package/documention/util_MapboxglPlugin.js.html +284 -0
  47. package/documention/view_MapViewMapboxgl.js.html +1882 -0
  48. package/documention/view_utils_ArcGISVectorTileLayerUtil.js.html +382 -0
  49. package/documention/view_utils_EchartsLayerUtil.js.html +194 -0
  50. package/documention/view_utils_IGSMapImageUtil.js.html +373 -0
  51. package/documention/view_utils_IGSTileLayerUtil.js.html +285 -0
  52. package/documention/view_utils_IGSVectorTileLayerUtil.js.html +379 -0
  53. package/documention/view_utils_MapVLayerUtil.js.html +197 -0
  54. package/documention/view_utils_Popup.js.html +525 -0
  55. package/documention/view_utils_Screenshot.js.html +320 -0
  56. package/documention/view_utils_WMSLayerUtil.js.html +337 -0
  57. package/documention/view_utils_WMTSLayerUtil.js.html +331 -0
  58. package/documention/view_utils_WebTileLayerUtil.js.html +284 -0
  59. package/documention/view_utils_echarts_EchartsLayerPlugin.js.html +419 -0
  60. package/documention/view_utils_mapV_MapVLayerPlugin.js.html +527 -0
  61. package/documention/view_utils_mapV_MapvBaseLayer.js.html +477 -0
  62. package/documention/view_utils_support_rasterLayerUtil.js.html +244 -0
  63. package/documention/view_utils_support_vectorLayerUtil.js.html +503 -0
  64. package/package.json +20 -20
  65. package/core/Base.js +0 -7
  66. package/core/index.js +0 -5
  67. package/index.js +0 -6
  68. package/overlay/D3Layer.js +0 -108
  69. package/overlay/EchartsLayer.js +0 -242
  70. package/overlay/ElsCubeLayer.js +0 -125
  71. package/overlay/MapvLayer.js +0 -298
  72. package/overlay/StreamLayer.js +0 -86
  73. package/overlay/TimeSpaceCubeLayer.js +0 -135
  74. package/overlay/dthree/mapbox-d3.css +0 -9
  75. package/overlay/echarts/MapCoordSys.js +0 -105
  76. package/overlay/echarts/MapModel.js +0 -0
  77. package/overlay/echarts/MapView.js +0 -0
  78. package/overlay/echarts/index.js +0 -4
  79. package/overlay/index.js +0 -31
  80. package/overlay/mapv/MapvBaseLayer.js +0 -299
  81. package/overlay/mapv/index.js +0 -5
  82. package/overlay/stream/GeojsonStreamLayer.js +0 -135
  83. package/overlay/stream/MapvStreamLayer.js +0 -79
  84. package/overlay/stream/index.js +0 -3
  85. package/overlay/stream/popup.css +0 -31
  86. package/service/index.js +0 -1
  87. package/service/socket/SocketService.js +0 -90
@@ -0,0 +1,682 @@
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 document/support/FeatureRenderView.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">document/support/FeatureRenderView.js</span>
125
+ </header>
126
+
127
+
128
+
129
+
130
+
131
+ <section>
132
+ <article>
133
+ <pre class="prettyprint source linenums"><code>import {
134
+ BaseRendererLayerView,
135
+ GeometryType,
136
+ RendererType,
137
+ SymbolType,
138
+ ClusterRenderer,
139
+ RandomRenderer,
140
+ RendererUtil
141
+ } from '@mapgis/webclient-common'
142
+ import MapboxglPlugin from '../../util/MapboxglPlugin'
143
+ import { updateStyleLayer } from '../../util/ConvertRendererToStyleLayerUtil'
144
+ import {
145
+ getClusterCirclePaint,
146
+ getRankCircleStyle,
147
+ getRankTextStyle,
148
+ getSymbolLayout,
149
+ getSymbolPaint,
150
+ getUnClusterCirclePaint,
151
+ getUniqueRendererFromRandomRenderer
152
+ } from './Utils'
153
+
154
+ // 要素渲染基类封装
155
+ class FeatureRenderView extends BaseRendererLayerView {
156
+ /**
157
+ * 添加图层视图
158
+ * @param {LayerEvent} event 图层事件
159
+ * @return {Promise&lt;LayerView>} 图层视图
160
+ */
161
+ onAdd(event) {
162
+ return this._addInnerLayer()
163
+ }
164
+
165
+ /**
166
+ * @description: 解析矢量数据
167
+ * @return {FeatureSet}
168
+ */
169
+ _processData() {
170
+ return new Promise((resolve) => {})
171
+ }
172
+
173
+ /**
174
+ * 移除图层视图
175
+ * @param {LayerEvent} event 图层事件
176
+ * @return {Promise&lt;LayerView>} 图层视图
177
+ */
178
+ onRemove(event) {
179
+ super.onRemove(event)
180
+ // 删除图层
181
+ this._removeLayers()
182
+ // 删除source
183
+ this._removeSources()
184
+ return Promise.resolve(this)
185
+ }
186
+
187
+ /**
188
+ * 更新图层视图
189
+ * @param {LayerViewUpdateEvent} event 图层事件
190
+ * @return {Promise&lt;LayerView>} 图层视图
191
+ */
192
+ onUpdate(event) {
193
+ const self = this
194
+ if (event.updateContent) {
195
+ event.updateContent.forEach((layerUpdateCotent) => {
196
+ if (
197
+ layerUpdateCotent &amp;&amp;
198
+ layerUpdateCotent.operationType === 'property'
199
+ ) {
200
+ switch (layerUpdateCotent.name) {
201
+ case 'opacity': {
202
+ self._updateState()
203
+ break
204
+ }
205
+ case 'visible': {
206
+ self._updateState()
207
+ break
208
+ }
209
+ default: {
210
+ break
211
+ }
212
+ }
213
+ }
214
+ if (layerUpdateCotent &amp;&amp; layerUpdateCotent.operationType === 'method') {
215
+ switch (layerUpdateCotent.name) {
216
+ case 'refresh': {
217
+ this._updateState()
218
+ break
219
+ }
220
+ default: {
221
+ break
222
+ }
223
+ }
224
+ }
225
+ })
226
+ }
227
+ return Promise.resolve(this)
228
+ }
229
+
230
+ _addInnerLayer() {
231
+ return this._processData().then((featureSet) => {
232
+ const layer = this.layer
233
+ const self = this
234
+ const innerView = this.innerView
235
+ this.featureSet = featureSet
236
+ const renderer = layer.renderer
237
+ return self._initInnerLayer(layer, innerView, featureSet, renderer)
238
+ })
239
+ }
240
+
241
+ /**
242
+ * @description: 初始化innnerLayer
243
+ * @param {Layer} 初始化图层
244
+ * @param {Object} innerView 地图
245
+ * @param {FeatureSet} 预渲染要素
246
+ * @param {Renderer} renderer
247
+ * @return {Object}
248
+ */
249
+ _initInnerLayer(layer, innerView, featureSet, renderer) {
250
+ const self = this
251
+ function init() {
252
+ // 是否开启聚类
253
+ let _isCluster = false
254
+ if (renderer instanceof ClusterRenderer) {
255
+ _isCluster = true
256
+ }
257
+ innerView.addSource(layer.id, {
258
+ type: 'geojson',
259
+ data: self._convertSourceData(featureSet),
260
+ // 是否开启聚类
261
+ cluster: _isCluster
262
+ })
263
+ // 设置要删除的sourceID数组
264
+ self.sourceIDs = []
265
+ // 设置要删除的layerID数组
266
+ self.layerIDs = []
267
+ // 记录已添加的sourceID
268
+ self.sourceIDs.push(layer.id)
269
+ // 记录当前的专题图类型
270
+ self.renderType = renderer.type
271
+ // 更新样式图层状态
272
+ self._updateState(renderer)
273
+ }
274
+
275
+ return new Promise((resolve) => {
276
+ let mapLoadedInterval
277
+ const setup = () => {
278
+ init()
279
+ resolve(self)
280
+ if (mapLoadedInterval) {
281
+ clearInterval(mapLoadedInterval)
282
+ }
283
+ }
284
+ if (innerView.loaded()) {
285
+ setup()
286
+ } else {
287
+ innerView.once('load', setup)
288
+ mapLoadedInterval = setInterval(() => {
289
+ if (innerView.loaded()) setup()
290
+ }, 16)
291
+ }
292
+ })
293
+ }
294
+
295
+ /**
296
+ * @description: renderer更新事件驱动
297
+ * @param {*} event
298
+ * @return {*}
299
+ */
300
+ _rendererChangeAction(event) {
301
+ this._updateState()
302
+ }
303
+
304
+ /**
305
+ * @description: 更新状态
306
+ * @param {*} renderer
307
+ * @return {*}
308
+ */
309
+ _updateState(renderer) {
310
+ const { innerView, layer } = this
311
+ if (!innerView) return
312
+ if (!renderer) {
313
+ renderer = layer.renderer
314
+ }
315
+ const opacity = layer._opacity
316
+ const visible = this._getLayerViewVisible()
317
+ const style = innerView.style
318
+ const paint = {}
319
+ const layout = {}
320
+ // 判断是否添加过图层
321
+ if (this.layerIDs.length > 0) {
322
+ // 判断是否更换了专题图类型
323
+ if (renderer.type !== this.renderType) {
324
+ // 删除先前添加的图层
325
+ this._removeLayers()
326
+ // 重新添加图层
327
+ this._addLayers()
328
+ // 更新专题图类型
329
+ this.renderType = renderer.type
330
+ }
331
+ }
332
+ // 没添加过图层,则添加图层
333
+ else {
334
+ this._addLayers()
335
+ }
336
+ // 更新专题图样式
337
+ switch (renderer.type) {
338
+ case RendererType.cluster:
339
+ // 更新圆形聚类样式
340
+ const circlePaint = getClusterCirclePaint(renderer, {
341
+ // 设置图层透明度
342
+ opacity
343
+ })
344
+ Object.keys(circlePaint).forEach((key) => {
345
+ style.setPaintProperty(`${layer.id}_cluster`, key, circlePaint[key])
346
+ })
347
+ // 更新文字样式
348
+ const symbolLayout = getSymbolLayout(renderer)
349
+ Object.keys(symbolLayout).forEach((key) => {
350
+ style.setLayoutProperty(
351
+ `${layer.id}_cluster_count`,
352
+ key,
353
+ symbolLayout[key]
354
+ )
355
+ })
356
+ const symbolPaint = getSymbolPaint(renderer, {
357
+ // 图层透明度
358
+ opacity
359
+ })
360
+ Object.keys(symbolPaint).forEach((key) => {
361
+ style.setPaintProperty(
362
+ `${layer.id}_cluster_count`,
363
+ key,
364
+ symbolPaint[key]
365
+ )
366
+ })
367
+ // 更新不在聚类范围内的样式
368
+ if (renderer.defaultSymbol) {
369
+ const unClusterPaint = getUnClusterCirclePaint(renderer, {
370
+ // 设置图层透明度
371
+ opacity
372
+ })
373
+ Object.keys(unClusterPaint).forEach((key) => {
374
+ style.setPaintProperty(
375
+ `${layer.id}_unclustered_point`,
376
+ key,
377
+ unClusterPaint[key]
378
+ )
379
+ })
380
+ }
381
+ break
382
+ case RendererType.random:
383
+ // 将随机专题图转为单值专题图,MapBox必须如此
384
+ const _renderer = getUniqueRendererFromRandomRenderer(
385
+ renderer,
386
+ this.featureSet
387
+ )
388
+ // 设置仅与颜色相关的专题图,随机专题图
389
+ this._setColorRenderer(
390
+ _renderer,
391
+ visible,
392
+ opacity,
393
+ paint,
394
+ layout,
395
+ style,
396
+ layer
397
+ )
398
+ break
399
+ case RendererType.rank:
400
+ // 获取要素数组
401
+ const _features = this.featureSet.features
402
+ // 根据等级符号专题图,更新要素上的符号
403
+ RendererUtil.updateRenderer(_features, renderer)
404
+ // 根据不同类型的symbol设置样式
405
+ let _style
406
+ const _symbol = renderer.symbol
407
+ if (_symbol) {
408
+ switch (_symbol.type) {
409
+ case SymbolType.simpleMarker:
410
+ default:
411
+ // 获取等级符号专题图的绘制样式
412
+ _style = getRankCircleStyle(this.featureSet.features, renderer)
413
+ break
414
+ case SymbolType.text:
415
+ // 获取等级符号专题图的绘制样式
416
+ _style = getRankTextStyle(this.featureSet.features, renderer)
417
+ break
418
+ }
419
+ }
420
+ // 更新样式
421
+ Object.keys(_style.paint).forEach((key) => {
422
+ style.setPaintProperty(`${layer.id}`, key, _style.paint[key])
423
+ })
424
+ Object.keys(_style.layout).forEach((key) => {
425
+ style.setLayoutProperty(`${layer.id}`, key, _style.layout[key])
426
+ })
427
+ break
428
+ default:
429
+ // 设置仅与颜色相关的专题图,单值、统一、分段专题图
430
+ this._setColorRenderer(
431
+ renderer,
432
+ visible,
433
+ opacity,
434
+ paint,
435
+ layout,
436
+ style,
437
+ layer
438
+ )
439
+ break
440
+ }
441
+ innerView._update(true)
442
+ }
443
+
444
+ /**
445
+ * 设置仅与颜色相关的专题图,单值、统一、分段、随机专题图
446
+ * @private
447
+ * */
448
+ _setColorRenderer(renderer, visible, opacity, paint, layout, style, layer) {
449
+ // 判断当前渲染图层类型
450
+ const renderType = this._getMapboxglStyleLayerRenderType()
451
+ // 更新style样式
452
+ updateStyleLayer(renderer, renderType, visible, opacity, paint, layout)
453
+ Object.keys(paint).forEach((key) => {
454
+ style.setPaintProperty(layer.id, key, paint[key])
455
+ })
456
+ Object.keys(layout).forEach((key) => {
457
+ style.setLayoutProperty(layer.id, key, layout[key])
458
+ })
459
+ }
460
+
461
+ /**
462
+ * @description: 更新sourceData
463
+ * @param {*} featureSet
464
+ * @return {*}
465
+ */
466
+ _convertSourceData(featureSet) {
467
+ const features = featureSet.features
468
+ const geojson = {
469
+ type: 'FeatureCollection',
470
+ features: []
471
+ }
472
+ geojson.features = features.map((feature) =>
473
+ MapboxglPlugin.convertToGeoJSON(feature)
474
+ )
475
+ return geojson
476
+ }
477
+
478
+ /**
479
+ * @description: 根据图层类型获取mapboxgl渲染图层类型
480
+ * @return {*}
481
+ */
482
+ _getMapboxglStyleLayerRenderType() {
483
+ // 后续需要增加热力图等的引用
484
+ const layer = this.layer
485
+ // 根据renderer渲染的符号类型创建对应的图层
486
+ const renderer = layer.renderer || {}
487
+ const symbol = renderer.symbol || renderer.defaultSymbol
488
+ const geometryType = layer.geometryType
489
+ let renderType = 'circle'
490
+ switch (geometryType) {
491
+ case GeometryType.polygon:
492
+ case GeometryType.multiPolygon:
493
+ case 'Reg': {
494
+ if (renderer instanceof RandomRenderer) {
495
+ renderType = 'fill'
496
+ } else if (
497
+ symbol.type === SymbolType.text ||
498
+ symbol.type === SymbolType.pictureMarker
499
+ ) {
500
+ renderType = 'symbol'
501
+ } else if (symbol.type === SymbolType.simpleMarker) {
502
+ renderType = 'circle'
503
+ } else {
504
+ renderType = 'fill'
505
+ }
506
+ break
507
+ }
508
+ case 'Lin':
509
+ case GeometryType.multiLineString:
510
+ case GeometryType.lineString: {
511
+ renderType = 'line'
512
+ break
513
+ }
514
+ case 'Pnt':
515
+ case GeometryType.point:
516
+ case GeometryType.multiPoint: {
517
+ if (renderer instanceof RandomRenderer) {
518
+ renderType = 'circle'
519
+ } else if (
520
+ symbol.type === SymbolType.text ||
521
+ symbol.type === SymbolType.pictureMarker
522
+ ) {
523
+ renderType = 'symbol'
524
+ } else {
525
+ renderType = 'circle'
526
+ }
527
+ break
528
+ }
529
+ default: {
530
+ break
531
+ }
532
+ }
533
+ return renderType
534
+ }
535
+
536
+ /**
537
+ * 添加图层
538
+ * @private
539
+ * */
540
+ _addLayers() {
541
+ // 获取必要对象
542
+ const { innerView, layer } = this
543
+ const renderer = layer.renderer || {}
544
+ // 根据专题图类型来添加图层
545
+ switch (renderer.type) {
546
+ case RendererType.cluster:
547
+ // 获取圆形聚类样式
548
+ const circlePaint = getClusterCirclePaint(renderer)
549
+ // 添加圆形聚类图层
550
+ innerView.addLayer({
551
+ // 内部图层id
552
+ id: `${layer.id}_cluster`,
553
+ // 图层类型
554
+ type: 'circle',
555
+ // 源数据id
556
+ source: layer.id,
557
+ // 设置过滤条件
558
+ filter: ['has', 'point_count'],
559
+ // 设置聚类样式
560
+ paint: circlePaint
561
+ })
562
+ // 记录已添加的layerID
563
+ this.layerIDs.push(`${layer.id}_cluster`)
564
+ // 获取文字聚类样式
565
+ const symbolLayout = getSymbolLayout(renderer)
566
+ const symbolPaint = getSymbolPaint(renderer)
567
+ // 添加文字聚类图层
568
+ innerView.addLayer({
569
+ // 内部图层id
570
+ id: `${layer.id}_cluster_count`,
571
+ // 图层类型
572
+ type: 'symbol',
573
+ // 设置过滤条件
574
+ source: layer.id,
575
+ // 设置过滤条件
576
+ filter: ['has', 'point_count'],
577
+ // 设置聚类样式
578
+ layout: symbolLayout,
579
+ // 设置聚类样式
580
+ paint: symbolPaint
581
+ })
582
+ // 记录已添加的layerID
583
+ this.layerIDs.push(`${layer.id}_cluster_count`)
584
+ // 设置不符合聚类条件时的样式
585
+ if (renderer.defaultSymbol) {
586
+ // 添加图层
587
+ innerView.addLayer({
588
+ // 内部图层id
589
+ id: `${layer.id}_unclustered_point`,
590
+ // 图层类型
591
+ type: 'circle',
592
+ // 源数据id
593
+ source: layer.id,
594
+ // 设置过滤条件
595
+ filter: ['!', ['has', 'point_count']],
596
+ // 设置不符合聚类条件时的样式
597
+ paint: getUnClusterCirclePaint(renderer)
598
+ })
599
+ // 记录已添加的layerID
600
+ this.layerIDs.push(`${layer.id}_unclustered_point`)
601
+ }
602
+ break
603
+ default:
604
+ // 判断当前渲染图层类型
605
+ const renderType = this._getMapboxglStyleLayerRenderType()
606
+ // 初始化图层
607
+ innerView.addLayer({
608
+ id: layer.id,
609
+ source: layer.id,
610
+ type: renderType
611
+ })
612
+ // 记录已添加的layerID
613
+ this.layerIDs.push(layer.id)
614
+ break
615
+ }
616
+ }
617
+
618
+ /**
619
+ * 删除当前图层视图中已添加的图层
620
+ * @private
621
+ */
622
+ _removeLayers() {
623
+ // 删除先前添加的图层
624
+ for (let i = 0; i &lt; this.layerIDs.length; i++) {
625
+ this.innerView.removeLayer(this.layerIDs[i])
626
+ }
627
+ this.layerIDs = []
628
+ }
629
+
630
+ /**
631
+ * 删除当前图层视图中已添加的数据
632
+ * @private
633
+ */
634
+ _removeSources() {
635
+ for (let i = 0; i &lt; this.sourceIDs.length; i++) {
636
+ this.innerView.removeSource(this.sourceIDs[i])
637
+ }
638
+ this.sourceIDs = []
639
+ }
640
+ }
641
+ export default FeatureRenderView
642
+ </code></pre>
643
+ </article>
644
+ </section>
645
+
646
+
647
+
648
+
649
+ </div>
650
+
651
+ <footer class="footer">
652
+ <div class="content has-text-centered">
653
+ <p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
654
+ <p class="sidebar-created-by">
655
+ <a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
656
+ <a href="http://192.168.82.89:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
657
+ </p>
658
+ </div>
659
+ </footer>
660
+
661
+ </div>
662
+ <div id="side-nav" class="side-nav">
663
+ <div style="margin-bottom: 10px;">
664
+ <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
665
+ </div>
666
+ <div style="margin-bottom: 10px;">
667
+ <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
668
+ </div>
669
+ <div style="margin-bottom: 10px;">
670
+ <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
671
+ </div>
672
+ <div>
673
+ <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
674
+ </div>
675
+ </div>
676
+ </div>
677
+ <script src="scripts/linenumber.js"> </script>
678
+
679
+ <script src="scripts/search.js"> </script>
680
+
681
+ </body>
682
+ </html>