@mapgis/webclient-mapboxgl-plugin 10.3.4 → 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.
- package/README.md +51 -124
- package/dist/es5/webclient-common.min.js +90 -0
- package/dist/es5/webclient-mapboxgl-plugin.min.js +1 -0
- package/dist/webclient-mapboxgl-plugin-es6.min.js +1 -0
- package/documention/EchartsLayer.html +379 -0
- package/documention/MapViewMapboxgl.html +3587 -0
- package/documention/Popup.html +1523 -0
- package/documention/Screenshot.html +1089 -0
- package/documention/SketchEditorMapboxgl.html +3383 -0
- package/documention/document_ArcGISVectorTileLayerView.js.html +265 -0
- package/documention/document_EchartsLayerView.js.html +246 -0
- package/documention/document_GraphicsLayerView.js.html +314 -0
- package/documention/document_IGSFeatureLayerView.js.html +218 -0
- package/documention/document_IGSMapImageLayerView.js.html +240 -0
- package/documention/document_IGSTileLayerView.js.html +236 -0
- package/documention/document_IGSVectorTileLayerView.js.html +264 -0
- package/documention/document_MapVLayerView.js.html +247 -0
- package/documention/document_WMSLayerView.js.html +240 -0
- package/documention/document_WMTSLayerView.js.html +234 -0
- package/documention/document_WebTileLayerView.js.html +240 -0
- package/documention/document_support_FeatureRenderView.js.html +682 -0
- package/documention/document_support_MapboxglGraphicsLayer.js.html +1184 -0
- package/documention/document_support_SourceMetaData.js.html +223 -0
- package/documention/document_support_Utils.js.html +624 -0
- package/documention/document_support_mapbox_mapboxCustomUtil.js.html +322 -0
- package/documention/global.html +252 -0
- package/documention/index.html +251 -0
- 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
- package/documention/scripts/app.min.js +1 -0
- package/documention/scripts/linenumber.js +26 -0
- package/documention/scripts/search.js +45 -0
- package/documention/scripts/sideBar.js +11 -0
- package/documention/sketchEditor_SketchEditorMapboxgl.js.html +875 -0
- package/documention/styles/anchor.png +0 -0
- package/documention/styles/app.min.css +1 -0
- package/documention/styles/c.png +0 -0
- package/documention/styles/iframe.css +29 -0
- package/documention/styles/m.png +0 -0
- package/documention/styles/prettify-jsdoc.css +111 -0
- package/documention/styles/prettify-tomorrow.css +132 -0
- package/documention/styles/reset.css +44 -0
- package/documention/styles/up-arrow.png +0 -0
- package/documention/tutorial-1./345/277/253/351/200/237/345/205/245/351/227/250.html +165 -0
- package/documention/util_ConvertRendererToStyleLayerUtil.js.html +844 -0
- package/documention/util_MapboxglFeatureRender.js.html +225 -0
- package/documention/util_MapboxglPlugin.js.html +284 -0
- package/documention/view_MapViewMapboxgl.js.html +1882 -0
- package/documention/view_utils_ArcGISVectorTileLayerUtil.js.html +382 -0
- package/documention/view_utils_EchartsLayerUtil.js.html +194 -0
- package/documention/view_utils_IGSMapImageUtil.js.html +373 -0
- package/documention/view_utils_IGSTileLayerUtil.js.html +285 -0
- package/documention/view_utils_IGSVectorTileLayerUtil.js.html +379 -0
- package/documention/view_utils_MapVLayerUtil.js.html +197 -0
- package/documention/view_utils_Popup.js.html +525 -0
- package/documention/view_utils_Screenshot.js.html +320 -0
- package/documention/view_utils_WMSLayerUtil.js.html +337 -0
- package/documention/view_utils_WMTSLayerUtil.js.html +331 -0
- package/documention/view_utils_WebTileLayerUtil.js.html +284 -0
- package/documention/view_utils_echarts_EchartsLayerPlugin.js.html +419 -0
- package/documention/view_utils_mapV_MapVLayerPlugin.js.html +527 -0
- package/documention/view_utils_mapV_MapvBaseLayer.js.html +477 -0
- package/documention/view_utils_support_rasterLayerUtil.js.html +244 -0
- package/documention/view_utils_support_vectorLayerUtil.js.html +503 -0
- package/package.json +20 -20
- package/core/Base.js +0 -15
- package/core/index.js +0 -5
- package/index.js +0 -6
- package/overlay/D3Layer.js +0 -108
- package/overlay/EchartsLayer.js +0 -242
- package/overlay/ElsCubeLayer.js +0 -125
- package/overlay/MapvLayer.js +0 -296
- package/overlay/StreamLayer.js +0 -83
- package/overlay/TimeSpaceCubeLayer.js +0 -135
- package/overlay/dthree/mapbox-d3.css +0 -9
- package/overlay/echarts/MapCoordSys.js +0 -105
- package/overlay/echarts/MapModel.js +0 -0
- package/overlay/echarts/MapView.js +0 -0
- package/overlay/echarts/index.js +0 -4
- package/overlay/index.js +0 -31
- package/overlay/mapv/MapvBaseLayer.js +0 -299
- package/overlay/mapv/index.js +0 -5
- package/overlay/stream/GeojsonStreamLayer.js +0 -135
- package/overlay/stream/MapvStreamLayer.js +0 -79
- package/overlay/stream/index.js +0 -3
- package/overlay/stream/popup.css +0 -31
- package/service/index.js +0 -1
- package/service/socket/ISocketService.js +0 -121
- package/service/socket/SocketEvent.js +0 -50
- package/service/socket/SocketService.js +0 -90
- package/util/Evented.js +0 -295
- package/util/Util.js +0 -348
|
@@ -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 "@mapgis/webclient-leaflet-plugin" <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<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<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<LayerView>} 图层视图
|
|
191
|
+
*/
|
|
192
|
+
onUpdate(event) {
|
|
193
|
+
const self = this
|
|
194
|
+
if (event.updateContent) {
|
|
195
|
+
event.updateContent.forEach((layerUpdateCotent) => {
|
|
196
|
+
if (
|
|
197
|
+
layerUpdateCotent &&
|
|
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 && 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 < 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 < 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>
|