@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.
- package/README.md +11 -35
- package/dist/es5/webclient-common.min.js +15 -4
- package/dist/es5/webclient-mapboxgl-plugin.min.js +1 -1
- package/dist/webclient-mapboxgl-plugin-es6.min.js +1 -1
- package/documention/MapViewMapboxgl.html +1233 -8
- package/documention/Popup.html +3 -3
- package/documention/Screenshot.html +0 -11
- package/documention/SketchEditorMapboxgl.html +31 -2
- package/documention/index.html +4 -4
- package/documention/scripts/sideBar.js +16 -2
- package/package.json +3 -4
- package/documention/document_ArcGISVectorTileLayerView.js.html +0 -265
- package/documention/document_EchartsLayerView.js.html +0 -246
- package/documention/document_GraphicsLayerView.js.html +0 -314
- package/documention/document_IGSFeatureLayerView.js.html +0 -218
- package/documention/document_IGSMapImageLayerView.js.html +0 -240
- package/documention/document_IGSTileLayerView.js.html +0 -236
- package/documention/document_IGSVectorTileLayerView.js.html +0 -264
- package/documention/document_MapVLayerView.js.html +0 -247
- package/documention/document_WMSLayerView.js.html +0 -240
- package/documention/document_WMTSLayerView.js.html +0 -234
- package/documention/document_WebTileLayerView.js.html +0 -240
- package/documention/document_support_FeatureRenderView.js.html +0 -682
- package/documention/document_support_MapboxglGraphicsLayer.js.html +0 -1184
- package/documention/document_support_SourceMetaData.js.html +0 -223
- package/documention/document_support_Utils.js.html +0 -624
- package/documention/document_support_mapbox_mapboxCustomUtil.js.html +0 -322
- package/documention/sketchEditor_SketchEditorMapboxgl.js.html +0 -875
- package/documention/util_ConvertRendererToStyleLayerUtil.js.html +0 -844
- package/documention/util_MapboxglFeatureRender.js.html +0 -225
- package/documention/util_MapboxglPlugin.js.html +0 -284
- package/documention/view_MapViewMapboxgl.js.html +0 -1882
- package/documention/view_utils_ArcGISVectorTileLayerUtil.js.html +0 -382
- package/documention/view_utils_EchartsLayerUtil.js.html +0 -194
- package/documention/view_utils_IGSMapImageUtil.js.html +0 -373
- package/documention/view_utils_IGSTileLayerUtil.js.html +0 -285
- package/documention/view_utils_IGSVectorTileLayerUtil.js.html +0 -379
- package/documention/view_utils_MapVLayerUtil.js.html +0 -197
- package/documention/view_utils_Popup.js.html +0 -525
- package/documention/view_utils_Screenshot.js.html +0 -320
- package/documention/view_utils_WMSLayerUtil.js.html +0 -337
- package/documention/view_utils_WMTSLayerUtil.js.html +0 -331
- package/documention/view_utils_WebTileLayerUtil.js.html +0 -284
- package/documention/view_utils_echarts_EchartsLayerPlugin.js.html +0 -419
- package/documention/view_utils_mapV_MapVLayerPlugin.js.html +0 -527
- package/documention/view_utils_mapV_MapvBaseLayer.js.html +0 -477
- package/documention/view_utils_support_rasterLayerUtil.js.html +0 -244
- package/documention/view_utils_support_vectorLayerUtil.js.html +0 -503
|
@@ -1,525 +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 view/utils/Popup.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/Popup.js</span>
|
|
125
|
-
</header>
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<section>
|
|
132
|
-
<article>
|
|
133
|
-
<pre class="prettyprint source linenums"><code>import { defaultValue, Evented, Log } from '@mapgis/webclient-common'
|
|
134
|
-
/**
|
|
135
|
-
* 二维场景信息弹窗(leaflet引擎)
|
|
136
|
-
* 参考示例:
|
|
137
|
-
* <a href='#MapView'>[初始化二维场景视图]</a>
|
|
138
|
-
* [ES6引入方式]:<br/>
|
|
139
|
-
* import { Popup } from '@mapgis/webclient-leaflet-plugin' <br/>
|
|
140
|
-
* 自定义样式说明:<br/>
|
|
141
|
-
* zondy-popup__content 弹窗容器样式<br/>
|
|
142
|
-
* zondy-popup__tip 弹窗对话框箭头样式<br/>
|
|
143
|
-
* zondy-popup__header 弹窗头部样式<br/>
|
|
144
|
-
* zondy-popup__content 弹窗主体样式<br/>
|
|
145
|
-
* zondy-popup__footer 弹窗底部样式<br/>
|
|
146
|
-
* @class Popup
|
|
147
|
-
* @moduleEX Widget
|
|
148
|
-
* @param {Object} options 构造参数
|
|
149
|
-
* @param {MapView} [options.view] 弹窗地图视图对象
|
|
150
|
-
* @param {String} [options.id] 弹窗ID
|
|
151
|
-
* @param {Point} [options.location] 弹窗定位点
|
|
152
|
-
* @param {String} [options.title] 弹窗标题
|
|
153
|
-
* @param {String|HTMLElement} [options.content] 弹框内容
|
|
154
|
-
* @param {String} [options.alignment] 弹框方位,值为"auto"或"bottom-left"或"top-center"或"top-right"或"bottom-left"或"bottom-center"或"bottom-right"。
|
|
155
|
-
* @param {Array} [options.defaultButtons] 弹框内容,可选数组项有'toggle','close','zoom'。toggle:收缩主题内容按钮;close:关闭按钮;zoom:缩放按钮。
|
|
156
|
-
*
|
|
157
|
-
* @example <caption><h7 id='Popup'>打开视图弹窗</h7></caption>
|
|
158
|
-
* // ES5引入方式
|
|
159
|
-
* const { Map, MapView } = Zondy
|
|
160
|
-
* // ES6引入方式
|
|
161
|
-
* import { Map, MapView } from "@mapgis/webclient-leaflet-plugin"
|
|
162
|
-
* // 初始化图层管理容器
|
|
163
|
-
* const map = new Map();
|
|
164
|
-
* // 初始化地图视图对象
|
|
165
|
-
* const mapView = new MapView({
|
|
166
|
-
* // 二维场景视图的容器(html的div标签)ID
|
|
167
|
-
* viewId: "二维场景视图的容器的id",
|
|
168
|
-
* // 图层管理容器
|
|
169
|
-
* map: map
|
|
170
|
-
* });
|
|
171
|
-
* const popupObj = {
|
|
172
|
-
* title: "标题",
|
|
173
|
-
* content:"弹出窗口主题内容,详细内容",
|
|
174
|
-
* location: new Point({coordinates:[123,34]}),
|
|
175
|
-
* alignment: "bottom-center"
|
|
176
|
-
*}
|
|
177
|
-
* mapView.popup.open(popupObj)
|
|
178
|
-
* mapView.popup.close(popupObj)
|
|
179
|
-
* <style>
|
|
180
|
-
* .zondy-popup__container{
|
|
181
|
-
* background-color: #40a9ff;
|
|
182
|
-
* margin: 0
|
|
183
|
-
* }
|
|
184
|
-
* .zondy-popup__tip{
|
|
185
|
-
* // display: none;
|
|
186
|
-
* background-color: #ffffff;
|
|
187
|
-
* }
|
|
188
|
-
* .zondy-popup__header{
|
|
189
|
-
* background-color: #40a9ff;
|
|
190
|
-
* }
|
|
191
|
-
* .zondy-popup__content{
|
|
192
|
-
* background-color: #ffffff;
|
|
193
|
-
* }
|
|
194
|
-
* .zondy-popup__footer{
|
|
195
|
-
* // display: none;
|
|
196
|
-
* background-color: #40a9ff;
|
|
197
|
-
* }
|
|
198
|
-
* </style>
|
|
199
|
-
*/
|
|
200
|
-
|
|
201
|
-
class Popup extends Evented {
|
|
202
|
-
constructor(options) {
|
|
203
|
-
super(options)
|
|
204
|
-
/**
|
|
205
|
-
* 弹框的地图视野
|
|
206
|
-
* @member {MapView}
|
|
207
|
-
*/
|
|
208
|
-
this.view = defaultValue(options.view, null)
|
|
209
|
-
// /**
|
|
210
|
-
// * 弹框唯一id
|
|
211
|
-
// * @member {String}
|
|
212
|
-
// */
|
|
213
|
-
// this.id = this._id
|
|
214
|
-
/**
|
|
215
|
-
* 弹框位置
|
|
216
|
-
* @member {String}
|
|
217
|
-
*/
|
|
218
|
-
this.location = defaultValue(options.location, '')
|
|
219
|
-
/**
|
|
220
|
-
* 弹框标题
|
|
221
|
-
* @member {String}
|
|
222
|
-
*/
|
|
223
|
-
this.title = defaultValue(options.title, '')
|
|
224
|
-
/**
|
|
225
|
-
* 弹框内容
|
|
226
|
-
* @member {String}
|
|
227
|
-
*/
|
|
228
|
-
this.content = defaultValue(options.content, '')
|
|
229
|
-
// /**
|
|
230
|
-
// * 弹框按钮事件
|
|
231
|
-
// * @member {String}
|
|
232
|
-
// */
|
|
233
|
-
// this.action = undefined
|
|
234
|
-
/**
|
|
235
|
-
* 弹框方位,值为"auto"|"bottom-left"|"top-center"|"top-right"|"bottom-left"|"bottom-center"|"bottom-right"
|
|
236
|
-
* @member {String}
|
|
237
|
-
*/
|
|
238
|
-
this.alignment = defaultValue(options.alignment, 'bottom-center')
|
|
239
|
-
/**
|
|
240
|
-
* 默认按钮 ['toggle','close','zoom']
|
|
241
|
-
* @member {Array}
|
|
242
|
-
*/
|
|
243
|
-
this.defaultButtons = defaultValue(options.defaultButtons, [
|
|
244
|
-
'toggle',
|
|
245
|
-
'close',
|
|
246
|
-
'zoom'
|
|
247
|
-
])
|
|
248
|
-
this._popup = undefined
|
|
249
|
-
// 初始化弹窗
|
|
250
|
-
this._initPopup()
|
|
251
|
-
// 设置popup自定义class样式
|
|
252
|
-
this._initDefaultClass()
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
/**
|
|
256
|
-
* 初始化弹窗
|
|
257
|
-
* @private
|
|
258
|
-
* */
|
|
259
|
-
_initPopup() {
|
|
260
|
-
this._customPopup()
|
|
261
|
-
// 关闭地图点击关闭弹窗事件
|
|
262
|
-
this.view._innerView.closePopupOnClick = false
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
_initDefaultClass() {}
|
|
266
|
-
|
|
267
|
-
_customPopup() {}
|
|
268
|
-
|
|
269
|
-
/**
|
|
270
|
-
* 打开popup弹窗
|
|
271
|
-
* @param {Object} options 弹窗属性对象
|
|
272
|
-
* */
|
|
273
|
-
open(options) {
|
|
274
|
-
if (this._popup) {
|
|
275
|
-
this.close()
|
|
276
|
-
this._popup = undefined
|
|
277
|
-
this.openPopup(options)
|
|
278
|
-
} else {
|
|
279
|
-
this.openPopup(options)
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
/**
|
|
284
|
-
* 打开popup弹窗
|
|
285
|
-
* @param {Object} options 弹窗属性对象
|
|
286
|
-
* */
|
|
287
|
-
openPopup(options) {
|
|
288
|
-
this.view = options.view ? options.view : this.view
|
|
289
|
-
this.location = options.location ? options.location : this.location
|
|
290
|
-
this.title = options.title ? options.title : this.title
|
|
291
|
-
this.content = options.content ? options.content : this.content
|
|
292
|
-
this.alignment = options.alignment ? options.alignment : this.alignment
|
|
293
|
-
|
|
294
|
-
if (!this.view._innerView) {
|
|
295
|
-
Log.info('没有视图引擎!')
|
|
296
|
-
return
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
const content = this._contentUI(this.title, this.content)
|
|
300
|
-
|
|
301
|
-
// const popup = new mapboxGl.Popup({ closeOnClick: false })
|
|
302
|
-
this._popup = new mapboxgl.Popup({
|
|
303
|
-
closeOnClick: false,
|
|
304
|
-
closeButton: false,
|
|
305
|
-
maxWidth: '1900px'
|
|
306
|
-
})
|
|
307
|
-
.setLngLat(this.location.coordinates)
|
|
308
|
-
.setDOMContent(content)
|
|
309
|
-
.addTo(this.view._innerView)
|
|
310
|
-
|
|
311
|
-
this._popup.toggleClassName('highlighted')
|
|
312
|
-
const collection = this._popup._container.getElementsByClassName(
|
|
313
|
-
'mapboxgl-popup-content'
|
|
314
|
-
)
|
|
315
|
-
for (const i in collection) {
|
|
316
|
-
collection[i].style.padding = '0'
|
|
317
|
-
collection[i].style.borderRadius = '10px'
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
_contentUI(title, content) {
|
|
322
|
-
const self = this
|
|
323
|
-
let defaultUI = undefined
|
|
324
|
-
const string2Dom = function (arg) {
|
|
325
|
-
const objE = document.createElement('div')
|
|
326
|
-
objE.innerHTML = arg
|
|
327
|
-
return objE.childNodes
|
|
328
|
-
}
|
|
329
|
-
defaultUI = document.createElement('div')
|
|
330
|
-
defaultUI.setAttribute('id', `${this.id}-popup-default`)
|
|
331
|
-
// 构建头部DOM
|
|
332
|
-
const headerDom = document.createElement('div')
|
|
333
|
-
headerDom.setAttribute('class', 'zondy-popup__header')
|
|
334
|
-
headerDom.setAttribute('style', 'display: flex;')
|
|
335
|
-
// 收缩按钮
|
|
336
|
-
const toggleDom = string2Dom(`<div class="zondy-popup__toggle">
|
|
337
|
-
<svg aria-hidden="true" class="svg" fill="currentColor" height="16px" width="16px" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M5 13.793l7-7 7 7v1.414l-7-7-7 7z"></path></svg>
|
|
338
|
-
</div>`)[0]
|
|
339
|
-
// 关闭按钮
|
|
340
|
-
const closeDom = string2Dom(`<div class="zondy-popup__close">
|
|
341
|
-
<svg aria-hidden="true" class="svg" fill="currentColor" height="16px" width="16px" viewBox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M3.98 11.303L7.281 8 3.98 4.697l.707-.707L7.99 7.293l.01-.01.01.01 3.304-3.303.707.707L8.718 8l3.303 3.303-.707.707L8.01 8.707l-.01.01-.01-.01-3.304 3.303z"></path></svg>
|
|
342
|
-
</div>`)[0]
|
|
343
|
-
if (title) {
|
|
344
|
-
const titleDom = string2Dom(`<div style="flex: 1;"></div>`)[0]
|
|
345
|
-
headerDom.appendChild(titleDom)
|
|
346
|
-
if (typeof title === 'object') {
|
|
347
|
-
if (title instanceof Node) {
|
|
348
|
-
titleDom.appendChild(title)
|
|
349
|
-
} else if (title instanceof NodeList) {
|
|
350
|
-
title.forEach((dom) => {
|
|
351
|
-
titleDom.appendChild(dom)
|
|
352
|
-
})
|
|
353
|
-
}
|
|
354
|
-
} else {
|
|
355
|
-
titleDom.innerHTML = title
|
|
356
|
-
}
|
|
357
|
-
if (this.defaultButtons.indexOf('toggle') > -1) {
|
|
358
|
-
headerDom.appendChild(toggleDom)
|
|
359
|
-
let showContentFlag = true
|
|
360
|
-
// 收缩按钮事件
|
|
361
|
-
toggleDom.onclick = function () {
|
|
362
|
-
showContentFlag = !showContentFlag
|
|
363
|
-
if (showContentFlag) {
|
|
364
|
-
document
|
|
365
|
-
.getElementById(`${self.id}-popup-default`)
|
|
366
|
-
.querySelector('.zondy-popup__content').style.display = 'block'
|
|
367
|
-
} else {
|
|
368
|
-
document
|
|
369
|
-
.getElementById(`${self.id}-popup-default`)
|
|
370
|
-
.querySelector('.zondy-popup__content').style.display = 'none'
|
|
371
|
-
}
|
|
372
|
-
}
|
|
373
|
-
}
|
|
374
|
-
if (this.defaultButtons.indexOf('close') > -1) {
|
|
375
|
-
headerDom.appendChild(closeDom)
|
|
376
|
-
// 关闭按钮事件
|
|
377
|
-
closeDom.onclick = () => {
|
|
378
|
-
this.close()
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
}
|
|
382
|
-
// 构建中间内容DOM
|
|
383
|
-
const contentDom = document.createElement('div')
|
|
384
|
-
contentDom.setAttribute('class', 'zondy-popup__content')
|
|
385
|
-
if (content) {
|
|
386
|
-
if (typeof content === 'object') {
|
|
387
|
-
if (content instanceof Node) {
|
|
388
|
-
contentDom.appendChild(content)
|
|
389
|
-
} else if (content instanceof NodeList) {
|
|
390
|
-
// content.forEach((dom)=>{
|
|
391
|
-
// contentDom.appendChild(dom)
|
|
392
|
-
// })
|
|
393
|
-
for (let i = 0; i < content.length; i++) {
|
|
394
|
-
contentDom.appendChild(content[i])
|
|
395
|
-
i--
|
|
396
|
-
}
|
|
397
|
-
}
|
|
398
|
-
} else {
|
|
399
|
-
contentDom.innerHTML = content
|
|
400
|
-
}
|
|
401
|
-
}
|
|
402
|
-
// 构建底部页脚DOM
|
|
403
|
-
const footerDom = document.createElement('div')
|
|
404
|
-
footerDom.setAttribute('class', 'zondy-popup__footer')
|
|
405
|
-
// 缩放按钮
|
|
406
|
-
const zoomDom =
|
|
407
|
-
string2Dom(`<div class="zondy-popup__zoom" style="display: inline-block;width: 36px;height: 36px;line-height: 36px;text-align: center;">
|
|
408
|
-
<svg class="svg" fill="currentColor" height="16px" width="16px" viewBox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M9 7H7v2H6V7H4V6h2V4h1v2h2zm6.805 7.861l-.943.942a.665.665 0 0 1-.943 0l-3.067-3.067a.667.667 0 0 1 0-.943l.129-.13-1.108-1.107A5.279 5.279 0 1 1 11.8 6.5a5.251 5.251 0 0 1-1.237 3.366l1.108 1.108.124-.124a.668.668 0 0 1 .943 0l3.067 3.068a.666.666 0 0 1 0 .943zM10.8 6.5a4.3 4.3 0 1 0-4.3 4.3 4.304 4.304 0 0 0 4.3-4.3zm4.062 7.89l-2.595-2.598-.473.473 2.597 2.595z"></path></svg>
|
|
409
|
-
</div>`)[0]
|
|
410
|
-
if (this.defaultButtons.indexOf('zoom') > -1) {
|
|
411
|
-
footerDom.appendChild(zoomDom)
|
|
412
|
-
// 缩放按钮事件
|
|
413
|
-
zoomDom.onclick = function () {
|
|
414
|
-
self.view._setZoomAndCenter({
|
|
415
|
-
zoom: self.view._zoom + 1,
|
|
416
|
-
center: self.location
|
|
417
|
-
})
|
|
418
|
-
}
|
|
419
|
-
}
|
|
420
|
-
// footer有子节点,增加分割线样式
|
|
421
|
-
if (footerDom.childNodes.length > 0) {
|
|
422
|
-
footerDom.setAttribute(
|
|
423
|
-
'class',
|
|
424
|
-
'zondy-popup__footer zondy-popup__footer-division'
|
|
425
|
-
)
|
|
426
|
-
}
|
|
427
|
-
defaultUI.appendChild(headerDom)
|
|
428
|
-
defaultUI.appendChild(contentDom)
|
|
429
|
-
defaultUI.appendChild(footerDom)
|
|
430
|
-
return defaultUI
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
/**
|
|
434
|
-
* 获取偏移对象
|
|
435
|
-
* @private
|
|
436
|
-
*/
|
|
437
|
-
_getOffset() {}
|
|
438
|
-
|
|
439
|
-
/**
|
|
440
|
-
* 将锚点位置转换成x、y方向偏移量
|
|
441
|
-
* @private
|
|
442
|
-
*/
|
|
443
|
-
_getOffsetByAlignment(alignment, width, height) {
|
|
444
|
-
let offsetX = 0
|
|
445
|
-
let offsetY = 0
|
|
446
|
-
switch (alignment) {
|
|
447
|
-
case 'top-left':
|
|
448
|
-
offsetX = width / 2
|
|
449
|
-
offsetY = height
|
|
450
|
-
break
|
|
451
|
-
case 'top-center':
|
|
452
|
-
offsetY = height
|
|
453
|
-
break
|
|
454
|
-
case 'top-right':
|
|
455
|
-
offsetX = -width / 2
|
|
456
|
-
offsetY = height
|
|
457
|
-
break
|
|
458
|
-
case 'bottom-left':
|
|
459
|
-
offsetX = width / 2
|
|
460
|
-
break
|
|
461
|
-
case 'auto':
|
|
462
|
-
case 'bottom-center':
|
|
463
|
-
break
|
|
464
|
-
case 'bottom-right':
|
|
465
|
-
offsetX = -width / 2
|
|
466
|
-
break
|
|
467
|
-
default:
|
|
468
|
-
break
|
|
469
|
-
}
|
|
470
|
-
return { x: offsetX, y: offsetY }
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
/**
|
|
474
|
-
* 关闭popup弹窗
|
|
475
|
-
* */
|
|
476
|
-
close() {
|
|
477
|
-
if (this.view._innerView) {
|
|
478
|
-
this._popup.remove()
|
|
479
|
-
}
|
|
480
|
-
}
|
|
481
|
-
|
|
482
|
-
destroy() {}
|
|
483
|
-
}
|
|
484
|
-
export default Popup
|
|
485
|
-
</code></pre>
|
|
486
|
-
</article>
|
|
487
|
-
</section>
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
</div>
|
|
493
|
-
|
|
494
|
-
<footer class="footer">
|
|
495
|
-
<div class="content has-text-centered">
|
|
496
|
-
<p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
|
|
497
|
-
<p class="sidebar-created-by">
|
|
498
|
-
<a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
|
|
499
|
-
<a href="http://192.168.82.89:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
|
|
500
|
-
</p>
|
|
501
|
-
</div>
|
|
502
|
-
</footer>
|
|
503
|
-
|
|
504
|
-
</div>
|
|
505
|
-
<div id="side-nav" class="side-nav">
|
|
506
|
-
<div style="margin-bottom: 10px;">
|
|
507
|
-
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
|
|
508
|
-
</div>
|
|
509
|
-
<div style="margin-bottom: 10px;">
|
|
510
|
-
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
|
|
511
|
-
</div>
|
|
512
|
-
<div style="margin-bottom: 10px;">
|
|
513
|
-
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
|
|
514
|
-
</div>
|
|
515
|
-
<div>
|
|
516
|
-
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
|
|
517
|
-
</div>
|
|
518
|
-
</div>
|
|
519
|
-
</div>
|
|
520
|
-
<script src="scripts/linenumber.js"> </script>
|
|
521
|
-
|
|
522
|
-
<script src="scripts/search.js"> </script>
|
|
523
|
-
|
|
524
|
-
</body>
|
|
525
|
-
</html>
|