@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
package/documention/util_ConvertRendererToStyleLayerUtil.js.html DELETED
@@ -1,844 +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 util/ConvertRendererToStyleLayerUtil.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">util/ConvertRendererToStyleLayerUtil.js</span>
125
- </header>
126
-
127
-
128
-
129
-
130
-
131
- <section>
132
- <article>
133
- <pre class="prettyprint source linenums"><code>import {
134
- RendererType,
135
- SimpleFillSymbol,
136
- SimpleLineSymbol,
137
- SimpleMarkerSymbol,
138
- SymbolType,
139
- defaultValue
140
- } from '@mapgis/webclient-common'
141
- import MapboxglPlugin from './MapboxglPlugin'
142
- import UniqueValueSteps from './support/UniqueValueSteps'
143
- import ClassBreakSteps from './support/ClassBreakSteps'
144
-
145
- /**
146
- * @description: 运算符计算
147
- * @param {*} map 取值映射，取值表示的mapboxgl表达式
148
- * @param {*} calcArr 计算组
149
- * @param {*} calcFlag 运算符
150
- * @param {*}
151
- * @return {*}
152
- */
153
- function setFeatureAttributeMap(map, calcArr, calcFlag, currentInfo) {
154
- while (calcArr.findIndex((v) => calcFlag.some((t) => t === v)) > -1) {
155
- currentInfo.index += 1
156
- const key = `calc_${currentInfo.index}`
157
- const flagIndex = calcArr.findIndex((v) => calcFlag.some((t) => t === v))
158
- const first =
159
- map[calcArr[flagIndex - 1]] ||
160
- (currentInfo.isNum
161
- ? parseFloat(calcArr[flagIndex - 1])
162
- : calcArr[flagIndex - 1])
163
- const end =
164
- map[calcArr[flagIndex + 1]] ||
165
- (currentInfo.isNum
166
- ? parseFloat(calcArr[flagIndex + 1])
167
- : calcArr[flagIndex + 1])
168
- map[key] = [calcArr[flagIndex], first, end]
169
- currentInfo.key = key
170
- currentInfo.expression = calcArr.splice(flagIndex - 1, 3, key)
171
- }
172
- }
173
-
174
- /**
175
- * @description: 解析表达式为mapboxgl表达式
176
- * @param {*} expression
177
- * @return {*}
178
- */
179
- function parseExpressionToMapboxglExpress(expression, isNum) {
180
- // 由于表达式规则的复杂性，将符号定义的字段表达式转换为mapboxgl表达式过程会出现解析错误，提前进行错误判断。
181
- try {
182
- let mapboxglExpression = expression
183
- // $feature.name
184
- // $feature.val / 10
185
- // 将$feature.xxx 替换为get表达式
186
- const features = mapboxglExpression
187
- .replace(/\s/g, '')
188
- .match(/\$feature\.[^+-/*%>=&lt;]+/g)
189
- if (!features || features.length === 0) return null
190
- const featureAttributeMap = {}
191
- const currentInfo = {
192
- index: 0,
193
- key: null,
194
- isNum
195
- }
196
- features.forEach((v) => {
197
- currentInfo.index += 1
198
- const key = `calc_${currentInfo.index}`
199
- currentInfo.key = key
200
- featureAttributeMap[key] = isNum
201
- ? ['to-number', ['get', v.split('.')[1]]]
202
- : ['get', v.split('.')[1]]
203
- mapboxglExpression = mapboxglExpression.replace(v, `${key}`)
204
- })
205
- // 按照算法运算符分段 + - * / %
206
- // 按照逻辑运算符分段 &lt; &lt;= == > >=
207
- // 添加空格处理
208
- const flagMatchs = mapboxglExpression.match(/>=|&lt;=|==|\+|-|\*|\/|>|&lt;|=/)
209
- if (flagMatchs &amp;&amp; flagMatchs.length > 0) {
210
- flagMatchs.forEach((v) => {
211
- mapboxglExpression = mapboxglExpression.replace(v, ` ${v} `)
212
- })
213
- }
214
- const calcArr = mapboxglExpression.split(' ').filter((v) => v !== '')
215
-
216
- setFeatureAttributeMap(
217
- featureAttributeMap,
218
- calcArr,
219
- ['*', '/', '%'],
220
- currentInfo
221
- )
222
- setFeatureAttributeMap(
223
- featureAttributeMap,
224
- calcArr,
225
- ['+', '-'],
226
- currentInfo
227
- )
228
- setFeatureAttributeMap(
229
- featureAttributeMap,
230
- calcArr,
231
- ['&lt;', '&lt;=', '>', '>='],
232
- currentInfo
233
- )
234
- setFeatureAttributeMap(featureAttributeMap, calcArr, ['=='], currentInfo)
235
- if (currentInfo.key) {
236
- return featureAttributeMap[currentInfo.key]
237
- }
238
- } catch (err) {}
239
- }
240
-
241
- /**
242
- * @description: 解析字段表达式
243
- * @param {*} field
244
- * @param {*} expression
245
- * @return {*}
246
- */
247
- function parseFieldAndExpression(field, expression, isNum) {
248
- if (field) return isNum ? ['to-number', ['get', field]] : ['get', field]
249
- const express = parseExpressionToMapboxglExpress(expression, isNum)
250
- if (express) return express
251
- return ['get', 'undefined']
252
- }
253
-
254
- // 转换定义的symbol
255
- function covertSimpleLineSymbol(
256
- type,
257
- paintStyle,
258
- layoutStyle,
259
- symbol,
260
- visible,
261
- opacity
262
- ) {
263
- const color = MapboxglPlugin.applyVisibleAndOpacityToColor(
264
- symbol.color,
265
- visible,
266
- opacity
267
- )
268
- paintStyle['line-color'] = color.toCssRGBString()
269
- paintStyle['line-opacity'] = symbol.opacity
270
- paintStyle['line-width'] = symbol.width
271
- layoutStyle['line-cap'] = symbol.cap
272
- layoutStyle['line-miter-limit'] = symbol.miterLimit
273
- layoutStyle['line-join'] = symbol.join
274
- const lineDasharray = MapboxglPlugin.convertLineStyle(
275
- symbol.style,
276
- symbol.cap === 'butt'
277
- )
278
- if (lineDasharray) {
279
- paintStyle['line-dasharray'] = lineDasharray
280
- }
281
- // 无法设置marker
282
- }
283
-
284
- function covertSimpleFillSymbol(
285
- type,
286
- paintStyle,
287
- layoutStyle,
288
- symbol,
289
- visible,
290
- opacity
291
- ) {
292
- switch (type) {
293
- case 'fill': {
294
- const color = MapboxglPlugin.applyVisibleAndOpacityToColor(
295
- symbol.color,
296
- visible,
297
- opacity
298
- )
299
- const outline = MapboxglPlugin.applyVisibleAndOpacityToColor(
300
- symbol.outline.color,
301
- visible,
302
- opacity
303
- )
304
- paintStyle['fill-color'] = color.toCssRGBString()
305
- paintStyle['fill-opacity'] = color.alpha
306
- paintStyle['fill-outline-color'] = outline.toCssRGBAString()
307
- break
308
- }
309
- default: {
310
- break
311
- }
312
- }
313
- }
314
-
315
- // 转换定义的symbol
316
- function convertPictureMarkerSymbol(
317
- type,
318
- paintStyle,
319
- layoutStyle,
320
- symbol,
321
- visible,
322
- opacity
323
- ) {
324
- // ----------------- paint -----------------------------
325
- const color = MapboxglPlugin.applyVisibleAndOpacityToColor(
326
- symbol.color,
327
- visible,
328
- opacity
329
- )
330
- paintStyle['icon-color'] = color.toCssRGBString()
331
- paintStyle['icon-opacity'] = color.alpha
332
- // ----------------- layout -----------------------------
333
- layoutStyle['icon-allow-overlap'] = false
334
- layoutStyle['icon-size'] = Math.max(symbol.width, symbol.height) / 20
335
- layoutStyle['icon-rotate'] = symbol.angle
336
- layoutStyle['icon-image'] = 'marker-15'
337
- layoutStyle['icon-offset'] = [symbol.xoffset, symbol.yoffset]
338
- }
339
-
340
- // 转换定义的symbol
341
- function convertTextSymbol(
342
- type,
343
- paintStyle,
344
- layoutStyle,
345
- symbol,
346
- visible,
347
- opacity
348
- ) {
349
- // ----------------- paint -----------------------------
350
- const color = MapboxglPlugin.applyVisibleAndOpacityToColor(
351
- symbol.color,
352
- visible,
353
- opacity
354
- )
355
- const haloColor = MapboxglPlugin.applyVisibleAndOpacityToColor(
356
- symbol.haloColor,
357
- visible,
358
- opacity
359
- )
360
- paintStyle['text-color'] = color.toCssRGBString()
361
- paintStyle['text-opacity'] = color.alpha
362
- paintStyle['text-halo-color'] = haloColor.toCssRGBAString()
363
- paintStyle['text-halo-width'] = symbol.haloSize
364
- // ----------------- layout -----------------------------
365
- // 设置默认文字field
366
- layoutStyle['text-field'] = symbol.text || ''
367
- // 开启注记避让
368
- layoutStyle['text-allow-overlap'] = false
369
- layoutStyle['text-font'] = ['Open Sans Regular', 'Arial Unicode MS Regular']
370
- layoutStyle['text-size'] = symbol.font.size
371
- layoutStyle['text-justify'] = symbol.horizontalAlignment
372
- layoutStyle['text-letter-spacing'] = symbol.kerning ? 0.1 : 0
373
- layoutStyle['text-rotate'] =
374
- symbol.rotated &amp;&amp; symbol.angle !== 0 ? symbol.angle : 0
375
- layoutStyle['text-offset'] = [symbol.xoffset, symbol.yoffset]
376
- layoutStyle['text-line-height'] = symbol.lineHeight ? 1.2 : 0
377
- layoutStyle['text-max-width'] = defaultValue(symbol.lineWidth, 192)
378
- // 不支持文字基线
379
- layoutStyle['text-anchor'] = 'center'
380
- switch (symbol.verticalAlignment) {
381
- case 'top': {
382
- switch (symbol.horizontalAlignment) {
383
- case 'left': {
384
- layoutStyle['text-anchor'] = 'top-left'
385
- break
386
- }
387
- case 'right': {
388
- layoutStyle['text-anchor'] = 'top-right'
389
- break
390
- }
391
- default: {
392
- layoutStyle['text-anchor'] = 'top'
393
- break
394
- }
395
- }
396
- break
397
- }
398
- case 'bottom': {
399
- switch (symbol.horizontalAlignment) {
400
- case 'left': {
401
- layoutStyle['text-anchor'] = 'bottom-left'
402
- break
403
- }
404
- case 'right': {
405
- layoutStyle['text-anchor'] = 'bottom-right'
406
- break
407
- }
408
- default: {
409
- layoutStyle['text-anchor'] = 'bottom'
410
- break
411
- }
412
- }
413
- break
414
- }
415
- default: {
416
- switch (symbol.horizontalAlignment) {
417
- case 'left': {
418
- layoutStyle['text-anchor'] = 'left'
419
- break
420
- }
421
- case 'right': {
422
- layoutStyle['text-anchor'] = 'right'
423
- break
424
- }
425
- default: {
426
- layoutStyle['text-anchor'] = 'center'
427
- break
428
- }
429
- }
430
- }
431
- }
432
- }
433
-
434
- function covertSimpleMarkerSymbol(
435
- type,
436
- paintStyle,
437
- layoutStyle,
438
- symbol,
439
- visible,
440
- opacity
441
- ) {
442
- switch (type) {
443
- case 'circle': {
444
- const x = symbol.xoffset
445
- const y = symbol.yoffset
446
- paintStyle['circle-translate'] = [parseFloat(x), parseFloat(y)]
447
- const color = MapboxglPlugin.applyVisibleAndOpacityToColor(
448
- symbol.color,
449
- visible,
450
- opacity
451
- )
452
- paintStyle['circle-opacity'] = color.alpha
453
- paintStyle['circle-color'] = color.toCssRGBString()
454
- // stroke color
455
- const strokeColor = MapboxglPlugin.applyVisibleAndOpacityToColor(
456
- symbol.outline.color,
457
- visible,
458
- opacity
459
- )
460
- paintStyle['circle-stroke-color'] = strokeColor.toCssRGBString()
461
- paintStyle['circle-stroke-opacity'] = strokeColor.alpha
462
- paintStyle['circle-stroke-width'] = symbol.outline.width
463
- // size
464
- paintStyle['circle-radius'] = symbol.size / 2
465
-
466
- // 无法支持angle
467
- // 无法支持path
468
- // 无法支持style
469
- break
470
- }
471
- default: {
472
- break
473
- }
474
- }
475
- }
476
-
477
- function convertSymbol(
478
- symbol,
479
- renderType,
480
- paintStyle,
481
- layoutStyle,
482
- visible,
483
- opacity
484
- ) {
485
- switch (renderType) {
486
- case 'line': {
487
- if (!(symbol instanceof SimpleLineSymbol)) {
488
- symbol = new SimpleLineSymbol()
489
- }
490
- covertSimpleLineSymbol(
491
- renderType,
492
- paintStyle,
493
- layoutStyle,
494
- symbol,
495
- visible,
496
- opacity
497
- )
498
- break
499
- }
500
- case 'fill': {
501
- if (!(symbol instanceof SimpleFillSymbol)) {
502
- symbol = new SimpleFillSymbol()
503
- }
504
- covertSimpleFillSymbol(
505
- renderType,
506
- paintStyle,
507
- layoutStyle,
508
- symbol,
509
- visible,
510
- opacity
511
- )
512
- break
513
- }
514
- case 'circle': {
515
- if (!(symbol instanceof SimpleMarkerSymbol)) {
516
- symbol = new SimpleMarkerSymbol()
517
- }
518
- covertSimpleMarkerSymbol(
519
- renderType,
520
- paintStyle,
521
- layoutStyle,
522
- symbol,
523
- visible,
524
- opacity
525
- )
526
- break
527
- }
528
- case 'symbol': {
529
- if (symbol.type === SymbolType.text) {
530
- convertTextSymbol(
531
- renderType,
532
- paintStyle,
533
- layoutStyle,
534
- symbol,
535
- visible,
536
- opacity
537
- )
538
- } else if (symbol.type === SymbolType.pictureMarker) {
539
- convertPictureMarkerSymbol(
540
- renderType,
541
- paintStyle,
542
- layoutStyle,
543
- symbol,
544
- visible,
545
- opacity
546
- )
547
- }
548
- break
549
- }
550
- default: {
551
- break
552
- }
553
- }
554
- }
555
-
556
- /**
557
- * @description: 更新统一专题图
558
- * @param {*} renderer
559
- * @param {*} renderType
560
- * @param {*} paint
561
- * @param {*} layout
562
- * @param {*} visible
563
- * @param {*} opacity
564
- * @return {*}
565
- */
566
- function updateSimpleRenderer(
567
- renderer,
568
- renderType,
569
- paint,
570
- layout,
571
- visible,
572
- opacity
573
- ) {
574
- const symbol = renderer.symbol
575
- // 根据不同图层类型
576
- convertSymbol(symbol, renderType, paint, layout, visible, opacity)
577
- }
578
-
579
- /**
580
- * @description: 更新单值专题图
581
- * @param {*} renderer
582
- * @param {*} renderType
583
- * @param {*} paint
584
- * @param {*} layout
585
- * @param {*} visible
586
- * @param {*} opacity
587
- * @return {*}
588
- */
589
- function updateUniqueValueRenderer(
590
- renderer,
591
- renderType,
592
- paint,
593
- layout,
594
- visible,
595
- opacity
596
- ) {
597
- const symbol = renderer.defaultSymbol
598
- convertSymbol(symbol, renderType, paint, layout, visible, opacity)
599
- const expression = parseFieldAndExpression(
600
- renderer.field,
601
- renderer.valueExpression
602
- )
603
- const paintStepObject = {}
604
- const layoutStepObject = {}
605
- Object.keys(paint).forEach((key) => {
606
- paintStepObject[key] = new UniqueValueSteps(expression, paint[key])
607
- })
608
- Object.keys(layout).forEach((key) => {
609
- layoutStepObject[key] = new UniqueValueSteps(expression, layout[key])
610
- })
611
-
612
- const uniqueValueInfos = renderer.uniqueValueInfos || []
613
- uniqueValueInfos.forEach((info) => {
614
- // 不能走默认样式，否者会一致对属性分段
615
- const uniquePaint = {}
616
- const uniqueLayout = {}
617
- convertSymbol(
618
- info.symbol,
619
- renderType,
620
- uniquePaint,
621
- uniqueLayout,
622
- info.visible,
623
- opacity
624
- )
625
- const name = info.value
626
-
627
- // 添加分段样式
628
- Object.keys(paint).forEach((key) => {
629
- if (!paintStepObject[key]) {
630
- paintStepObject[key] = new UniqueValueSteps(
631
- expression,
632
- uniquePaint[key]
633
- )
634
- }
635
- paintStepObject[key].addStep(name, uniquePaint[key])
636
- })
637
- Object.keys(layout).forEach((key) => {
638
- if (!layoutStepObject[key]) {
639
- layoutStepObject[key] = new UniqueValueSteps(
640
- expression,
641
- uniqueLayout[key]
642
- )
643
- }
644
- layoutStepObject[key].addStep(name, uniqueLayout[key])
645
- })
646
- })
647
- // 重新设置style
648
- Object.keys(paintStepObject).forEach((key) => {
649
- paint[key] = paintStepObject[key].toExpress()
650
- })
651
- Object.keys(layoutStepObject).forEach((key) => {
652
- layout[key] = layoutStepObject[key].toExpress()
653
- })
654
- }
655
-
656
- /**
657
- * @description: 分段专题图渲染
658
- * @param {*} renderer
659
- * @param {*} renderType
660
- * @param {*} paint
661
- * @param {*} layout
662
- * @param {*} visible
663
- * @param {*} opacity
664
- * @return {*}
665
- */
666
- function updateClassBreakRenderer(
667
- renderer,
668
- renderType,
669
- paint,
670
- layout,
671
- visible,
672
- opacity
673
- ) {
674
- const symbol = renderer.defaultSymbol
675
- convertSymbol(symbol, renderType, paint, layout, visible, opacity)
676
- const expression = parseFieldAndExpression(
677
- renderer.field,
678
- renderer.valueExpression,
679
- true
680
- )
681
- const paintStepObject = {}
682
- const layoutStepObject = {}
683
-
684
- Object.keys(paint).forEach((key) => {
685
- paintStepObject[key] = new ClassBreakSteps(expression, paint[key])
686
- })
687
- Object.keys(layout).forEach((key) => {
688
- layoutStepObject[key] = new ClassBreakSteps(expression, layout[key])
689
- })
690
-
691
- const classBreakInfos = renderer.classBreakInfos || []
692
- classBreakInfos.forEach((info) => {
693
- const classBreakPaint = {}
694
- const classBreakLayout = {}
695
- convertSymbol(
696
- info.symbol,
697
- renderType,
698
- classBreakPaint,
699
- classBreakLayout,
700
- info.visible,
701
- opacity
702
- )
703
- // 添加分段样式
704
- Object.keys(paint).forEach((key) => {
705
- if (!paintStepObject[key]) {
706
- paintStepObject[key] = new ClassBreakSteps(
707
- expression,
708
- classBreakPaint[key]
709
- )
710
- }
711
- paintStepObject[key].addStep(
712
- info.minValue,
713
- info.maxValue,
714
- classBreakPaint[key]
715
- )
716
- })
717
-
718
- Object.keys(layout).forEach((key) => {
719
- if (!layoutStepObject[key]) {
720
- layoutStepObject[key] = new ClassBreakSteps(
721
- expression,
722
- classBreakLayout[key]
723
- )
724
- }
725
- layoutStepObject[key].addStep(
726
- info.minValue,
727
- info.maxValue,
728
- classBreakLayout[key]
729
- )
730
- })
731
- })
732
- // 重新设置style
733
- Object.keys(paintStepObject).forEach((key) => {
734
- paint[key] = paintStepObject[key].toExpress()
735
- })
736
- Object.keys(layoutStepObject).forEach((key) => {
737
- layout[key] = layoutStepObject[key].toExpress()
738
- })
739
- }
740
-
741
- /**
742
- * @description: 将renderer转换为styleLayer样式
743
- * @param {*} renderer 渲染器
744
- * @param {*} renderType 渲染类型
745
- * @param {*} visible 显示或隐藏
746
- * @param {*} opacity 透明度
747
- * @param {*} paint 绘制属性
748
- * @param {*} layout 布局属性
749
- * @return {*}
750
- */
751
- function updateStyleLayer(
752
- renderer,
753
- renderType,
754
- visible,
755
- opacity,
756
- paint,
757
- layout
758
- ) {
759
- // 针对renderer渲染，可参考common层renderer的解析
760
- switch (renderer.type) {
761
- case RendererType.simple: {
762
- updateSimpleRenderer(
763
- renderer,
764
- renderType,
765
- paint,
766
- layout,
767
- visible,
768
- opacity
769
- )
770
- break
771
- }
772
- case RendererType.uniqueValue: {
773
- updateUniqueValueRenderer(
774
- renderer,
775
- renderType,
776
- paint,
777
- layout,
778
- visible,
779
- opacity
780
- )
781
- break
782
- }
783
- case RendererType.classBreak: {
784
- updateClassBreakRenderer(
785
- renderer,
786
- renderType,
787
- paint,
788
- layout,
789
- visible,
790
- opacity
791
- )
792
- break
793
- }
794
- case RendererType.random: {
795
- break
796
- }
797
- default: {
798
- break
799
- }
800
- }
801
- }
802
-
803
- export { updateStyleLayer, convertSymbol }
804
- </code></pre>
805
- </article>
806
- </section>
807
-
808
-
809
-
810
-
811
- </div>
812
-
813
- <footer class="footer">
814
- <div class="content has-text-centered">
815
- <p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
816
- <p class="sidebar-created-by">
817
- <a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
818
- <a href="http://192.168.82.89:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
819
- </p>
820
- </div>
821
- </footer>
822
-
823
- </div>
824
- <div id="side-nav" class="side-nav">
825
- <div style="margin-bottom: 10px;">
826
- <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
827
- </div>
828
- <div style="margin-bottom: 10px;">
829
- <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
830
- </div>
831
- <div style="margin-bottom: 10px;">
832
- <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
833
- </div>
834
- <div>
835
- <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
836
- </div>
837
- </div>
838
- </div>
839
- <script src="scripts/linenumber.js"> </script>
840
-
841
- <script src="scripts/search.js"> </script>
842
-
843
- </body>
844
- </html>