@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,373 @@
|
|
|
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/IGSMapImageUtil.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/IGSMapImageUtil.js</span>
|
|
125
|
+
</header>
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
<section>
|
|
132
|
+
<article>
|
|
133
|
+
<pre class="prettyprint source linenums"><code>import { defaultValue, getIGSDynamicLayer } from '@mapgis/webclient-common'
|
|
134
|
+
import {
|
|
135
|
+
removeLayer,
|
|
136
|
+
setOpacity,
|
|
137
|
+
setVisible,
|
|
138
|
+
getRasterSource,
|
|
139
|
+
getRasterLayer
|
|
140
|
+
} from './support'
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* 实际加载图层的工具类
|
|
144
|
+
* @private
|
|
145
|
+
* */
|
|
146
|
+
class IGSMapImageUtil {}
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* 添加地图图片图层
|
|
150
|
+
* @param {IGSMapImageLayerView} layerView 图层视图对象
|
|
151
|
+
* @param {Object} options 额外参数
|
|
152
|
+
* @return {Object} 实际的图层对象
|
|
153
|
+
* */
|
|
154
|
+
IGSMapImageUtil.addIGSMapImageLayer = function (layerView, options) {
|
|
155
|
+
const layer = layerView.layer
|
|
156
|
+
const innerView = layerView.innerView
|
|
157
|
+
// 图层初始化参数
|
|
158
|
+
const layerOptions = {
|
|
159
|
+
// 设置要显示的子图层
|
|
160
|
+
layers: layer.layers,
|
|
161
|
+
// 设置瓦片格式
|
|
162
|
+
f: layer.imageFormat,
|
|
163
|
+
// 设置瓦片宽度
|
|
164
|
+
width: layer.imageWidth,
|
|
165
|
+
// 设置瓦片高度
|
|
166
|
+
height: layer.imageHeight,
|
|
167
|
+
// 客户端id,用户的唯一标识;在地图服务中,调用接口时如果修改了地图的状态,包括设置动态投影、设置图层显示隐藏等,为了提升并发性能,服务端会根据clientId来生成临时地图,最佳做法是一个浏览器生成一个固定的唯一值;建议普通用户不要传该参数,webclient会根据当前浏览器生成一个固定的唯一值
|
|
168
|
+
clientId: layer.clientId,
|
|
169
|
+
// igs版本
|
|
170
|
+
igsVersion: layer._igsVersion,
|
|
171
|
+
// token名
|
|
172
|
+
tokenKey: layer.tokenKey,
|
|
173
|
+
// token值
|
|
174
|
+
tokenValue: layer.tokenValue,
|
|
175
|
+
// 返回的图片时,是否开启服务端抗锯齿功能;启用抗锯齿功能后,显示效果会更清晰,但会导致出图速度变慢,true表示开启抗锯齿,false表示关闭抗锯齿,如果没有设置,则默认应用地图文档(MapX)上的设置参数
|
|
176
|
+
isAntialiasing: layer.isAntialiasing,
|
|
177
|
+
// 设置图层过滤条件
|
|
178
|
+
filters: layer.getFilters()
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
// 只有指定添加专题图或者调整子图层顺序时,才会启用专题图
|
|
182
|
+
const _dynamicLayers = getIGSDynamicLayer(layer)
|
|
183
|
+
if (_dynamicLayers.length > 0) {
|
|
184
|
+
layerOptions.dynamicLayers = _dynamicLayers
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// 如果有filter就设置
|
|
188
|
+
const filters = layer.getFilters()
|
|
189
|
+
if (filters) {
|
|
190
|
+
layerOptions.filters = filters
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
// 定义source和layer
|
|
194
|
+
const sourceID = `source_${layer.id}`
|
|
195
|
+
const layerID = `layer_${layer.id}`
|
|
196
|
+
options = Object.assign(options, layerOptions)
|
|
197
|
+
const layerUrl = IGSMapImageUtil.initLayerUrl(layer.url, options)
|
|
198
|
+
const mapSource = getRasterSource(layerUrl, layer.imageWidth)
|
|
199
|
+
const mapLayer = getRasterLayer(layerID, sourceID, layer, layerView)
|
|
200
|
+
|
|
201
|
+
// 添加source和layer
|
|
202
|
+
innerView.addSource(sourceID, mapSource)
|
|
203
|
+
innerView.addLayer(mapLayer)
|
|
204
|
+
|
|
205
|
+
// 记录sourceID
|
|
206
|
+
const innerLayer = innerView.getLayer(layerID)
|
|
207
|
+
innerLayer.sourceID = sourceID
|
|
208
|
+
|
|
209
|
+
// 返回图层
|
|
210
|
+
return innerLayer
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/**
|
|
214
|
+
* 初始化请求参数
|
|
215
|
+
* @param {Object} options 请求参数
|
|
216
|
+
* @return {Array} 处理后的URL参数
|
|
217
|
+
* */
|
|
218
|
+
IGSMapImageUtil.initAllRequestParams = function (options) {
|
|
219
|
+
options = defaultValue(options, {})
|
|
220
|
+
const params = []
|
|
221
|
+
|
|
222
|
+
if (options.hasOwnProperty('layers')) {
|
|
223
|
+
params.push(`layers=${options.layers}`)
|
|
224
|
+
}
|
|
225
|
+
if (options.hasOwnProperty('imageTransparent')) {
|
|
226
|
+
params.push(`imageTransparent=${options.imageTransparent}`)
|
|
227
|
+
}
|
|
228
|
+
if (
|
|
229
|
+
options.hasOwnProperty('isAntialiasing') &&
|
|
230
|
+
options.isAntialiasing !== null &&
|
|
231
|
+
options.isAntialiasing !== undefined
|
|
232
|
+
) {
|
|
233
|
+
params.push(`isAntialiasing=${options.isAntialiasing}`)
|
|
234
|
+
}
|
|
235
|
+
if (options.hasOwnProperty('projectionSrs')) {
|
|
236
|
+
params.push(`projectionSrs=${options.projectionSrs}`)
|
|
237
|
+
}
|
|
238
|
+
if (
|
|
239
|
+
options.hasOwnProperty('tokenKey') &&
|
|
240
|
+
options.hasOwnProperty('tokenValue') &&
|
|
241
|
+
options.tokenValue
|
|
242
|
+
) {
|
|
243
|
+
params.push(`${options.tokenKey}=${options.tokenValue}`)
|
|
244
|
+
}
|
|
245
|
+
if (options.igsVersion === '2.0') {
|
|
246
|
+
params.push(`size=${options.width},${options.height}`)
|
|
247
|
+
params.push(`format=${options.format}`)
|
|
248
|
+
params.push(`f=image`)
|
|
249
|
+
if (options.hasOwnProperty('styles')) {
|
|
250
|
+
params.push(`layerStyles=${options.styles}`)
|
|
251
|
+
}
|
|
252
|
+
if (options.hasOwnProperty('filters') && options.filters) {
|
|
253
|
+
params.push(`layerFilters=${options.filters}`)
|
|
254
|
+
}
|
|
255
|
+
if (options.hasOwnProperty('dynamicLayers')) {
|
|
256
|
+
params.push(`dynamicLayers=${JSON.stringify(options.dynamicLayers)}`)
|
|
257
|
+
}
|
|
258
|
+
if (options.hasOwnProperty('projectionSrs')) {
|
|
259
|
+
params.push(`projectionSrs=${options.projectionSrs}`)
|
|
260
|
+
}
|
|
261
|
+
if (options.hasOwnProperty('clientId')) {
|
|
262
|
+
params.push(`clientId=${options.clientId}`)
|
|
263
|
+
}
|
|
264
|
+
} else {
|
|
265
|
+
params.push(`w=${options.width}`)
|
|
266
|
+
params.push(`h=${options.height}`)
|
|
267
|
+
params.push(`f=png`)
|
|
268
|
+
if (options.hasOwnProperty('styles')) {
|
|
269
|
+
params.push(`style=${options.styles}`)
|
|
270
|
+
}
|
|
271
|
+
if (options.hasOwnProperty('filters')) {
|
|
272
|
+
params.push(`filters=${options.filters}`)
|
|
273
|
+
}
|
|
274
|
+
if (options.hasOwnProperty('clientId')) {
|
|
275
|
+
params.push(`guid=${options.clientId}`)
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
return params
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/**
|
|
283
|
+
* 根据服务基地址和图层初始化参数,构造最终的URL地址
|
|
284
|
+
* @param {String} url 服务基地址
|
|
285
|
+
* @param {Object} options 图层初始化参数
|
|
286
|
+
* @return {String} 最终的URL地址
|
|
287
|
+
* */
|
|
288
|
+
IGSMapImageUtil.initLayerUrl = function (url, options) {
|
|
289
|
+
let layerUrl = `${url}/image?`
|
|
290
|
+
layerUrl += encodeURI(IGSMapImageUtil.initAllRequestParams(options).join('&'))
|
|
291
|
+
layerUrl += '&bbox={bbox}'
|
|
292
|
+
return layerUrl
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/**
|
|
296
|
+
* 设置图层可见性
|
|
297
|
+
* @param {IGSMapImageLayerView} layerView 图层视图对象
|
|
298
|
+
* */
|
|
299
|
+
IGSMapImageUtil.setVisible = function (layerView) {
|
|
300
|
+
setVisible(layerView)
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
/**
|
|
304
|
+
* 设置图层透明度
|
|
305
|
+
* @param {IGSMapImageLayerView} layerView 图层视图对象
|
|
306
|
+
* */
|
|
307
|
+
IGSMapImageUtil.setOpacity = function (layerView) {
|
|
308
|
+
setOpacity(layerView)
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
/**
|
|
312
|
+
* 刷新图层
|
|
313
|
+
* @param {IGSMapImageLayerView} layerView 图层视图对象
|
|
314
|
+
* */
|
|
315
|
+
IGSMapImageUtil.refresh = function (layerView) {
|
|
316
|
+
// 删除图层
|
|
317
|
+
layerView.innerView.removeLayer(layerView.innerLayer.id)
|
|
318
|
+
// 删除source
|
|
319
|
+
layerView.innerView.removeSource(layerView.innerLayer.sourceID)
|
|
320
|
+
// 重新添加layer和source
|
|
321
|
+
layerView.innerLayer = IGSMapImageUtil.addIGSMapImageLayer(layerView, {})
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
/**
|
|
325
|
+
* 删除图层
|
|
326
|
+
* @param {IGSMapImageLayerView} layerView 图层视图对象
|
|
327
|
+
* */
|
|
328
|
+
IGSMapImageUtil.removeLayer = function (layerView) {
|
|
329
|
+
removeLayer(layerView)
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
export default IGSMapImageUtil
|
|
333
|
+
</code></pre>
|
|
334
|
+
</article>
|
|
335
|
+
</section>
|
|
336
|
+
|
|
337
|
+
|
|
338
|
+
|
|
339
|
+
|
|
340
|
+
</div>
|
|
341
|
+
|
|
342
|
+
<footer class="footer">
|
|
343
|
+
<div class="content has-text-centered">
|
|
344
|
+
<p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
|
|
345
|
+
<p class="sidebar-created-by">
|
|
346
|
+
<a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
|
|
347
|
+
<a href="http://192.168.82.89:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
|
|
348
|
+
</p>
|
|
349
|
+
</div>
|
|
350
|
+
</footer>
|
|
351
|
+
|
|
352
|
+
</div>
|
|
353
|
+
<div id="side-nav" class="side-nav">
|
|
354
|
+
<div style="margin-bottom: 10px;">
|
|
355
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
|
|
356
|
+
</div>
|
|
357
|
+
<div style="margin-bottom: 10px;">
|
|
358
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
|
|
359
|
+
</div>
|
|
360
|
+
<div style="margin-bottom: 10px;">
|
|
361
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
|
|
362
|
+
</div>
|
|
363
|
+
<div>
|
|
364
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
<script src="scripts/linenumber.js"> </script>
|
|
369
|
+
|
|
370
|
+
<script src="scripts/search.js"> </script>
|
|
371
|
+
|
|
372
|
+
</body>
|
|
373
|
+
</html>
|
|
@@ -0,0 +1,285 @@
|
|
|
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/IGSTileLayerUtil.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/IGSTileLayerUtil.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 IGSTileLayerUtil {}
|
|
146
|
+
|
|
147
|
+
/**
|
|
148
|
+
* 添加地图图片图层
|
|
149
|
+
* @param {IGSTileLayerView} layerView 图层视图对象
|
|
150
|
+
* @param {Object} options 额外参数
|
|
151
|
+
* @return {Object} 实际的图层对象
|
|
152
|
+
* */
|
|
153
|
+
IGSTileLayerUtil.addIGSTileLayer = function (layerView, options) {
|
|
154
|
+
const layer = layerView.layer
|
|
155
|
+
const innerView = layerView.innerView
|
|
156
|
+
// 图层初始化参数
|
|
157
|
+
const layerOptions = {
|
|
158
|
+
// igs版本
|
|
159
|
+
igsVersion: layer._igsVersion,
|
|
160
|
+
// token名
|
|
161
|
+
tokenKey: layer.tokenKey,
|
|
162
|
+
// token值
|
|
163
|
+
tokenValue: layer.tokenValue
|
|
164
|
+
}
|
|
165
|
+
// 定义source和layer
|
|
166
|
+
const sourceID = `source_${layer.id}`
|
|
167
|
+
const layerID = `layer_${layer.id}`
|
|
168
|
+
options = Object.assign(options, layerOptions)
|
|
169
|
+
const layerUrl = IGSTileLayerUtil.initLayerUrl(layer.url, options)
|
|
170
|
+
const mapSource = getRasterSource(layerUrl, layer.tileSize)
|
|
171
|
+
const mapLayer = getRasterLayer(layerID, sourceID, layer, layerView)
|
|
172
|
+
|
|
173
|
+
// 添加source和layer
|
|
174
|
+
innerView.addSource(sourceID, mapSource)
|
|
175
|
+
innerView.addLayer(mapLayer)
|
|
176
|
+
|
|
177
|
+
// 记录sourceID
|
|
178
|
+
const innerLayer = innerView.getLayer(layerID)
|
|
179
|
+
innerLayer.sourceID = sourceID
|
|
180
|
+
|
|
181
|
+
// 返回图层
|
|
182
|
+
return innerLayer
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/**
|
|
186
|
+
* 根据服务基地址和图层初始化参数,构造最终的URL地址
|
|
187
|
+
* @param {String} url 服务基地址
|
|
188
|
+
* @param {Object} options 图层初始化参数
|
|
189
|
+
* @return {String} 最终的URL地址
|
|
190
|
+
* */
|
|
191
|
+
IGSTileLayerUtil.initLayerUrl = function (url, options) {
|
|
192
|
+
const igsVersion = options.igsVersion
|
|
193
|
+
if (igsVersion === '1.0') {
|
|
194
|
+
url += '/{z}/{y}/{x}'
|
|
195
|
+
if (options.tokenKey && options.tokenValue) {
|
|
196
|
+
url += `?${options.tokenKey}=${options.tokenValue}`
|
|
197
|
+
}
|
|
198
|
+
} else {
|
|
199
|
+
url = `${url}/tileImage/{z}/{y}/{x}?f=image`
|
|
200
|
+
if (options.tokenKey && options.tokenValue) {
|
|
201
|
+
url += `&${options.tokenKey}=${options.tokenValue}`
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
return url
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/**
|
|
208
|
+
* 设置图层可见性
|
|
209
|
+
* @param {IGSTileLayerView} layerView 图层视图对象
|
|
210
|
+
* */
|
|
211
|
+
IGSTileLayerUtil.setVisible = function (layerView) {
|
|
212
|
+
setVisible(layerView)
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/**
|
|
216
|
+
* 设置图层透明度
|
|
217
|
+
* @param {IGSTileLayerView} layerView 图层视图对象
|
|
218
|
+
* */
|
|
219
|
+
IGSTileLayerUtil.setOpacity = function (layerView) {
|
|
220
|
+
setOpacity(layerView)
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* 刷新图层
|
|
225
|
+
* @param {IGSTileLayerView} layerView 图层视图对象
|
|
226
|
+
* */
|
|
227
|
+
IGSTileLayerUtil.refresh = function (layerView) {
|
|
228
|
+
// 删除图层
|
|
229
|
+
layerView.innerView.removeLayer(layerView.innerLayer.id)
|
|
230
|
+
// 删除source
|
|
231
|
+
layerView.innerView.removeSource(layerView.innerLayer.sourceID)
|
|
232
|
+
// 重新添加layer和source
|
|
233
|
+
layerView.innerLayer = IGSTileLayerUtil.addIGSTileLayer(layerView, {})
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/**
|
|
237
|
+
* 删除图层
|
|
238
|
+
* @param {IGSTileLayerView} layerView 图层视图对象
|
|
239
|
+
* */
|
|
240
|
+
IGSTileLayerUtil.removeLayer = function (layerView) {
|
|
241
|
+
removeLayer(layerView)
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
export default IGSTileLayerUtil
|
|
245
|
+
</code></pre>
|
|
246
|
+
</article>
|
|
247
|
+
</section>
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
<footer class="footer">
|
|
255
|
+
<div class="content has-text-centered">
|
|
256
|
+
<p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
|
|
257
|
+
<p class="sidebar-created-by">
|
|
258
|
+
<a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
|
|
259
|
+
<a href="http://192.168.82.89:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
|
|
260
|
+
</p>
|
|
261
|
+
</div>
|
|
262
|
+
</footer>
|
|
263
|
+
|
|
264
|
+
</div>
|
|
265
|
+
<div id="side-nav" class="side-nav">
|
|
266
|
+
<div style="margin-bottom: 10px;">
|
|
267
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
|
|
268
|
+
</div>
|
|
269
|
+
<div style="margin-bottom: 10px;">
|
|
270
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
|
|
271
|
+
</div>
|
|
272
|
+
<div style="margin-bottom: 10px;">
|
|
273
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
|
|
274
|
+
</div>
|
|
275
|
+
<div>
|
|
276
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
<script src="scripts/linenumber.js"> </script>
|
|
281
|
+
|
|
282
|
+
<script src="scripts/search.js"> </script>
|
|
283
|
+
|
|
284
|
+
</body>
|
|
285
|
+
</html>
|