@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.
- 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 -7
- 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 -298
- package/overlay/StreamLayer.js +0 -86
- 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/SocketService.js +0 -90
|
@@ -0,0 +1,331 @@
|
|
|
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/utils/WMTSLayerUtil.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">view/utils/WMTSLayerUtil.js</span>
|
|
125
|
+
</header>
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
<section>
|
|
132
|
+
<article>
|
|
133
|
+
<pre class="prettyprint source linenums"><code>import { defaultValue } from '@mapgis/webclient-common'
|
|
134
|
+
import {
|
|
135
|
+
setVisible,
|
|
136
|
+
removeLayer,
|
|
137
|
+
setOpacity,
|
|
138
|
+
getRasterSource,
|
|
139
|
+
getRasterLayer
|
|
140
|
+
} from './support'
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* 实际加载图层的工具类
|
|
144
|
+
* @private
|
|
145
|
+
* */
|
|
146
|
+
class WMTSLayerUtil {}
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* 添加WMTS图层
|
|
150
|
+
* @param {WMTSLayerView} layerView 图层视图对象
|
|
151
|
+
* @param {Object} options 额外参数
|
|
152
|
+
* @return {Object} 实际的图层对象
|
|
153
|
+
* */
|
|
154
|
+
WMTSLayerUtil.addWMTSLayer = function (layerView, options) {
|
|
155
|
+
const layer = layerView.layer
|
|
156
|
+
const innerView = layerView.innerView
|
|
157
|
+
// 图层初始化参数
|
|
158
|
+
const layerOptions = {
|
|
159
|
+
// 服务类型
|
|
160
|
+
service: 'WMTS',
|
|
161
|
+
// 服务版本
|
|
162
|
+
version: layer.version,
|
|
163
|
+
// 请求类型
|
|
164
|
+
request: 'GetTile',
|
|
165
|
+
// 图层名称
|
|
166
|
+
layer: layer.activeLayer.identifier,
|
|
167
|
+
// 图层样式
|
|
168
|
+
style: layer.activeLayer.styleId,
|
|
169
|
+
// 瓦片格式
|
|
170
|
+
format: layer.activeLayer.imageFormat,
|
|
171
|
+
// 瓦片矩阵集
|
|
172
|
+
tileMatrixSet: layer.activeLayer.tileMatrixSetId,
|
|
173
|
+
// 瓦片矩阵
|
|
174
|
+
tileMatrix: '{z}',
|
|
175
|
+
// 行号
|
|
176
|
+
tileRow: '{y}',
|
|
177
|
+
// 列号
|
|
178
|
+
tileCol: '{x}',
|
|
179
|
+
// token名
|
|
180
|
+
tokenKey: layer.tokenKey,
|
|
181
|
+
// token值
|
|
182
|
+
tokenValue: layer.tokenValue
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
// 判断WMTS服务版本
|
|
186
|
+
if (!layerOptions.version) {
|
|
187
|
+
layerOptions.version = '1.0.0'
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
// 定义source和layer
|
|
191
|
+
const sourceID = `source_${layer.id}`
|
|
192
|
+
const layerID = `layer_${layer.id}`
|
|
193
|
+
const layerUrl = WMTSLayerUtil.initLayerUrl(layer.url, layerOptions)
|
|
194
|
+
const mapSource = getRasterSource(layerUrl, layer.imageWidth)
|
|
195
|
+
const mapLayer = getRasterLayer(layerID, sourceID, layer, layerView)
|
|
196
|
+
|
|
197
|
+
// 添加source和layer
|
|
198
|
+
innerView.addSource(sourceID, mapSource)
|
|
199
|
+
innerView.addLayer(mapLayer)
|
|
200
|
+
|
|
201
|
+
// 记录sourceID
|
|
202
|
+
const innerLayer = innerView.getLayer(layerID)
|
|
203
|
+
innerLayer.sourceID = sourceID
|
|
204
|
+
|
|
205
|
+
// 返回图层
|
|
206
|
+
return innerLayer
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
/**
|
|
210
|
+
* 初始化请求参数
|
|
211
|
+
* @param {Object} options 请求参数
|
|
212
|
+
* @return {Array} 处理后的URL参数
|
|
213
|
+
* */
|
|
214
|
+
WMTSLayerUtil.initAllRequestParams = function (options) {
|
|
215
|
+
options = defaultValue(options, {})
|
|
216
|
+
|
|
217
|
+
const params = []
|
|
218
|
+
|
|
219
|
+
params.push(`service=${options.service}`)
|
|
220
|
+
params.push(`version=${options.version}`)
|
|
221
|
+
params.push(`request=${options.request}`)
|
|
222
|
+
params.push(`layer=${encodeURIComponent(options.layer)}`)
|
|
223
|
+
params.push(`style=${encodeURIComponent(options.style)}`)
|
|
224
|
+
params.push(`format=${encodeURIComponent(options.format)}`)
|
|
225
|
+
params.push(`tileMatrixSet=${encodeURIComponent(options.tileMatrixSet)}`)
|
|
226
|
+
params.push(`tileMatrix=${options.tileMatrix}`)
|
|
227
|
+
params.push(`tileRow=${options.tileRow}`)
|
|
228
|
+
params.push(`tileCol=${options.tileCol}`)
|
|
229
|
+
|
|
230
|
+
if (
|
|
231
|
+
options.hasOwnProperty('tokenKey') &&
|
|
232
|
+
options.hasOwnProperty('tokenValue') &&
|
|
233
|
+
options.tokenValue
|
|
234
|
+
) {
|
|
235
|
+
params.push(`${options.tokenKey}=${options.tokenValue}`)
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
return params
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/**
|
|
242
|
+
* 根据服务基地址和图层初始化参数,构造最终的URL地址
|
|
243
|
+
* @param {String} url 服务基地址
|
|
244
|
+
* @param {Object} options 图层初始化参数
|
|
245
|
+
* @return {String} 最终的URL地址
|
|
246
|
+
* */
|
|
247
|
+
WMTSLayerUtil.initLayerUrl = function (url, options) {
|
|
248
|
+
let layerUrl = `${url}?`
|
|
249
|
+
layerUrl += WMTSLayerUtil.initAllRequestParams(options).join('&')
|
|
250
|
+
return layerUrl
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* 设置图层可见性
|
|
255
|
+
* @param {WMTSLayerView} layerView 图层视图对象
|
|
256
|
+
* */
|
|
257
|
+
WMTSLayerUtil.setVisible = function (layerView) {
|
|
258
|
+
setVisible(layerView)
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
/**
|
|
262
|
+
* 设置图层透明度
|
|
263
|
+
* @param {WMTSLayerView} layerView 图层视图对象
|
|
264
|
+
* */
|
|
265
|
+
WMTSLayerUtil.setOpacity = function (layerView) {
|
|
266
|
+
setOpacity(layerView)
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
/**
|
|
270
|
+
* 刷新图层
|
|
271
|
+
* @param {WMTSLayerView} layerView 图层视图对象
|
|
272
|
+
* */
|
|
273
|
+
WMTSLayerUtil.refresh = function (layerView) {
|
|
274
|
+
// 删除图层
|
|
275
|
+
layerView.innerView.removeLayer(layerView.innerLayer.id)
|
|
276
|
+
// 删除source
|
|
277
|
+
layerView.innerView.removeSource(layerView.innerLayer.sourceID)
|
|
278
|
+
// 重新添加layer和source
|
|
279
|
+
layerView.innerLayer = WMTSLayerUtil.addWMTSLayer(layerView, {})
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/**
|
|
283
|
+
* 删除图层
|
|
284
|
+
* @param {WMTSLayerView} layerView 图层视图对象
|
|
285
|
+
* */
|
|
286
|
+
WMTSLayerUtil.removeLayer = function (layerView) {
|
|
287
|
+
removeLayer(layerView)
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
export default WMTSLayerUtil
|
|
291
|
+
</code></pre>
|
|
292
|
+
</article>
|
|
293
|
+
</section>
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
</div>
|
|
299
|
+
|
|
300
|
+
<footer class="footer">
|
|
301
|
+
<div class="content has-text-centered">
|
|
302
|
+
<p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
|
|
303
|
+
<p class="sidebar-created-by">
|
|
304
|
+
<a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
|
|
305
|
+
<a href="http://192.168.82.89:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
|
|
306
|
+
</p>
|
|
307
|
+
</div>
|
|
308
|
+
</footer>
|
|
309
|
+
|
|
310
|
+
</div>
|
|
311
|
+
<div id="side-nav" class="side-nav">
|
|
312
|
+
<div style="margin-bottom: 10px;">
|
|
313
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
|
|
314
|
+
</div>
|
|
315
|
+
<div style="margin-bottom: 10px;">
|
|
316
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
|
|
317
|
+
</div>
|
|
318
|
+
<div style="margin-bottom: 10px;">
|
|
319
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
|
|
320
|
+
</div>
|
|
321
|
+
<div>
|
|
322
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
</div>
|
|
326
|
+
<script src="scripts/linenumber.js"> </script>
|
|
327
|
+
|
|
328
|
+
<script src="scripts/search.js"> </script>
|
|
329
|
+
|
|
330
|
+
</body>
|
|
331
|
+
</html>
|
|
@@ -0,0 +1,284 @@
|
|
|
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/utils/WebTileLayerUtil.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">view/utils/WebTileLayerUtil.js</span>
|
|
125
|
+
</header>
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
<section>
|
|
132
|
+
<article>
|
|
133
|
+
<pre class="prettyprint source linenums"><code>import {
|
|
134
|
+
getRasterLayer,
|
|
135
|
+
getRasterSource,
|
|
136
|
+
removeLayer,
|
|
137
|
+
setOpacity,
|
|
138
|
+
setVisible
|
|
139
|
+
} from './support'
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* 实际加载图层的工具类
|
|
143
|
+
* @private
|
|
144
|
+
* */
|
|
145
|
+
class WebTileLayerUtil {}
|
|
146
|
+
|
|
147
|
+
/**
|
|
148
|
+
* 添加地图图片图层
|
|
149
|
+
* @param {IGSTileLayerView} layerView 图层视图对象
|
|
150
|
+
* @param {Object} options 额外参数
|
|
151
|
+
* @return {Object} 实际的图层对象
|
|
152
|
+
* */
|
|
153
|
+
WebTileLayerUtil.addWebTileLayer = function (layerView, options) {
|
|
154
|
+
const layer = layerView.layer
|
|
155
|
+
const innerView = layerView.innerView
|
|
156
|
+
// 图层初始化参数
|
|
157
|
+
const layerOptions = {}
|
|
158
|
+
// 设置token
|
|
159
|
+
layerOptions[layer.tokenKey] = layer.tokenValue
|
|
160
|
+
|
|
161
|
+
// 将参数拼装到url后面
|
|
162
|
+
const layerUrl = WebTileLayerUtil.initLayerUrl(layer.url, layerOptions)
|
|
163
|
+
|
|
164
|
+
// 定义source和layer
|
|
165
|
+
const sourceID = `source_${layer.id}`
|
|
166
|
+
const layerID = `layer_${layer.id}`
|
|
167
|
+
const mapSource = getRasterSource(layerUrl, layer.tileSize)
|
|
168
|
+
const mapLayer = getRasterLayer(layerID, sourceID, layer, layerView)
|
|
169
|
+
|
|
170
|
+
// 添加source和layer
|
|
171
|
+
innerView.addSource(sourceID, mapSource)
|
|
172
|
+
innerView.addLayer(mapLayer)
|
|
173
|
+
|
|
174
|
+
// 记录sourceID
|
|
175
|
+
const innerLayer = innerView.getLayer(layerID)
|
|
176
|
+
innerLayer.sourceID = sourceID
|
|
177
|
+
|
|
178
|
+
// 返回图层
|
|
179
|
+
return innerLayer
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/**
|
|
183
|
+
* 根据服务基地址和图层初始化参数,构造最终的URL地址
|
|
184
|
+
* @param {String} url 服务基地址
|
|
185
|
+
* @param {Object} options 图层初始化参数
|
|
186
|
+
* @return {String} 最终的URL地址
|
|
187
|
+
* */
|
|
188
|
+
WebTileLayerUtil.initLayerUrl = function (url, options) {
|
|
189
|
+
// 将col、row和level替换为xyz
|
|
190
|
+
url = url.replace('col', 'x')
|
|
191
|
+
url = url.replace('row', 'y')
|
|
192
|
+
url = url.replace('level', 'z')
|
|
193
|
+
// 确保url中有?号
|
|
194
|
+
if (url.indexOf('?') < 0) {
|
|
195
|
+
url += '?'
|
|
196
|
+
}
|
|
197
|
+
// 将参数拼装到url后面
|
|
198
|
+
Object.keys(options).forEach(function (key) {
|
|
199
|
+
if (options[key]) {
|
|
200
|
+
url += `&${key}=${options[key]}`
|
|
201
|
+
}
|
|
202
|
+
})
|
|
203
|
+
return url
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/**
|
|
207
|
+
* 设置图层可见性
|
|
208
|
+
* @param {IGSTileLayerView} layerView 图层视图对象
|
|
209
|
+
* */
|
|
210
|
+
WebTileLayerUtil.setVisible = function (layerView) {
|
|
211
|
+
setVisible(layerView)
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/**
|
|
215
|
+
* 设置图层透明度
|
|
216
|
+
* @param {IGSTileLayerView} layerView 图层视图对象
|
|
217
|
+
* */
|
|
218
|
+
WebTileLayerUtil.setOpacity = function (layerView) {
|
|
219
|
+
setOpacity(layerView)
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
/**
|
|
223
|
+
* 刷新图层
|
|
224
|
+
* @param {IGSTileLayerView} layerView 图层视图对象
|
|
225
|
+
* */
|
|
226
|
+
WebTileLayerUtil.refresh = function (layerView) {
|
|
227
|
+
// 删除图层
|
|
228
|
+
layerView.innerView.removeLayer(layerView.innerLayer.id)
|
|
229
|
+
// 删除source
|
|
230
|
+
layerView.innerView.removeSource(layerView.innerLayer.sourceID)
|
|
231
|
+
// 重新添加layer和source
|
|
232
|
+
layerView.innerLayer = WebTileLayerUtil.addWebTileLayer(layerView, {})
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/**
|
|
236
|
+
* 删除图层
|
|
237
|
+
* @param {IGSTileLayerView} layerView 图层视图对象
|
|
238
|
+
* */
|
|
239
|
+
WebTileLayerUtil.removeLayer = function (layerView) {
|
|
240
|
+
removeLayer(layerView)
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
export default WebTileLayerUtil
|
|
244
|
+
</code></pre>
|
|
245
|
+
</article>
|
|
246
|
+
</section>
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<footer class="footer">
|
|
254
|
+
<div class="content has-text-centered">
|
|
255
|
+
<p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
|
|
256
|
+
<p class="sidebar-created-by">
|
|
257
|
+
<a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
|
|
258
|
+
<a href="http://192.168.82.89:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
|
|
259
|
+
</p>
|
|
260
|
+
</div>
|
|
261
|
+
</footer>
|
|
262
|
+
|
|
263
|
+
</div>
|
|
264
|
+
<div id="side-nav" class="side-nav">
|
|
265
|
+
<div style="margin-bottom: 10px;">
|
|
266
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
|
|
267
|
+
</div>
|
|
268
|
+
<div style="margin-bottom: 10px;">
|
|
269
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
|
|
270
|
+
</div>
|
|
271
|
+
<div style="margin-bottom: 10px;">
|
|
272
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
|
|
273
|
+
</div>
|
|
274
|
+
<div>
|
|
275
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
<script src="scripts/linenumber.js"> </script>
|
|
280
|
+
|
|
281
|
+
<script src="scripts/search.js"> </script>
|
|
282
|
+
|
|
283
|
+
</body>
|
|
284
|
+
</html>
|