@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.
Files changed (91) hide show
  1. package/README.md +51 -124
  2. package/dist/es5/webclient-common.min.js +90 -0
  3. package/dist/es5/webclient-mapboxgl-plugin.min.js +1 -0
  4. package/dist/webclient-mapboxgl-plugin-es6.min.js +1 -0
  5. package/documention/EchartsLayer.html +379 -0
  6. package/documention/MapViewMapboxgl.html +3587 -0
  7. package/documention/Popup.html +1523 -0
  8. package/documention/Screenshot.html +1089 -0
  9. package/documention/SketchEditorMapboxgl.html +3383 -0
  10. package/documention/document_ArcGISVectorTileLayerView.js.html +265 -0
  11. package/documention/document_EchartsLayerView.js.html +246 -0
  12. package/documention/document_GraphicsLayerView.js.html +314 -0
  13. package/documention/document_IGSFeatureLayerView.js.html +218 -0
  14. package/documention/document_IGSMapImageLayerView.js.html +240 -0
  15. package/documention/document_IGSTileLayerView.js.html +236 -0
  16. package/documention/document_IGSVectorTileLayerView.js.html +264 -0
  17. package/documention/document_MapVLayerView.js.html +247 -0
  18. package/documention/document_WMSLayerView.js.html +240 -0
  19. package/documention/document_WMTSLayerView.js.html +234 -0
  20. package/documention/document_WebTileLayerView.js.html +240 -0
  21. package/documention/document_support_FeatureRenderView.js.html +682 -0
  22. package/documention/document_support_MapboxglGraphicsLayer.js.html +1184 -0
  23. package/documention/document_support_SourceMetaData.js.html +223 -0
  24. package/documention/document_support_Utils.js.html +624 -0
  25. package/documention/document_support_mapbox_mapboxCustomUtil.js.html +322 -0
  26. package/documention/global.html +252 -0
  27. package/documention/index.html +251 -0
  28. 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
  29. package/documention/scripts/app.min.js +1 -0
  30. package/documention/scripts/linenumber.js +26 -0
  31. package/documention/scripts/search.js +45 -0
  32. package/documention/scripts/sideBar.js +11 -0
  33. package/documention/sketchEditor_SketchEditorMapboxgl.js.html +875 -0
  34. package/documention/styles/anchor.png +0 -0
  35. package/documention/styles/app.min.css +1 -0
  36. package/documention/styles/c.png +0 -0
  37. package/documention/styles/iframe.css +29 -0
  38. package/documention/styles/m.png +0 -0
  39. package/documention/styles/prettify-jsdoc.css +111 -0
  40. package/documention/styles/prettify-tomorrow.css +132 -0
  41. package/documention/styles/reset.css +44 -0
  42. package/documention/styles/up-arrow.png +0 -0
  43. package/documention/tutorial-1./345/277/253/351/200/237/345/205/245/351/227/250.html +165 -0
  44. package/documention/util_ConvertRendererToStyleLayerUtil.js.html +844 -0
  45. package/documention/util_MapboxglFeatureRender.js.html +225 -0
  46. package/documention/util_MapboxglPlugin.js.html +284 -0
  47. package/documention/view_MapViewMapboxgl.js.html +1882 -0
  48. package/documention/view_utils_ArcGISVectorTileLayerUtil.js.html +382 -0
  49. package/documention/view_utils_EchartsLayerUtil.js.html +194 -0
  50. package/documention/view_utils_IGSMapImageUtil.js.html +373 -0
  51. package/documention/view_utils_IGSTileLayerUtil.js.html +285 -0
  52. package/documention/view_utils_IGSVectorTileLayerUtil.js.html +379 -0
  53. package/documention/view_utils_MapVLayerUtil.js.html +197 -0
  54. package/documention/view_utils_Popup.js.html +525 -0
  55. package/documention/view_utils_Screenshot.js.html +320 -0
  56. package/documention/view_utils_WMSLayerUtil.js.html +337 -0
  57. package/documention/view_utils_WMTSLayerUtil.js.html +331 -0
  58. package/documention/view_utils_WebTileLayerUtil.js.html +284 -0
  59. package/documention/view_utils_echarts_EchartsLayerPlugin.js.html +419 -0
  60. package/documention/view_utils_mapV_MapVLayerPlugin.js.html +527 -0
  61. package/documention/view_utils_mapV_MapvBaseLayer.js.html +477 -0
  62. package/documention/view_utils_support_rasterLayerUtil.js.html +244 -0
  63. package/documention/view_utils_support_vectorLayerUtil.js.html +503 -0
  64. package/package.json +20 -20
  65. package/core/Base.js +0 -15
  66. package/core/index.js +0 -5
  67. package/index.js +0 -6
  68. package/overlay/D3Layer.js +0 -108
  69. package/overlay/EchartsLayer.js +0 -242
  70. package/overlay/ElsCubeLayer.js +0 -125
  71. package/overlay/MapvLayer.js +0 -296
  72. package/overlay/StreamLayer.js +0 -83
  73. package/overlay/TimeSpaceCubeLayer.js +0 -135
  74. package/overlay/dthree/mapbox-d3.css +0 -9
  75. package/overlay/echarts/MapCoordSys.js +0 -105
  76. package/overlay/echarts/MapModel.js +0 -0
  77. package/overlay/echarts/MapView.js +0 -0
  78. package/overlay/echarts/index.js +0 -4
  79. package/overlay/index.js +0 -31
  80. package/overlay/mapv/MapvBaseLayer.js +0 -299
  81. package/overlay/mapv/index.js +0 -5
  82. package/overlay/stream/GeojsonStreamLayer.js +0 -135
  83. package/overlay/stream/MapvStreamLayer.js +0 -79
  84. package/overlay/stream/index.js +0 -3
  85. package/overlay/stream/popup.css +0 -31
  86. package/service/index.js +0 -1
  87. package/service/socket/ISocketService.js +0 -121
  88. package/service/socket/SocketEvent.js +0 -50
  89. package/service/socket/SocketService.js +0 -90
  90. package/util/Evented.js +0 -295
  91. package/util/Util.js +0 -348
@@ -0,0 +1,3587 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+
6
+ <meta charset="utf-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1">
8
+ <title>Client for JavaScript MapViewMapboxgl</title>
9
+ <!--[if lt IE 9]>
10
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11
+ <![endif]-->
12
+ <link type="text/css" rel="stylesheet" href="styles/app.min.css">
13
+ <link type="text/css" rel="stylesheet" href="styles/iframe.css">
14
+ <link type="text/css" rel="stylesheet" href="">
15
+
16
+
17
+ </head>
18
+
19
+
20
+
21
+ <body class="layout small-header">
22
+ <div id="stickyNavbarOverlay"></div>
23
+
24
+
25
+ <div class="top-nav">
26
+ <div class="inner">
27
+ <a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
28
+ <span aria-hidden="true"></span>
29
+ <span aria-hidden="true"></span>
30
+ <span aria-hidden="true"></span>
31
+ </a>
32
+ <div class="logo">
33
+
34
+ <h1> MapGIS Client for JavaScript API</h1>
35
+
36
+
37
+ </div>
38
+ <div class="menu">
39
+
40
+ <div class="navigation">
41
+
42
+
43
+ <a
44
+ class="link user-link "
45
+ href="/static/modules/common/api/common-mapgis/index.html"
46
+ >
47
+ Common
48
+ </a>
49
+
50
+ <a
51
+ class="link user-link "
52
+ href="/static/modules/cesium/api/cesium-mapgis/index.html"
53
+ >
54
+ Cesium-Plugin
55
+ </a>
56
+
57
+ <a
58
+ class="link user-link "
59
+ href="/static/modules/mapboxgl/api/mapboxgl-mapgis/index.html"
60
+ >
61
+ MapboxGL-Plugin
62
+ </a>
63
+
64
+ <a
65
+ class="link user-link "
66
+ href="/static/modules/leaflet/api/leaflet-mapgis/index.html"
67
+ >
68
+ Leaflet-Plugin
69
+ </a>
70
+
71
+ <a
72
+ class="link user-link "
73
+ href="/static/modules/openlayers/api/openLayers-mapgis/index.html"
74
+ >
75
+ OpenLayers-Plugin
76
+ </a>
77
+
78
+ <a
79
+ class="link user-link "
80
+ href="/static/modules/video/api/video-mapgis/index.html"
81
+ >
82
+ Video-Plugin
83
+ </a>
84
+
85
+
86
+
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <div id="main">
93
+ <div
94
+ class="sidebar "
95
+ id="sidebarNav"
96
+ >
97
+ <div>
98
+ <span class="mapgis-api-document-span"><a href="index.html">API文档</a></span>
99
+ </div>
100
+
101
+ <div class="search-wrapper">
102
+ <input id="search" type="text" placeholder="搜索文档..." class="input">
103
+ </div>
104
+
105
+ <nav>
106
+
107
+ <div class="category"><div onclick="toggleSideBar('ViewModule-sidebar')" id="ViewModule" 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 id="ViewModule-sidebar" class="mapgis-sidebar-menus"><li class="mapgis-link"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a class="mapgis-link-name" title="MapViewMapboxgl" href="MapViewMapboxgl.html">MapViewMapboxgl</a><img id="MapViewMapboxgl-detail-arrow" onclick="toggleLinkDetail('MapViewMapboxgl-detail')" style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/up-arrow.png" alt=""><span style="display: none;"><p>二维场景视图(mapboxgl引擎),对地图引擎进行管理,如果要对地图图层进行管理请参考<code>Map</code>,<br/>
108
+ 参考示例:
109
+ <a href='#MapViewMapboxgl'>[初始化二维场景视图]</a>
110
+ <br>[ES5引入方式]:<br/>
111
+ Zondy.MapViewMapboxgl() <br/>
112
+ [ES6引入方式]:<br/>
113
+ import { MapViewMapboxgl } from '@mapgis/webclient-mapboxgl-plugin' <br/></p></span></li><div class="mapgis-link-detail" id="MapViewMapboxgl-detail"><div><a href="MapViewMapboxgl.html#page-title">构造函数</a></div><div><a class="mapgis-link-name" href="MapViewMapboxgl.html#function">方法</a></div><div><ul><li><a title="fromJSON" class="mapgis-link-name" href="MapViewMapboxgl.html#fromJSON">fromJSON</a></li><li><a title="flyTo" class="mapgis-link-name" href="MapViewMapboxgl.html#flyTo">flyTo</a></li><li><a title="getCenter" class="mapgis-link-name" href="MapViewMapboxgl.html#getCenter">getCenter</a></li><li><a title="getExtent" class="mapgis-link-name" href="MapViewMapboxgl.html#getExtent">getExtent</a></li><li><a title="getScale" class="mapgis-link-name" href="MapViewMapboxgl.html#getScale">getScale</a></li><li><a title="getSize" class="mapgis-link-name" href="MapViewMapboxgl.html#getSize">getSize</a></li><li><a title="getZoom" class="mapgis-link-name" href="MapViewMapboxgl.html#getZoom">getZoom</a></li><li><a title="goTo" class="mapgis-link-name" href="MapViewMapboxgl.html#goTo">goTo</a></li><li><a title="hitTest" class="mapgis-link-name" href="MapViewMapboxgl.html#hitTest">hitTest</a></li><li><a title="takeScreenshot" class="mapgis-link-name" href="MapViewMapboxgl.html#takeScreenshot">takeScreenshot</a></li><li><a title="toJSON" class="mapgis-link-name" href="MapViewMapboxgl.html#toJSON">toJSON</a></li><li><a title="toMap" class="mapgis-link-name" href="MapViewMapboxgl.html#toMap">toMap</a></li><li><a title="toScreen" class="mapgis-link-name" href="MapViewMapboxgl.html#toScreen">toScreen</a></li></ul></div><div><a class="mapgis-link-name" href="MapViewMapboxgl.html#member">成员变量</a></div><div><ul><li><a title="engineType" class="mapgis-link-name" href="MapViewMapboxgl.html#engineType">engineType</a></li></ul></div></div><li class="mapgis-link"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a class="mapgis-link-name" title="Popup" href="Popup.html">Popup</a><img id="Popup-detail-arrow" onclick="toggleLinkDetail('Popup-detail')" style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/up-arrow.png" alt=""><span style="display: none;"><p>二维场景信息弹窗(mapboxgl引擎)
114
+ 参考示例:
115
+ <a href='#MapView'>[初始化二维场景视图]</a>
116
+ [ES6引入方式]:<br/>
117
+ import { Popup } from '@mapgis/webclient-mapboxgl-plugin' <br/>
118
+ 自定义样式说明:<br/>
119
+ zondy-popup__content 弹窗容器样式<br/>
120
+ zondy-popup__tip 弹窗对话框箭头样式<br/>
121
+ zondy-popup__header 弹窗头部样式<br/>
122
+ zondy-popup__content 弹窗主体样式<br/>
123
+ zondy-popup__footer 弹窗底部样式<br/></p></span></li><div class="mapgis-link-detail" id="Popup-detail"><div><a href="Popup.html#page-title">构造函数</a></div><div><a class="mapgis-link-name" href="Popup.html#function">方法</a></div><div><ul><li><a title="close" class="mapgis-link-name" href="Popup.html#close">close</a></li><li><a title="open" class="mapgis-link-name" href="Popup.html#open">open</a></li><li><a title="openPopup" class="mapgis-link-name" href="Popup.html#openPopup">openPopup</a></li></ul></div><div><a class="mapgis-link-name" href="Popup.html#member">成员变量</a></div><div><ul><li><a title="alignment" class="mapgis-link-name" href="Popup.html#alignment">alignment</a></li><li><a title="content" class="mapgis-link-name" href="Popup.html#content">content</a></li><li><a title="defaultButtons" class="mapgis-link-name" href="Popup.html#defaultButtons">defaultButtons</a></li><li><a title="location" class="mapgis-link-name" href="Popup.html#location">location</a></li><li><a title="title" class="mapgis-link-name" href="Popup.html#title">title</a></li><li><a title="view" class="mapgis-link-name" href="Popup.html#view">view</a></li></ul></div></div><li class="mapgis-link"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a class="mapgis-link-name" title="Screenshot" href="Screenshot.html">Screenshot</a><img id="Screenshot-detail-arrow" onclick="toggleLinkDetail('Screenshot-detail')" style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/up-arrow.png" alt=""><span style="display: none;"><p>打印工具</p></span></li><div class="mapgis-link-detail" id="Screenshot-detail"><div><a href="Screenshot.html#page-title">构造函数</a></div><div><a class="mapgis-link-name" href="Screenshot.html#member">成员变量</a></div><div><ul><li><a title="filename" class="mapgis-link-name" href="Screenshot.html#filename">filename</a></li><li><a title="format" class="mapgis-link-name" href="Screenshot.html#format">format</a></li><li><a title="height" class="mapgis-link-name" href="Screenshot.html#height">height</a></li><li><a title="isDownload" class="mapgis-link-name" href="Screenshot.html#isDownload">isDownload</a></li><li><a title="view" class="mapgis-link-name" href="Screenshot.html#view">view</a></li><li><a title="width" class="mapgis-link-name" href="Screenshot.html#width">width</a></li><li><a title="x" class="mapgis-link-name" href="Screenshot.html#x">x</a></li><li><a title="y" class="mapgis-link-name" href="Screenshot.html#y">y</a></li></ul></div></div></ul><div onclick="toggleSideBar('SketchEditorModule-sidebar')" id="SketchEditorModule" 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 id="SketchEditorModule-sidebar" class="mapgis-sidebar-menus"><li class="mapgis-link"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a class="mapgis-link-name" title="SketchEditorMapboxgl" href="SketchEditorMapboxgl.html">SketchEditorMapboxgl</a><img id="SketchEditorMapboxgl-detail-arrow" onclick="toggleLinkDetail('SketchEditorMapboxgl-detail')" style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/up-arrow.png" alt=""><span style="display: none;"><p>二维Mapboxgl引擎草图编辑类<br/>
124
+ <br>[ES5引入方式]:<br/>
125
+ const { SketchEditorMapboxgl } = Zondy <br/>
126
+ [ES6引入方式]:<br/>
127
+ import { SketchEditorMapboxgl } from &quot;@mapgis/webclient-leaflet-plugin&quot; <br/></p></span></li><div class="mapgis-link-detail" id="SketchEditorMapboxgl-detail"><div><a href="SketchEditorMapboxgl.html#page-title">构造函数</a></div><div><a class="mapgis-link-name" href="SketchEditorMapboxgl.html#function">方法</a></div><div><ul><li><a title="addVertex" class="mapgis-link-name" href="SketchEditorMapboxgl.html#addVertex">addVertex</a></li><li><a title="canRedo" class="mapgis-link-name" href="SketchEditorMapboxgl.html#canRedo">canRedo</a></li><li><a title="canUndo" class="mapgis-link-name" href="SketchEditorMapboxgl.html#canUndo">canUndo</a></li><li><a title="drawPolylineToPolygon" class="mapgis-link-name" href="SketchEditorMapboxgl.html#drawPolylineToPolygon">drawPolylineToPolygon</a></li><li><a title="getGeometry" class="mapgis-link-name" href="SketchEditorMapboxgl.html#getGeometry">getGeometry</a></li><li><a title="getSketchStyle" class="mapgis-link-name" href="SketchEditorMapboxgl.html#getSketchStyle">getSketchStyle</a></li><li><a title="redo" class="mapgis-link-name" href="SketchEditorMapboxgl.html#redo">redo</a></li><li><a title="remove" class="mapgis-link-name" href="SketchEditorMapboxgl.html#remove">remove</a></li><li><a title="removeVertex" class="mapgis-link-name" href="SketchEditorMapboxgl.html#removeVertex">removeVertex</a></li><li><a title="setSketchStyle" class="mapgis-link-name" href="SketchEditorMapboxgl.html#setSketchStyle">setSketchStyle</a></li><li><a title="split" class="mapgis-link-name" href="SketchEditorMapboxgl.html#split">split</a></li><li><a title="start" class="mapgis-link-name" href="SketchEditorMapboxgl.html#start">start</a></li><li><a title="startCustomDrawTool" class="mapgis-link-name" href="SketchEditorMapboxgl.html#startCustomDrawTool">startCustomDrawTool</a></li><li><a title="stop" class="mapgis-link-name" href="SketchEditorMapboxgl.html#stop">stop</a></li><li><a title="undo" class="mapgis-link-name" href="SketchEditorMapboxgl.html#undo">undo</a></li><li><a title="union" class="mapgis-link-name" href="SketchEditorMapboxgl.html#union">union</a></li><li><a title="updateVertex" class="mapgis-link-name" href="SketchEditorMapboxgl.html#updateVertex">updateVertex</a></li></ul></div></div></ul></div>
128
+
129
+ </nav>
130
+ </div>
131
+ <div class="core" id="main-content-wrapper">
132
+ <div class="content">
133
+ <header id="page-title" class="page-title">
134
+
135
+ <span class="page-title-main">类名</span>
136
+ <span class="page-title-sub">MapViewMapboxgl</span>
137
+
138
+ </header>
139
+
140
+
141
+
142
+
143
+
144
+ <section>
145
+
146
+ <article>
147
+ <div class="container-overview">
148
+
149
+
150
+ <div class='vertical-section'>
151
+ <div class="members">
152
+ <div class="member">
153
+
154
+
155
+
156
+
157
+ <h4 class="name" id="MapViewMapboxgl">
158
+ <a class="href-link" href="#MapViewMapboxgl">#</a>
159
+
160
+ <span class="code-name" id="MapViewMapboxgl" style="font-size:30px">
161
+
162
+ new MapViewMapboxgl<span class="signature">(options)</span>
163
+
164
+ </span>
165
+ </h4>
166
+
167
+
168
+
169
+ <div class="description">
170
+ <p>二维场景视图(mapboxgl引擎),对地图引擎进行管理,如果要对地图图层进行管理请参考<code>Map</code>,<br/>
171
+ 参考示例:
172
+ <a href='#MapViewMapboxgl'>[初始化二维场景视图]</a>
173
+ <br>[ES5引入方式]:<br/>
174
+ Zondy.MapViewMapboxgl() <br/>
175
+ [ES6引入方式]:<br/>
176
+ import { MapViewMapboxgl } from '@mapgis/webclient-mapboxgl-plugin' <br/></p>
177
+ </div>
178
+
179
+
180
+
181
+
182
+
183
+
184
+
185
+
186
+
187
+
188
+ <h4>参数</h4>
189
+
190
+ <div class="table-container">
191
+ <table class="params table">
192
+ <thead>
193
+ <tr>
194
+
195
+ <th>名称</th>
196
+
197
+
198
+ <th>类型</th>
199
+
200
+
201
+ <th style="min-width: 100px;">默认值</th>
202
+
203
+
204
+ <th class="last">描述</th>
205
+ </tr>
206
+ </thead>
207
+
208
+ <tbody>
209
+
210
+
211
+
212
+ <tr class="deep-level-0">
213
+
214
+ <td class="name" id="options"><code>options</code></td>
215
+
216
+
217
+ <td class="type">
218
+
219
+
220
+ <span class="param-type">Object</span>
221
+
222
+
223
+
224
+ </td>
225
+
226
+
227
+ <td class="default">
228
+
229
+ </td>
230
+
231
+
232
+ <td class="description last"><p>构造参数</p></td>
233
+ </tr>
234
+
235
+
236
+
237
+
238
+ <tr class="deep-level-1">
239
+
240
+ <td class="name" id="map"><code>map</code></td>
241
+
242
+
243
+ <td class="type">
244
+
245
+
246
+ <span class="param-type">Map</span>
247
+
248
+
249
+
250
+ </td>
251
+
252
+
253
+ <td class="default">
254
+
255
+ </td>
256
+
257
+
258
+ <td class="description last"><p>图层管理容器对象</p></td>
259
+ </tr>
260
+
261
+
262
+
263
+
264
+ <tr class="deep-level-1">
265
+
266
+ <td class="name" id="viewId"><code>viewId</code></td>
267
+
268
+
269
+ <td class="type">
270
+
271
+
272
+ <span class="param-type">String</span>
273
+
274
+
275
+
276
+ </td>
277
+
278
+
279
+ <td class="default">
280
+
281
+ </td>
282
+
283
+
284
+ <td class="description last"><p>二维场景视图的容器(html的div标签)ID</p></td>
285
+ </tr>
286
+
287
+
288
+
289
+
290
+ <tr class="deep-level-1">
291
+
292
+ <td class="name" id="zoom"><code>zoom</code></td>
293
+
294
+
295
+ <td class="type">
296
+
297
+
298
+ <span class="param-type">Number</span>
299
+
300
+
301
+
302
+ </td>
303
+
304
+
305
+ <td class="default">
306
+
307
+ 0
308
+
309
+ </td>
310
+
311
+
312
+ <td class="description last"><p>初始化二维场景视图时显示级数</p></td>
313
+ </tr>
314
+
315
+
316
+
317
+
318
+ <tr class="deep-level-1">
319
+
320
+ <td class="name" id="center"><code>center</code></td>
321
+
322
+
323
+ <td class="type">
324
+
325
+
326
+ <span class="param-type">Point</span>
327
+
328
+
329
+
330
+ </td>
331
+
332
+
333
+ <td class="default">
334
+
335
+ </td>
336
+
337
+
338
+ <td class="description last"><p>地图视图中心点</p></td>
339
+ </tr>
340
+
341
+
342
+
343
+
344
+ <tr class="deep-level-1">
345
+
346
+ <td class="name" id="extent"><code>extent</code></td>
347
+
348
+
349
+ <td class="type">
350
+
351
+
352
+ <span class="param-type">Extent</span>
353
+
354
+
355
+
356
+ </td>
357
+
358
+
359
+ <td class="default">
360
+
361
+ </td>
362
+
363
+
364
+ <td class="description last"><p>地图视图可视范围</p></td>
365
+ </tr>
366
+
367
+
368
+
369
+
370
+ <tr class="deep-level-1">
371
+
372
+ <td class="name" id="scale"><code>scale</code></td>
373
+
374
+
375
+ <td class="type">
376
+
377
+
378
+ <span class="param-type">Number</span>
379
+
380
+
381
+
382
+ </td>
383
+
384
+
385
+ <td class="default">
386
+
387
+ </td>
388
+
389
+
390
+ <td class="description last"><p>地图视图比例尺(比例尺的分母)</p></td>
391
+ </tr>
392
+
393
+
394
+
395
+
396
+ <tr class="deep-level-1">
397
+
398
+ <td class="name" id="maxScale"><code>maxScale</code></td>
399
+
400
+
401
+ <td class="type">
402
+
403
+
404
+ <span class="param-type">Number</span>
405
+
406
+
407
+
408
+ </td>
409
+
410
+
411
+ <td class="default">
412
+
413
+ </td>
414
+
415
+
416
+ <td class="description last"><p>地图视图的最大比例尺(比例尺的分母,该值越小,比例尺越大)。视图的当前比列尺不会大于地图视图的最大比例尺。默认值为undefined,undefined表示用户未设置,视图的最大比例尺不受限制。maxScale的值应该始终小于minScale的值。</p></td>
417
+ </tr>
418
+
419
+
420
+
421
+
422
+ <tr class="deep-level-1">
423
+
424
+ <td class="name" id="minScale"><code>minScale</code></td>
425
+
426
+
427
+ <td class="type">
428
+
429
+
430
+ <span class="param-type">Number</span>
431
+
432
+
433
+
434
+ </td>
435
+
436
+
437
+ <td class="default">
438
+
439
+ </td>
440
+
441
+
442
+ <td class="description last"><p>地图视图的最小比例尺(比例尺的分母,该值越大,比例尺越小)。视图的当前比列尺不会小于地图视图的最小比例尺。默认值为undefined,undefined表示用户未设置,地图视图会根据全图范围,计算视图的最小比例尺。如果用户设置了该值,则地图将直接采用用户设置的值。minScale的值应该始终大于maxScale的值。</p></td>
443
+ </tr>
444
+
445
+
446
+
447
+
448
+ <tr class="deep-level-1">
449
+
450
+ <td class="name" id="popup"><code>popup</code></td>
451
+
452
+
453
+ <td class="type">
454
+
455
+
456
+ <span class="param-type">Object</span>
457
+
458
+
459
+
460
+ </td>
461
+
462
+
463
+ <td class="default">
464
+
465
+ </td>
466
+
467
+
468
+ <td class="description last"><p>地图弹框</p></td>
469
+ </tr>
470
+
471
+
472
+
473
+
474
+
475
+
476
+
477
+ </tbody>
478
+ </table>
479
+ </div>
480
+
481
+
482
+
483
+
484
+
485
+
486
+ <dl class="details">
487
+
488
+
489
+
490
+
491
+
492
+
493
+
494
+
495
+
496
+
497
+
498
+
499
+
500
+
501
+
502
+
503
+
504
+
505
+
506
+
507
+
508
+
509
+
510
+
511
+
512
+
513
+
514
+
515
+
516
+
517
+
518
+ </dl>
519
+
520
+
521
+
522
+
523
+
524
+ <div class="method-parameter columns">
525
+ <div class="column is-2"><label>绑定事件</label></div>
526
+ <div class="column is-10">
527
+ <ul>
528
+ <li>BaseView#event:地图视图加载完毕事件</li>
529
+
530
+ <li>BaseView#event:鼠标点击事件</li>
531
+
532
+ <li>BaseView#event:鼠标双击事件</li>
533
+
534
+ <li>BaseView#event:鼠标按下事件</li>
535
+
536
+ <li>BaseView#event:鼠标抬起事件</li>
537
+
538
+ <li>BaseView#event:鼠标右键点击事件</li>
539
+
540
+ <li>BaseView#event:鼠标移动事件</li>
541
+
542
+ <li>BaseView#event:鼠标移出视图事件</li>
543
+
544
+ <li>BaseView#event:鼠标移入视图事件</li>
545
+
546
+ <li>BaseView#event:zoom变化事件</li>
547
+
548
+ <li>BaseView#event:地图移动事件</li>
549
+
550
+ <li>BaseView#event:地图大小变化事件</li>
551
+
552
+ <li>BaseView#event:键盘输入事件</li>
553
+
554
+ <li>BaseView#event:键盘按下事件</li>
555
+
556
+ <li>BaseView#event:键盘抬起事件</li>
557
+
558
+ <li>BaseView#event:地图视图改变事件</li>
559
+ </ul>
560
+ </div>
561
+ </div>
562
+
563
+
564
+
565
+
566
+
567
+
568
+
569
+
570
+
571
+
572
+
573
+
574
+
575
+
576
+
577
+
578
+
579
+ <p class="summary"><h5>支持如下方法:</h5>
580
+ <a href='#flyTo'>[1、视点跳转]</a><br/>
581
+ <a href='#getCenter'>[2、获取当前视图的中心点]</a><br/>
582
+ <a href='#getZoom'>[3、获取当前缩放级数]</a><br/>
583
+ <a href='#getExtent'>[4、获取当前视图的地理范围]</a><br/>
584
+ <a href='#getSize'>[5、获取当前视图容器的宽高]</a><br/>
585
+ <a href='#toJSON'>[6、导出场景视图的配置文件]</a><br/>
586
+ <a href='#clone'>[7、克隆并返回一个新的场景视图对象]</a><br/>
587
+ <a href='#fromJSON'>[8、通过json构造并返回一个新的场景视图对象]</a><br/>
588
+ <a href='#takeScreenshot'>[9、屏幕快照]</a><br/>
589
+ <code>10、注册事件</code><br/>
590
+ <code>11、移除事件</code><br/>
591
+ <a href='#toMap'>[12、屏幕像素坐标点转地理坐标点]</a><br/>
592
+ <a href='#toScreen'>[13、地理坐标点转屏幕像素坐标点]</a><br/>
593
+ <a href='#hitTest'>[14、穿透检测]</a><br/>
594
+ <a href='#getLayer'>[15、根据实际图层对象查询并返回基础图层]</a><br/>
595
+ <a href='#getScale'>[16、获取当前比例尺]</a><br/></p>
596
+
597
+
598
+
599
+ <h5>示例</h5>
600
+
601
+ <p class="code-caption"><h7 id='MapViewMapboxgl'>初始化一个二维场景视图</h7></p>
602
+
603
+
604
+ <pre class="prettyprint"><code>// ES5引入方式
605
+ const { Map, MapViewMapboxgl } = Zondy
606
+ // ES6引入方式
607
+ import { Map, MapViewMapboxgl } from "@mapgis/webclient-mapboxgl-plugin"
608
+ // 初始化图层管理容器
609
+ const map = new Map();
610
+ // 初始化地图视图对象
611
+ const mapView = new MapViewMapboxgl({
612
+ // 二维场景视图的容器(html的div标签)ID
613
+ viewId: "二维场景视图的容器的id",
614
+ // 图层管理容器
615
+ map: map
616
+ });</code></pre>
617
+
618
+
619
+
620
+
621
+ </div>
622
+ </div>
623
+ </div>
624
+
625
+
626
+ </div>
627
+
628
+
629
+ <h3 class="subsection-title">继承关系</h3>
630
+
631
+
632
+
633
+
634
+ <ul>
635
+ <li>Evented</li>
636
+ </ul>
637
+
638
+
639
+
640
+
641
+
642
+
643
+
644
+
645
+
646
+
647
+
648
+
649
+
650
+
651
+
652
+ <div class='vertical-section'>
653
+ <h3 id='member'>成员变量</h3>
654
+ <h4 style="margin-top: 20px;margin-bottom: 20px;">成员变量概述</h4>
655
+ <div class="table-container">
656
+ <table class="params table">
657
+ <thead>
658
+ <tr>
659
+ <th>名称</th>
660
+ <th>类型</th>
661
+ <th>描述</th>
662
+ </tr>
663
+ </thead>
664
+ <tbody>
665
+
666
+ <tr class="deep-level-0">
667
+ <td class="name"><code><a href="MapViewMapboxgl.html#engineType">engineType</a></code></td>
668
+ <td class="name">
669
+ <code>
670
+
671
+ <span class="param-type">Object</span>
672
+
673
+
674
+ </code>
675
+ </td>
676
+ <td class="name"><code><p>引擎类型,为'mapboxgl'</p></code></td>
677
+ </tr>
678
+
679
+ </tbody>
680
+ </table>
681
+ </div>
682
+ <h4 style="margin-top: 20px;margin-bottom: 20px;">成员变量详情</h4>
683
+ <div class="members">
684
+
685
+ <div class="member">
686
+
687
+ <span class="method-parameter is-pulled-right">
688
+ <label>类型:</label>
689
+
690
+ <span class="param-type">Object</span>
691
+
692
+
693
+ </span>
694
+
695
+ <h4 class="name" id="engineType">
696
+ <a class="href-link" href="#engineType">#</a>
697
+
698
+
699
+ <span class='tag'>readonly</span>
700
+
701
+
702
+ <span class="code-name">
703
+ engineType
704
+ </span>
705
+
706
+ </h4>
707
+
708
+
709
+
710
+
711
+ <div class="description">
712
+ <p>引擎类型,为'mapboxgl'</p>
713
+ </div>
714
+
715
+
716
+
717
+
718
+
719
+ <dl class="details">
720
+
721
+
722
+
723
+
724
+
725
+
726
+
727
+
728
+
729
+
730
+
731
+
732
+
733
+
734
+
735
+
736
+
737
+
738
+
739
+
740
+
741
+
742
+
743
+
744
+
745
+
746
+
747
+
748
+
749
+
750
+
751
+ </dl>
752
+
753
+
754
+
755
+
756
+
757
+ </div>
758
+
759
+ </div>
760
+ </div>
761
+
762
+
763
+
764
+ <div class='vertical-section'>
765
+ <h3 id='function'>方法</h3>
766
+ <h4 style="margin-top: 20px;margin-bottom: 20px;">方法概述</h4>
767
+ <div class="members">
768
+ <div class="table-container">
769
+ <table class="params table">
770
+ <thead>
771
+ <tr>
772
+ <th>名称</th>
773
+ <th>返回值类型</th>
774
+ <th>描述</th>
775
+ </tr>
776
+ </thead>
777
+ <tbody>
778
+
779
+ <tr class="deep-level-0">
780
+ <td class="name"><code><a href="MapViewMapboxgl.html#fromJSON">fromJSON</a></code></td>
781
+ <td class="name">
782
+ <code>
783
+
784
+
785
+ <span class="param-type"><a class="mapgis-link-name" title="MapView" href="MapView.html">MapView</a></span>
786
+
787
+
788
+
789
+ </code>
790
+ </td>
791
+ <td class="name"><code><p><a id='fromJSON'></a>
792
+ 通过一个配置生成一个场景视图对象</p></code></td>
793
+ </tr>
794
+
795
+ <tr class="deep-level-0">
796
+ <td class="name"><code><a href="MapViewMapboxgl.html#flyTo">flyTo</a></code></td>
797
+ <td class="name">
798
+ <code>
799
+
800
+ </code>
801
+ </td>
802
+ <td class="name"><code><p>视点跳转</a></p></code></td>
803
+ </tr>
804
+
805
+ <tr class="deep-level-0">
806
+ <td class="name"><code><a href="MapViewMapboxgl.html#getCenter">getCenter</a></code></td>
807
+ <td class="name">
808
+ <code>
809
+
810
+
811
+ <span class="param-type">Object</span>
812
+
813
+
814
+
815
+ </code>
816
+ </td>
817
+ <td class="name"><code><p>获取当前视图的中心点(经纬度中心点)<a id='getCenter'></a></p></code></td>
818
+ </tr>
819
+
820
+ <tr class="deep-level-0">
821
+ <td class="name"><code><a href="MapViewMapboxgl.html#getExtent">getExtent</a></code></td>
822
+ <td class="name">
823
+ <code>
824
+
825
+
826
+ <span class="param-type">Extent</span>
827
+
828
+
829
+
830
+ </code>
831
+ </td>
832
+ <td class="name"><code><p>获取当前视图的地理范围<a id='getExtent'></a></p></code></td>
833
+ </tr>
834
+
835
+ <tr class="deep-level-0">
836
+ <td class="name"><code><a href="MapViewMapboxgl.html#getScale">getScale</a></code></td>
837
+ <td class="name">
838
+ <code>
839
+
840
+
841
+ <span class="param-type">Number</span>
842
+
843
+
844
+
845
+ </code>
846
+ </td>
847
+ <td class="name"><code><p><a id='getScale'></a>
848
+ 获取当前比例尺</p></code></td>
849
+ </tr>
850
+
851
+ <tr class="deep-level-0">
852
+ <td class="name"><code><a href="MapViewMapboxgl.html#getSize">getSize</a></code></td>
853
+ <td class="name">
854
+ <code>
855
+
856
+
857
+ <span class="param-type">Object</span>
858
+
859
+
860
+
861
+ </code>
862
+ </td>
863
+ <td class="name"><code><p>获取当前视图容器的宽高,单位像素<a id='getSize'></a></p></code></td>
864
+ </tr>
865
+
866
+ <tr class="deep-level-0">
867
+ <td class="name"><code><a href="MapViewMapboxgl.html#getZoom">getZoom</a></code></td>
868
+ <td class="name">
869
+ <code>
870
+
871
+
872
+ <span class="param-type">Number</span>
873
+
874
+
875
+
876
+ </code>
877
+ </td>
878
+ <td class="name"><code><p>获取当前缩放级数<a id='getZoom'></a></p></code></td>
879
+ </tr>
880
+
881
+ <tr class="deep-level-0">
882
+ <td class="name"><code><a href="MapViewMapboxgl.html#goTo">goTo</a></code></td>
883
+ <td class="name">
884
+ <code>
885
+
886
+ </code>
887
+ </td>
888
+ <td class="name"><code><p>视点跳转为给定的目标<a id='goTo'></a></p></code></td>
889
+ </tr>
890
+
891
+ <tr class="deep-level-0">
892
+ <td class="name"><code><a href="MapViewMapboxgl.html#hitTest">hitTest</a></code></td>
893
+ <td class="name">
894
+ <code>
895
+
896
+
897
+ <span class="param-type">Array</span>
898
+
899
+
900
+
901
+ </code>
902
+ </td>
903
+ <td class="name"><code><p>穿透检测,图元拾取。目前支持graphic类型拾取结果,支持图层类型GraphicLayer,FeatureLayer。</p></code></td>
904
+ </tr>
905
+
906
+ <tr class="deep-level-0">
907
+ <td class="name"><code><a href="MapViewMapboxgl.html#takeScreenshot">takeScreenshot</a></code></td>
908
+ <td class="name">
909
+ <code>
910
+
911
+
912
+ <span class="param-type">Object</span>
913
+
914
+
915
+
916
+ </code>
917
+ </td>
918
+ <td class="name"><code><p>屏幕快照</p></code></td>
919
+ </tr>
920
+
921
+ <tr class="deep-level-0">
922
+ <td class="name"><code><a href="MapViewMapboxgl.html#toJSON">toJSON</a></code></td>
923
+ <td class="name">
924
+ <code>
925
+
926
+
927
+ <span class="param-type">Object</span>
928
+
929
+
930
+
931
+ </code>
932
+ </td>
933
+ <td class="name"><code><p><a id='toJSON'></a>
934
+ 导出场景视图的配置文件</p></code></td>
935
+ </tr>
936
+
937
+ <tr class="deep-level-0">
938
+ <td class="name"><code><a href="MapViewMapboxgl.html#toMap">toMap</a></code></td>
939
+ <td class="name">
940
+ <code>
941
+
942
+
943
+ <span class="param-type">Point</span>
944
+
945
+
946
+
947
+ </code>
948
+ </td>
949
+ <td class="name"><code><p><a id='toMap'></a>
950
+ 屏幕像素坐标点转地理坐标点</p></code></td>
951
+ </tr>
952
+
953
+ <tr class="deep-level-0">
954
+ <td class="name"><code><a href="MapViewMapboxgl.html#toScreen">toScreen</a></code></td>
955
+ <td class="name">
956
+ <code>
957
+
958
+
959
+ <span class="param-type">Object</span>
960
+
961
+
962
+
963
+ </code>
964
+ </td>
965
+ <td class="name"><code><p><a id='toScreen'></a>
966
+ 地理坐标点转屏幕像素坐标点</p></code></td>
967
+ </tr>
968
+
969
+ </tbody>
970
+ </table>
971
+ </div>
972
+ <h4 style="margin-top: 20px;margin-bottom: 20px;">方法详情</h4>
973
+
974
+ <div class="member">
975
+
976
+
977
+
978
+ <h4 class="name" id=".fromJSON">
979
+ <a class="href-link" href="#.fromJSON">#</a>
980
+
981
+
982
+ <span class='tag'>static</span>
983
+
984
+
985
+ <span class="code-name" id="fromJSON" style="font-size:30px">
986
+
987
+ fromJSON<span class="signature">(json)</span>
988
+
989
+ </span>
990
+ </h4>
991
+
992
+
993
+
994
+ <div class="description">
995
+ <p><a id='fromJSON'></a>
996
+ 通过一个配置生成一个场景视图对象</p>
997
+ </div>
998
+
999
+
1000
+
1001
+
1002
+
1003
+
1004
+
1005
+
1006
+
1007
+
1008
+ <h4>参数</h4>
1009
+
1010
+ <div class="table-container">
1011
+ <table class="params table">
1012
+ <thead>
1013
+ <tr>
1014
+
1015
+ <th>名称</th>
1016
+
1017
+
1018
+ <th>类型</th>
1019
+
1020
+
1021
+
1022
+ <th class="last">描述</th>
1023
+ </tr>
1024
+ </thead>
1025
+
1026
+ <tbody>
1027
+
1028
+
1029
+
1030
+ <tr class="deep-level-0">
1031
+
1032
+ <td class="name" id="json"><code>json</code></td>
1033
+
1034
+
1035
+ <td class="type">
1036
+
1037
+
1038
+ <span class="param-type">Object</span>
1039
+
1040
+
1041
+
1042
+ </td>
1043
+
1044
+
1045
+
1046
+ <td class="description last"><p>场景视图配置</p></td>
1047
+ </tr>
1048
+
1049
+
1050
+
1051
+
1052
+ </tbody>
1053
+ </table>
1054
+ </div>
1055
+
1056
+
1057
+
1058
+
1059
+
1060
+
1061
+ <dl class="details">
1062
+
1063
+
1064
+
1065
+
1066
+
1067
+
1068
+
1069
+
1070
+
1071
+
1072
+
1073
+
1074
+
1075
+
1076
+
1077
+
1078
+
1079
+
1080
+
1081
+
1082
+
1083
+
1084
+
1085
+
1086
+
1087
+
1088
+
1089
+
1090
+
1091
+
1092
+
1093
+ </dl>
1094
+
1095
+
1096
+
1097
+
1098
+
1099
+
1100
+
1101
+
1102
+
1103
+
1104
+
1105
+
1106
+
1107
+
1108
+
1109
+
1110
+
1111
+
1112
+ <div class='columns method-parameter'>
1113
+ <div class="column is-2"><label>返回值</label></div>
1114
+ <div class="column is-10">
1115
+
1116
+
1117
+
1118
+ <div class="columns">
1119
+
1120
+
1121
+ <div class='column is-5 has-text-left'>
1122
+ <label>类型: </label>
1123
+
1124
+ <span class="param-type"><a class="mapgis-link-name" title="MapView" href="MapView.html">MapView</a></span>
1125
+
1126
+
1127
+ </div>
1128
+
1129
+ </div>
1130
+
1131
+
1132
+ </div>
1133
+ </div>
1134
+
1135
+
1136
+
1137
+
1138
+
1139
+
1140
+ </div>
1141
+
1142
+ <div class="member">
1143
+
1144
+
1145
+
1146
+ <h4 class="name" id="flyTo">
1147
+ <a class="href-link" href="#flyTo">#</a>
1148
+
1149
+ <span class="code-name" id="flyTo" style="font-size:30px">
1150
+
1151
+ flyTo<span class="signature">(options)</span>
1152
+
1153
+ </span>
1154
+ </h4>
1155
+
1156
+
1157
+
1158
+ <div class="description">
1159
+ <p>视点跳转</a></p>
1160
+ </div>
1161
+
1162
+
1163
+
1164
+
1165
+
1166
+
1167
+
1168
+
1169
+
1170
+
1171
+ <h4>参数</h4>
1172
+
1173
+ <div class="table-container">
1174
+ <table class="params table">
1175
+ <thead>
1176
+ <tr>
1177
+
1178
+ <th>名称</th>
1179
+
1180
+
1181
+ <th>类型</th>
1182
+
1183
+
1184
+
1185
+ <th class="last">描述</th>
1186
+ </tr>
1187
+ </thead>
1188
+
1189
+ <tbody>
1190
+
1191
+
1192
+
1193
+ <tr class="deep-level-0">
1194
+
1195
+ <td class="name" id="options"><code>options</code></td>
1196
+
1197
+
1198
+ <td class="type">
1199
+
1200
+ </td>
1201
+
1202
+
1203
+
1204
+ <td class="description last"><p>跳转参数</p></td>
1205
+ </tr>
1206
+
1207
+
1208
+
1209
+
1210
+ <tr class="deep-level-1">
1211
+
1212
+ <td class="name" id="center"><code>center</code></td>
1213
+
1214
+
1215
+ <td class="type">
1216
+
1217
+
1218
+ <span class="param-type">Array</span>
1219
+
1220
+
1221
+
1222
+ </td>
1223
+
1224
+
1225
+
1226
+ <td class="description last"><p>跳转中心点</p></td>
1227
+ </tr>
1228
+
1229
+
1230
+
1231
+
1232
+ <tr class="deep-level-1">
1233
+
1234
+ <td class="name" id="zoom"><code>zoom</code></td>
1235
+
1236
+
1237
+ <td class="type">
1238
+
1239
+
1240
+ <span class="param-type">Number</span>
1241
+
1242
+
1243
+
1244
+ </td>
1245
+
1246
+
1247
+
1248
+ <td class="description last"><p>地图层级</p></td>
1249
+ </tr>
1250
+
1251
+
1252
+
1253
+
1254
+ <tr class="deep-level-1">
1255
+
1256
+ <td class="name" id="extent"><code>extent</code></td>
1257
+
1258
+
1259
+ <td class="type">
1260
+
1261
+
1262
+ <span class="param-type">Extent</span>
1263
+
1264
+
1265
+
1266
+ </td>
1267
+
1268
+
1269
+
1270
+ <td class="description last"><p>按范围跳转</p></td>
1271
+ </tr>
1272
+
1273
+
1274
+
1275
+
1276
+
1277
+
1278
+
1279
+ </tbody>
1280
+ </table>
1281
+ </div>
1282
+
1283
+
1284
+
1285
+
1286
+
1287
+
1288
+ <dl class="details">
1289
+
1290
+
1291
+
1292
+
1293
+
1294
+
1295
+
1296
+
1297
+
1298
+
1299
+
1300
+
1301
+
1302
+
1303
+
1304
+
1305
+
1306
+
1307
+
1308
+
1309
+
1310
+
1311
+
1312
+
1313
+
1314
+
1315
+
1316
+
1317
+
1318
+
1319
+
1320
+ </dl>
1321
+
1322
+
1323
+
1324
+
1325
+
1326
+
1327
+
1328
+
1329
+
1330
+
1331
+
1332
+
1333
+
1334
+
1335
+
1336
+
1337
+
1338
+
1339
+
1340
+
1341
+
1342
+
1343
+
1344
+ <h5>示例</h5>
1345
+
1346
+ <p class="code-caption"><h7>中心点跳转示例</h7></p>
1347
+
1348
+
1349
+ <pre class="prettyprint"><code>// ES5引入方式
1350
+ const { Map, MapViewMapboxgl } = Zondy
1351
+ // ES6引入方式
1352
+ import { Map, MapViewMapboxgl } from "@mapgis/webclient-mapboxgl-plugin"
1353
+ // 初始化图层管理容器
1354
+ map = new .Map();
1355
+ // 初始化地图视图对象
1356
+ mapView = new MapViewMapboxgl({
1357
+ // 视图id
1358
+ viewId: "view-id",
1359
+ // 图层管理容器
1360
+ map: map
1361
+ });
1362
+ // 视点跳转
1363
+ mapView.flyTo({
1364
+ // 跳转中心点
1365
+ center: [{x}, {y}],
1366
+ // 地图层级
1367
+ zoom: {zoom}
1368
+ });</code></pre>
1369
+
1370
+
1371
+ <p class="code-caption"><h7>按范围跳转示例</h7></p>
1372
+
1373
+
1374
+ <pre class="prettyprint"><code>// ES5引入方式
1375
+ const { Map, MapViewMapboxgl } = Zondy
1376
+ const { Extent } = Zondy.Geometry
1377
+ // ES6引入方式
1378
+ import { Map, MapViewMapboxgl, Extent } from "@mapgis/webclient-mapboxgl-plugin"
1379
+ // 初始化图层管理容器
1380
+ map = new Map();
1381
+ // 初始化地图视图对象
1382
+ mapView = new MapViewMapboxgl({
1383
+ // 视图id
1384
+ viewId: "view-id",
1385
+ // 图层管理容器
1386
+ map: map
1387
+ });
1388
+ mapView.flyTo({
1389
+ // 范围几何
1390
+ extent: new Extent({
1391
+ "xmin":10,
1392
+ "xmax":210,
1393
+ "ymin":0,
1394
+ "ymax":100,
1395
+ })
1396
+ });</code></pre>
1397
+
1398
+
1399
+ <p class="code-caption"><h7>按范围跳转示例-拿到图层信息后跳转</h7></p>
1400
+
1401
+
1402
+ <pre class="prettyprint"><code>// ES5引入方式
1403
+ const { IGSMapImageLayer } = Zondy.Layer
1404
+ // ES6引入方式
1405
+ import { IGSMapImageLayer } from "@mapgis/webclient-mapboxgl-plugin"
1406
+ const igsMapImageLayer = new IGSMapImageLayer({
1407
+ url: 'http://webclient.smaryun.com:8089/igs/rest/services/Map/Hubei4326/MapServer'
1408
+ });
1409
+ map.add(igsMapImageLayer);
1410
+ // 图层加载完毕
1411
+ igsMapImageLayer.on('layer-view-created', function (result) {
1412
+ console.log("加载完毕:", result.layer)
1413
+ //视点跳转
1414
+ mapView.flyTo({
1415
+ extent: result.layer.extent
1416
+ });
1417
+ })</code></pre>
1418
+
1419
+
1420
+
1421
+ </div>
1422
+
1423
+ <div class="member">
1424
+
1425
+
1426
+
1427
+ <h4 class="name" id="getCenter">
1428
+ <a class="href-link" href="#getCenter">#</a>
1429
+
1430
+ <span class="code-name" id="getCenter" style="font-size:30px">
1431
+
1432
+ getCenter<span class="signature">()</span>
1433
+
1434
+ </span>
1435
+ </h4>
1436
+
1437
+
1438
+
1439
+ <div class="description">
1440
+ <p>获取当前视图的中心点(经纬度中心点)<a id='getCenter'></a></p>
1441
+ </div>
1442
+
1443
+
1444
+
1445
+
1446
+
1447
+
1448
+
1449
+
1450
+
1451
+
1452
+
1453
+
1454
+
1455
+
1456
+ <dl class="details">
1457
+
1458
+
1459
+
1460
+
1461
+
1462
+
1463
+
1464
+
1465
+
1466
+
1467
+
1468
+
1469
+
1470
+
1471
+
1472
+
1473
+
1474
+
1475
+
1476
+
1477
+
1478
+
1479
+
1480
+
1481
+
1482
+
1483
+
1484
+
1485
+
1486
+
1487
+
1488
+ </dl>
1489
+
1490
+
1491
+
1492
+
1493
+
1494
+
1495
+
1496
+
1497
+
1498
+
1499
+
1500
+
1501
+
1502
+
1503
+
1504
+
1505
+
1506
+
1507
+ <div class='columns method-parameter'>
1508
+ <div class="column is-2"><label>返回值</label></div>
1509
+ <div class="column is-10">
1510
+
1511
+
1512
+
1513
+ <div class="columns">
1514
+
1515
+ <div class='param-desc column is-7'><p>中心点对象</p></div>
1516
+
1517
+
1518
+ <div class='column is-5 has-text-left'>
1519
+ <label>类型: </label>
1520
+
1521
+ <span class="param-type">Object</span>
1522
+
1523
+
1524
+ </div>
1525
+
1526
+ </div>
1527
+
1528
+
1529
+ </div>
1530
+ </div>
1531
+
1532
+
1533
+
1534
+
1535
+
1536
+
1537
+ </div>
1538
+
1539
+ <div class="member">
1540
+
1541
+
1542
+
1543
+ <h4 class="name" id="getExtent">
1544
+ <a class="href-link" href="#getExtent">#</a>
1545
+
1546
+ <span class="code-name" id="getExtent" style="font-size:30px">
1547
+
1548
+ getExtent<span class="signature">()</span>
1549
+
1550
+ </span>
1551
+ </h4>
1552
+
1553
+
1554
+
1555
+ <div class="description">
1556
+ <p>获取当前视图的地理范围<a id='getExtent'></a></p>
1557
+ </div>
1558
+
1559
+
1560
+
1561
+
1562
+
1563
+
1564
+
1565
+
1566
+
1567
+
1568
+
1569
+
1570
+
1571
+
1572
+ <dl class="details">
1573
+
1574
+
1575
+
1576
+
1577
+
1578
+
1579
+
1580
+
1581
+
1582
+
1583
+
1584
+
1585
+
1586
+
1587
+
1588
+
1589
+
1590
+
1591
+
1592
+
1593
+
1594
+
1595
+
1596
+
1597
+
1598
+
1599
+
1600
+
1601
+
1602
+
1603
+
1604
+ </dl>
1605
+
1606
+
1607
+
1608
+
1609
+
1610
+
1611
+
1612
+
1613
+
1614
+
1615
+
1616
+
1617
+
1618
+
1619
+
1620
+
1621
+
1622
+
1623
+ <div class='columns method-parameter'>
1624
+ <div class="column is-2"><label>返回值</label></div>
1625
+ <div class="column is-10">
1626
+
1627
+
1628
+
1629
+ <div class="columns">
1630
+
1631
+ <div class='param-desc column is-7'><p>获取当前视图的地理范围</p></div>
1632
+
1633
+
1634
+ <div class='column is-5 has-text-left'>
1635
+ <label>类型: </label>
1636
+
1637
+ <span class="param-type">Extent</span>
1638
+
1639
+
1640
+ </div>
1641
+
1642
+ </div>
1643
+
1644
+
1645
+ </div>
1646
+ </div>
1647
+
1648
+
1649
+
1650
+
1651
+
1652
+
1653
+ </div>
1654
+
1655
+ <div class="member">
1656
+
1657
+
1658
+
1659
+ <h4 class="name" id="getScale">
1660
+ <a class="href-link" href="#getScale">#</a>
1661
+
1662
+ <span class="code-name" id="getScale" style="font-size:30px">
1663
+
1664
+ getScale<span class="signature">()</span>
1665
+
1666
+ </span>
1667
+ </h4>
1668
+
1669
+
1670
+
1671
+ <div class="description">
1672
+ <p><a id='getScale'></a>
1673
+ 获取当前比例尺</p>
1674
+ </div>
1675
+
1676
+
1677
+
1678
+
1679
+
1680
+
1681
+
1682
+
1683
+
1684
+
1685
+
1686
+
1687
+
1688
+
1689
+ <dl class="details">
1690
+
1691
+
1692
+
1693
+
1694
+
1695
+
1696
+
1697
+
1698
+
1699
+
1700
+
1701
+
1702
+
1703
+
1704
+
1705
+
1706
+
1707
+
1708
+
1709
+
1710
+
1711
+
1712
+
1713
+
1714
+
1715
+
1716
+
1717
+
1718
+
1719
+
1720
+
1721
+ </dl>
1722
+
1723
+
1724
+
1725
+
1726
+
1727
+
1728
+
1729
+
1730
+
1731
+
1732
+
1733
+
1734
+
1735
+
1736
+
1737
+
1738
+
1739
+
1740
+ <div class='columns method-parameter'>
1741
+ <div class="column is-2"><label>返回值</label></div>
1742
+ <div class="column is-10">
1743
+
1744
+
1745
+
1746
+ <div class="columns">
1747
+
1748
+ <div class='param-desc column is-7'><p>比例尺 实际10000米:地图1米</p></div>
1749
+
1750
+
1751
+ <div class='column is-5 has-text-left'>
1752
+ <label>类型: </label>
1753
+
1754
+ <span class="param-type">Number</span>
1755
+
1756
+
1757
+ </div>
1758
+
1759
+ </div>
1760
+
1761
+
1762
+ </div>
1763
+ </div>
1764
+
1765
+
1766
+
1767
+
1768
+
1769
+
1770
+ </div>
1771
+
1772
+ <div class="member">
1773
+
1774
+
1775
+
1776
+ <h4 class="name" id="getSize">
1777
+ <a class="href-link" href="#getSize">#</a>
1778
+
1779
+ <span class="code-name" id="getSize" style="font-size:30px">
1780
+
1781
+ getSize<span class="signature">()</span>
1782
+
1783
+ </span>
1784
+ </h4>
1785
+
1786
+
1787
+
1788
+ <div class="description">
1789
+ <p>获取当前视图容器的宽高,单位像素<a id='getSize'></a></p>
1790
+ </div>
1791
+
1792
+
1793
+
1794
+
1795
+
1796
+
1797
+
1798
+
1799
+
1800
+
1801
+
1802
+
1803
+
1804
+
1805
+ <dl class="details">
1806
+
1807
+
1808
+
1809
+
1810
+
1811
+
1812
+
1813
+
1814
+
1815
+
1816
+
1817
+
1818
+
1819
+
1820
+
1821
+
1822
+
1823
+
1824
+
1825
+
1826
+
1827
+
1828
+
1829
+
1830
+
1831
+
1832
+
1833
+
1834
+
1835
+
1836
+
1837
+ </dl>
1838
+
1839
+
1840
+
1841
+
1842
+
1843
+
1844
+
1845
+
1846
+
1847
+
1848
+
1849
+
1850
+
1851
+
1852
+
1853
+
1854
+
1855
+
1856
+ <div class='columns method-parameter'>
1857
+ <div class="column is-2"><label>返回值</label></div>
1858
+ <div class="column is-10">
1859
+
1860
+
1861
+
1862
+ <div class="columns">
1863
+
1864
+ <div class='param-desc column is-7'><p>当前视图容器的宽高对象</p></div>
1865
+
1866
+
1867
+ <div class='column is-5 has-text-left'>
1868
+ <label>类型: </label>
1869
+
1870
+ <span class="param-type">Object</span>
1871
+
1872
+
1873
+ </div>
1874
+
1875
+ </div>
1876
+
1877
+
1878
+ </div>
1879
+ </div>
1880
+
1881
+
1882
+
1883
+
1884
+
1885
+
1886
+ </div>
1887
+
1888
+ <div class="member">
1889
+
1890
+
1891
+
1892
+ <h4 class="name" id="getZoom">
1893
+ <a class="href-link" href="#getZoom">#</a>
1894
+
1895
+ <span class="code-name" id="getZoom" style="font-size:30px">
1896
+
1897
+ getZoom<span class="signature">()</span>
1898
+
1899
+ </span>
1900
+ </h4>
1901
+
1902
+
1903
+
1904
+ <div class="description">
1905
+ <p>获取当前缩放级数<a id='getZoom'></a></p>
1906
+ </div>
1907
+
1908
+
1909
+
1910
+
1911
+
1912
+
1913
+
1914
+
1915
+
1916
+
1917
+
1918
+
1919
+
1920
+
1921
+ <dl class="details">
1922
+
1923
+
1924
+
1925
+
1926
+
1927
+
1928
+
1929
+
1930
+
1931
+
1932
+
1933
+
1934
+
1935
+
1936
+
1937
+
1938
+
1939
+
1940
+
1941
+
1942
+
1943
+
1944
+
1945
+
1946
+
1947
+
1948
+
1949
+
1950
+
1951
+
1952
+
1953
+ </dl>
1954
+
1955
+
1956
+
1957
+
1958
+
1959
+
1960
+
1961
+
1962
+
1963
+
1964
+
1965
+
1966
+
1967
+
1968
+
1969
+
1970
+
1971
+
1972
+ <div class='columns method-parameter'>
1973
+ <div class="column is-2"><label>返回值</label></div>
1974
+ <div class="column is-10">
1975
+
1976
+
1977
+
1978
+ <div class="columns">
1979
+
1980
+ <div class='param-desc column is-7'><p>当前缩放级数</p></div>
1981
+
1982
+
1983
+ <div class='column is-5 has-text-left'>
1984
+ <label>类型: </label>
1985
+
1986
+ <span class="param-type">Number</span>
1987
+
1988
+
1989
+ </div>
1990
+
1991
+ </div>
1992
+
1993
+
1994
+ </div>
1995
+ </div>
1996
+
1997
+
1998
+
1999
+
2000
+
2001
+
2002
+ </div>
2003
+
2004
+ <div class="member">
2005
+
2006
+
2007
+
2008
+ <h4 class="name" id="goTo">
2009
+ <a class="href-link" href="#goTo">#</a>
2010
+
2011
+ <span class="code-name" id="goTo" style="font-size:30px">
2012
+
2013
+ goTo<span class="signature">(goToTarget, options)</span>
2014
+
2015
+ </span>
2016
+ </h4>
2017
+
2018
+
2019
+
2020
+ <div class="description">
2021
+ <p>视点跳转为给定的目标<a id='goTo'></a></p>
2022
+ </div>
2023
+
2024
+
2025
+
2026
+
2027
+
2028
+
2029
+
2030
+
2031
+
2032
+
2033
+ <h4>参数</h4>
2034
+
2035
+ <div class="table-container">
2036
+ <table class="params table">
2037
+ <thead>
2038
+ <tr>
2039
+
2040
+ <th>名称</th>
2041
+
2042
+
2043
+ <th>类型</th>
2044
+
2045
+
2046
+ <th style="min-width: 100px;">默认值</th>
2047
+
2048
+
2049
+ <th class="last">描述</th>
2050
+ </tr>
2051
+ </thead>
2052
+
2053
+ <tbody>
2054
+
2055
+
2056
+
2057
+ <tr class="deep-level-0">
2058
+
2059
+ <td class="name" id="goToTarget"><code>goToTarget</code></td>
2060
+
2061
+
2062
+ <td class="type">
2063
+
2064
+ </td>
2065
+
2066
+
2067
+ <td class="default">
2068
+
2069
+ </td>
2070
+
2071
+
2072
+ <td class="description last"><p>跳转参数</p></td>
2073
+ </tr>
2074
+
2075
+
2076
+
2077
+
2078
+ <tr class="deep-level-1">
2079
+
2080
+ <td class="name" id="center"><code>center</code></td>
2081
+
2082
+
2083
+ <td class="type">
2084
+
2085
+
2086
+ <span class="param-type">Point</span>
2087
+ |
2088
+
2089
+ <span class="param-type">Array</span>
2090
+
2091
+
2092
+
2093
+ </td>
2094
+
2095
+
2096
+ <td class="default">
2097
+
2098
+ </td>
2099
+
2100
+
2101
+ <td class="description last"><p>视图跳转中心点</p></td>
2102
+ </tr>
2103
+
2104
+
2105
+
2106
+
2107
+ <tr class="deep-level-1">
2108
+
2109
+ <td class="name" id="zoom"><code>zoom</code></td>
2110
+
2111
+
2112
+ <td class="type">
2113
+
2114
+
2115
+ <span class="param-type">Number</span>
2116
+
2117
+
2118
+
2119
+ </td>
2120
+
2121
+
2122
+ <td class="default">
2123
+
2124
+ </td>
2125
+
2126
+
2127
+ <td class="description last"><p>视图跳转层级</p></td>
2128
+ </tr>
2129
+
2130
+
2131
+
2132
+
2133
+ <tr class="deep-level-1">
2134
+
2135
+ <td class="name" id="scale"><code>scale</code></td>
2136
+
2137
+
2138
+ <td class="type">
2139
+
2140
+
2141
+ <span class="param-type">Number</span>
2142
+
2143
+
2144
+
2145
+ </td>
2146
+
2147
+
2148
+ <td class="default">
2149
+
2150
+ </td>
2151
+
2152
+
2153
+ <td class="description last"><p>视图跳转比例尺</p></td>
2154
+ </tr>
2155
+
2156
+
2157
+
2158
+
2159
+ <tr class="deep-level-1">
2160
+
2161
+ <td class="name" id="target"><code>target</code></td>
2162
+
2163
+
2164
+ <td class="type">
2165
+
2166
+
2167
+ <span class="param-type">Geometry</span>
2168
+ |
2169
+
2170
+ <span class="param-type">Array.&lt;Geometry></span>
2171
+ |
2172
+
2173
+ <span class="param-type">Collection.&lt;Geometry></span>
2174
+
2175
+
2176
+
2177
+ </td>
2178
+
2179
+
2180
+ <td class="default">
2181
+
2182
+ </td>
2183
+
2184
+
2185
+ <td class="description last"><p>按范围跳转</p></td>
2186
+ </tr>
2187
+
2188
+
2189
+
2190
+
2191
+
2192
+
2193
+
2194
+
2195
+
2196
+ <tr class="deep-level-0">
2197
+
2198
+ <td class="name" id="options"><code>options</code></td>
2199
+
2200
+
2201
+ <td class="type">
2202
+
2203
+ </td>
2204
+
2205
+
2206
+ <td class="default">
2207
+
2208
+ </td>
2209
+
2210
+
2211
+ <td class="description last"><p>动画参数</p></td>
2212
+ </tr>
2213
+
2214
+
2215
+
2216
+
2217
+ <tr class="deep-level-1">
2218
+
2219
+ <td class="name" id="animate"><code>animate</code></td>
2220
+
2221
+
2222
+ <td class="type">
2223
+
2224
+
2225
+ <span class="param-type">Boolean</span>
2226
+
2227
+
2228
+
2229
+ </td>
2230
+
2231
+
2232
+ <td class="default">
2233
+
2234
+ true
2235
+
2236
+ </td>
2237
+
2238
+
2239
+ <td class="description last"><p>新视图的过渡是否开启动画,默认开启动画</p></td>
2240
+ </tr>
2241
+
2242
+
2243
+
2244
+
2245
+ <tr class="deep-level-1">
2246
+
2247
+ <td class="name" id="duration"><code>duration</code></td>
2248
+
2249
+
2250
+ <td class="type">
2251
+
2252
+
2253
+ <span class="param-type">Number</span>
2254
+
2255
+
2256
+
2257
+ </td>
2258
+
2259
+
2260
+ <td class="default">
2261
+
2262
+ 200
2263
+
2264
+ </td>
2265
+
2266
+
2267
+ <td class="description last"><p>动画的持续时间,以毫秒为单位,默认200毫秒</p></td>
2268
+ </tr>
2269
+
2270
+
2271
+
2272
+
2273
+
2274
+
2275
+
2276
+ </tbody>
2277
+ </table>
2278
+ </div>
2279
+
2280
+
2281
+
2282
+
2283
+
2284
+
2285
+ <dl class="details">
2286
+
2287
+
2288
+
2289
+
2290
+
2291
+
2292
+
2293
+
2294
+
2295
+
2296
+
2297
+
2298
+
2299
+
2300
+
2301
+
2302
+
2303
+
2304
+
2305
+
2306
+
2307
+
2308
+
2309
+
2310
+
2311
+
2312
+
2313
+
2314
+
2315
+
2316
+
2317
+ </dl>
2318
+
2319
+
2320
+
2321
+
2322
+
2323
+
2324
+
2325
+
2326
+
2327
+
2328
+
2329
+
2330
+
2331
+
2332
+
2333
+
2334
+
2335
+
2336
+
2337
+
2338
+
2339
+
2340
+
2341
+ <h5>示例</h5>
2342
+
2343
+ <p class="code-caption"><h7>中心点跳转示例</h7></p>
2344
+
2345
+
2346
+ <pre class="prettyprint"><code>// ES5引入方式
2347
+ const { Map, MapView } = Zondy
2348
+ // ES6引入方式
2349
+ import { Map, MapViewMapboxgl as MapView } from "@mapgis/webclient-mapboxgl-plugin"
2350
+ // 初始化图层管理容器
2351
+ map = new .Map();
2352
+ // 初始化地图视图对象
2353
+ mapView = new MapView({
2354
+ // 视图id
2355
+ viewId: "view-id",
2356
+ // 图层管理容器
2357
+ map: map
2358
+ });
2359
+ // 视点跳转
2360
+ mapView.goTo({
2361
+ // 跳转中心点
2362
+ center: [115.47643872463577, 30.980700423496124],
2363
+ // 地图层级
2364
+ zoom: 8
2365
+ });</code></pre>
2366
+
2367
+
2368
+ <p class="code-caption"><h7>按范围跳转示例</h7></p>
2369
+
2370
+
2371
+ <pre class="prettyprint"><code>// ES5引入方式
2372
+ const { Map, MapView } = Zondy
2373
+ const { Extent, Circle } = Zondy.Geometry
2374
+ // ES6引入方式
2375
+ import { Map, MapViewMapboxgl as MapView } from "@mapgis/webclient-mapboxgl-plugin"
2376
+ // 初始化图层管理容器
2377
+ map = new Map();
2378
+ // 初始化地图视图对象
2379
+ mapView = new MapView({
2380
+ // 视图id
2381
+ viewId: "view-id",
2382
+ // 图层管理容器
2383
+ map: map
2384
+ });
2385
+ const extent1 = new Extent({
2386
+ xmin: 111.88463529230717,
2387
+ ymin: 28.646934514163803,
2388
+ xmax: 116.89989408129225,
2389
+ ymax: 33.07991791253288,
2390
+ })
2391
+ const geometry2 = new Circle({
2392
+ center: [111, 29],
2393
+ radius: 100,
2394
+ radiusUnit: "kilometers",
2395
+ })
2396
+ mapView
2397
+ .goTo({
2398
+ target: [extent1, geometry2],
2399
+ })
2400
+ .then(() => {
2401
+ console.log("gotoExtent callback")
2402
+ })</code></pre>
2403
+
2404
+
2405
+
2406
+ </div>
2407
+
2408
+ <div class="member">
2409
+
2410
+
2411
+
2412
+ <h4 class="name" id="hitTest">
2413
+ <a class="href-link" href="#hitTest">#</a>
2414
+
2415
+ <span class="code-name" id="hitTest" style="font-size:30px">
2416
+
2417
+ hitTest<span class="signature">(screenPoint)</span>
2418
+
2419
+ </span>
2420
+ </h4>
2421
+
2422
+
2423
+
2424
+ <div class="description">
2425
+ <p>穿透检测,图元拾取。目前支持graphic类型拾取结果,支持图层类型GraphicLayer,FeatureLayer。</p>
2426
+ </div>
2427
+
2428
+
2429
+
2430
+
2431
+
2432
+
2433
+
2434
+
2435
+
2436
+
2437
+ <h4>参数</h4>
2438
+
2439
+ <div class="table-container">
2440
+ <table class="params table">
2441
+ <thead>
2442
+ <tr>
2443
+
2444
+ <th>名称</th>
2445
+
2446
+
2447
+ <th>类型</th>
2448
+
2449
+
2450
+
2451
+ <th class="last">描述</th>
2452
+ </tr>
2453
+ </thead>
2454
+
2455
+ <tbody>
2456
+
2457
+
2458
+
2459
+ <tr class="deep-level-0">
2460
+
2461
+ <td class="name" id="screenPoint"><code>screenPoint</code></td>
2462
+
2463
+
2464
+ <td class="type">
2465
+
2466
+
2467
+ <span class="param-type">Object</span>
2468
+
2469
+
2470
+
2471
+ </td>
2472
+
2473
+
2474
+
2475
+ <td class="description last"><p>屏幕像素坐标点,例如{ x: 900, y: 500 }</p></td>
2476
+ </tr>
2477
+
2478
+
2479
+
2480
+
2481
+ </tbody>
2482
+ </table>
2483
+ </div>
2484
+
2485
+
2486
+
2487
+
2488
+
2489
+
2490
+ <dl class="details">
2491
+
2492
+
2493
+
2494
+
2495
+
2496
+
2497
+
2498
+
2499
+
2500
+
2501
+
2502
+
2503
+
2504
+
2505
+
2506
+
2507
+
2508
+
2509
+
2510
+
2511
+
2512
+
2513
+
2514
+
2515
+
2516
+
2517
+
2518
+
2519
+
2520
+
2521
+
2522
+ </dl>
2523
+
2524
+
2525
+
2526
+
2527
+
2528
+
2529
+
2530
+
2531
+
2532
+
2533
+
2534
+
2535
+
2536
+
2537
+
2538
+
2539
+
2540
+
2541
+ <div class='columns method-parameter'>
2542
+ <div class="column is-2"><label>返回值</label></div>
2543
+ <div class="column is-10">
2544
+
2545
+
2546
+
2547
+ <div class="columns">
2548
+
2549
+ <div class='param-desc column is-7'><p>图元检测结果</p></div>
2550
+
2551
+
2552
+ <div class='column is-5 has-text-left'>
2553
+ <label>类型: </label>
2554
+
2555
+ <span class="param-type">Array</span>
2556
+
2557
+
2558
+ </div>
2559
+
2560
+ </div>
2561
+
2562
+
2563
+ </div>
2564
+ </div>
2565
+
2566
+
2567
+
2568
+
2569
+
2570
+
2571
+ <h5>示例</h5>
2572
+
2573
+ <p class="code-caption"><h7>根据基础图层对象或者图层id查询并返回实际图层</h7></p>
2574
+
2575
+
2576
+ <pre class="prettyprint"><code>// ES6引入方式
2577
+ import { MapView } from "@mapgis/webclient-mapboxgl-plugin";
2578
+ import { Map, Point, Polygon, MultiPolygon ,Extent, GraphicsLayer, Feature, Circle, IGSFeatureLayer, IGSTileLayer } from "@mapgis/webclient-common";
2579
+ // 初始化图层管理容器
2580
+ const map = new Map();
2581
+ // 初始化地图视图对象
2582
+ this.mapView = new MapView({
2583
+ // 视图id
2584
+ viewId: "mapgis-2d-viewer",
2585
+ // 图层管理容器
2586
+ map: map,
2587
+ })
2588
+ // 创建一个要素crs
2589
+ const feature = [
2590
+ new Feature({
2591
+ id: '11113',
2592
+ geometry: new Circle({
2593
+ center: [113, 35],
2594
+ radius: 10000,
2595
+ radiusUnit: 'kilometers',
2596
+ })
2597
+ }),
2598
+ new Feature({
2599
+ id: '11114',
2600
+ geometry: new Polygon({
2601
+ coordinates: [
2602
+ // 外圈
2603
+ [
2604
+ [113.0, 29.0],
2605
+ [116.0, 29.0],
2606
+ [116.0, 35.0],
2607
+ [113.0, 35.0],
2608
+ [113.0, 29.0]
2609
+ ]
2610
+ ]
2611
+ })
2612
+ }),
2613
+ new Feature({
2614
+ id: '11115',
2615
+ geometry:new MultiPolygon({
2616
+ coordinates: [
2617
+ [
2618
+ // 外圈
2619
+ [
2620
+ [112.0, 28.0],
2621
+ [115.0, 28.0],
2622
+ [115.0, 30.0],
2623
+ [112.0, 30.0],
2624
+ [112.0, 28.0]
2625
+ ],
2626
+ // 第一个内圈
2627
+ [
2628
+ [112.2, 28.2],
2629
+ [112.2, 29.8],
2630
+ [114.8, 29.8],
2631
+ [114.8, 28.2],
2632
+ [112.2, 28.2]
2633
+ ]
2634
+ ]
2635
+ ]
2636
+ })
2637
+ })
2638
+ ]
2639
+ // 初始化几何图层
2640
+ const graphicsLayer = new GraphicsLayer({
2641
+ graphics:feature
2642
+ })
2643
+ map.add(this.graphicsLayer)
2644
+ const result = this.mapView.hitTest({x:1100,y:600})</code></pre>
2645
+
2646
+
2647
+
2648
+ </div>
2649
+
2650
+ <div class="member">
2651
+
2652
+
2653
+
2654
+ <h4 class="name" id="takeScreenshot">
2655
+ <a class="href-link" href="#takeScreenshot">#</a>
2656
+
2657
+ <span class="code-name" id="takeScreenshot" style="font-size:30px">
2658
+
2659
+ takeScreenshot<span class="signature">(options<span class="signature-attributes">opt</span>)</span>
2660
+
2661
+ </span>
2662
+ </h4>
2663
+
2664
+
2665
+
2666
+ <div class="description">
2667
+ <p>屏幕快照</p>
2668
+ </div>
2669
+
2670
+
2671
+
2672
+
2673
+
2674
+
2675
+
2676
+
2677
+
2678
+
2679
+ <h4>参数</h4>
2680
+
2681
+ <div class="table-container">
2682
+ <table class="params table">
2683
+ <thead>
2684
+ <tr>
2685
+
2686
+ <th>名称</th>
2687
+
2688
+
2689
+ <th>类型</th>
2690
+
2691
+
2692
+ <th style="min-width: 100px;">默认值</th>
2693
+
2694
+
2695
+ <th class="last">描述</th>
2696
+ </tr>
2697
+ </thead>
2698
+
2699
+ <tbody>
2700
+
2701
+
2702
+
2703
+ <tr class="deep-level-0">
2704
+
2705
+ <td class="name" id="options"><code>options</code></td>
2706
+
2707
+
2708
+ <td class="type">
2709
+
2710
+
2711
+ <span class="param-type">Object</span>
2712
+
2713
+
2714
+
2715
+ </td>
2716
+
2717
+
2718
+ <td class="default">
2719
+
2720
+ {}
2721
+
2722
+ </td>
2723
+
2724
+
2725
+ <td class="description last"><p>屏幕快照配置配置</p></td>
2726
+ </tr>
2727
+
2728
+
2729
+
2730
+
2731
+ <tr class="deep-level-1">
2732
+
2733
+ <td class="name" id="format"><code>format</code></td>
2734
+
2735
+
2736
+ <td class="type">
2737
+
2738
+
2739
+ <span class="param-type">PictureFormat</span>
2740
+
2741
+
2742
+
2743
+ </td>
2744
+
2745
+
2746
+ <td class="default">
2747
+
2748
+ PictureFormat.png
2749
+
2750
+ </td>
2751
+
2752
+
2753
+ <td class="description last"><p>照片格式,支持png,jpeg格式</p></td>
2754
+ </tr>
2755
+
2756
+
2757
+
2758
+
2759
+ <tr class="deep-level-1">
2760
+
2761
+ <td class="name" id="filename"><code>filename</code></td>
2762
+
2763
+
2764
+ <td class="type">
2765
+
2766
+
2767
+ <span class="param-type">String</span>
2768
+
2769
+
2770
+
2771
+ </td>
2772
+
2773
+
2774
+ <td class="default">
2775
+
2776
+ 'screenshotFile'
2777
+
2778
+ </td>
2779
+
2780
+
2781
+ <td class="description last"><p>下载文件名</p></td>
2782
+ </tr>
2783
+
2784
+
2785
+
2786
+
2787
+ <tr class="deep-level-1">
2788
+
2789
+ <td class="name" id="width"><code>width</code></td>
2790
+
2791
+
2792
+ <td class="type">
2793
+
2794
+
2795
+ <span class="param-type">Number</span>
2796
+
2797
+
2798
+
2799
+ </td>
2800
+
2801
+
2802
+ <td class="default">
2803
+
2804
+ </td>
2805
+
2806
+
2807
+ <td class="description last"><p>图片宽度</p></td>
2808
+ </tr>
2809
+
2810
+
2811
+
2812
+
2813
+ <tr class="deep-level-1">
2814
+
2815
+ <td class="name" id="height"><code>height</code></td>
2816
+
2817
+
2818
+ <td class="type">
2819
+
2820
+
2821
+ <span class="param-type">Number</span>
2822
+
2823
+
2824
+
2825
+ </td>
2826
+
2827
+
2828
+ <td class="default">
2829
+
2830
+ </td>
2831
+
2832
+
2833
+ <td class="description last"><p>图片高度</p></td>
2834
+ </tr>
2835
+
2836
+
2837
+
2838
+
2839
+ <tr class="deep-level-1">
2840
+
2841
+ <td class="name" id="x"><code>x</code></td>
2842
+
2843
+
2844
+ <td class="type">
2845
+
2846
+
2847
+ <span class="param-type">Number</span>
2848
+
2849
+
2850
+
2851
+ </td>
2852
+
2853
+
2854
+ <td class="default">
2855
+
2856
+ </td>
2857
+
2858
+
2859
+ <td class="description last"><p>图片原点x</p></td>
2860
+ </tr>
2861
+
2862
+
2863
+
2864
+
2865
+ <tr class="deep-level-1">
2866
+
2867
+ <td class="name" id="y"><code>y</code></td>
2868
+
2869
+
2870
+ <td class="type">
2871
+
2872
+
2873
+ <span class="param-type">Number</span>
2874
+
2875
+
2876
+
2877
+ </td>
2878
+
2879
+
2880
+ <td class="default">
2881
+
2882
+ </td>
2883
+
2884
+
2885
+ <td class="description last"><p>图片原点y</p></td>
2886
+ </tr>
2887
+
2888
+
2889
+
2890
+
2891
+ <tr class="deep-level-1">
2892
+
2893
+ <td class="name" id="isDownload"><code>isDownload</code></td>
2894
+
2895
+
2896
+ <td class="type">
2897
+
2898
+
2899
+ <span class="param-type">Boolean</span>
2900
+
2901
+
2902
+
2903
+ </td>
2904
+
2905
+
2906
+ <td class="default">
2907
+
2908
+ true
2909
+
2910
+ </td>
2911
+
2912
+
2913
+ <td class="description last"><p>是否下载图片</p></td>
2914
+ </tr>
2915
+
2916
+
2917
+
2918
+
2919
+
2920
+
2921
+
2922
+ </tbody>
2923
+ </table>
2924
+ </div>
2925
+
2926
+
2927
+
2928
+
2929
+
2930
+
2931
+ <dl class="details">
2932
+
2933
+
2934
+
2935
+
2936
+
2937
+
2938
+
2939
+
2940
+
2941
+
2942
+
2943
+
2944
+
2945
+
2946
+
2947
+
2948
+
2949
+
2950
+
2951
+
2952
+
2953
+
2954
+
2955
+
2956
+
2957
+
2958
+
2959
+
2960
+
2961
+
2962
+
2963
+ </dl>
2964
+
2965
+
2966
+
2967
+
2968
+
2969
+
2970
+
2971
+
2972
+
2973
+
2974
+
2975
+
2976
+
2977
+
2978
+
2979
+
2980
+
2981
+
2982
+ <div class='columns method-parameter'>
2983
+ <div class="column is-2"><label>返回值</label></div>
2984
+ <div class="column is-10">
2985
+
2986
+
2987
+
2988
+ <div class="columns">
2989
+
2990
+ <div class='param-desc column is-7'><p>屏幕快照 {dataUrl String },且浏览器会下载图片</p></div>
2991
+
2992
+
2993
+ <div class='column is-5 has-text-left'>
2994
+ <label>类型: </label>
2995
+
2996
+ <span class="param-type">Object</span>
2997
+
2998
+
2999
+ </div>
3000
+
3001
+ </div>
3002
+
3003
+
3004
+ </div>
3005
+ </div>
3006
+
3007
+
3008
+
3009
+
3010
+
3011
+
3012
+ <h5>示例</h5>
3013
+
3014
+ <p class="code-caption"><h7>屏幕快照</h7></p>
3015
+
3016
+
3017
+ <pre class="prettyprint"><code>// ES5引入方式
3018
+ const { Map, MapView } = Zondy
3019
+ const { PictureFormat } = Zondy.Enum
3020
+ // ES6引入方式
3021
+ import { Map, MapView } from "@mapgis/webclient-mapboxgl-plugin"
3022
+ import { PictureFormat } from "@mapgis/webclient-common"
3023
+ // 初始化图层管理容器
3024
+ const map = new Map();
3025
+ // 初始化地图视图对象
3026
+ const mapView = new MapView({
3027
+ // 二维场景视图的容器(html的div标签)ID
3028
+ viewId: "二维场景视图的容器的id",
3029
+ // 图层管理容器
3030
+ map: map
3031
+ })
3032
+ // 设置屏幕快照参数
3033
+ const screenshotOptions: {
3034
+ format: PictureFormat.png
3035
+ }
3036
+ // 开始屏幕快照
3037
+ mapView.takeScreenshot(screenshotOptions).then((result) => {
3038
+ // 获取base64格式的url字符串
3039
+ console.log("dataUrl:", result.dataUrl)
3040
+ })</code></pre>
3041
+
3042
+
3043
+
3044
+ </div>
3045
+
3046
+ <div class="member">
3047
+
3048
+
3049
+
3050
+ <h4 class="name" id="toJSON">
3051
+ <a class="href-link" href="#toJSON">#</a>
3052
+
3053
+ <span class="code-name" id="toJSON" style="font-size:30px">
3054
+
3055
+ toJSON<span class="signature">()</span>
3056
+
3057
+ </span>
3058
+ </h4>
3059
+
3060
+
3061
+
3062
+ <div class="description">
3063
+ <p><a id='toJSON'></a>
3064
+ 导出场景视图的配置文件</p>
3065
+ </div>
3066
+
3067
+
3068
+
3069
+
3070
+
3071
+
3072
+
3073
+
3074
+
3075
+
3076
+
3077
+
3078
+
3079
+
3080
+ <dl class="details">
3081
+
3082
+
3083
+
3084
+
3085
+
3086
+
3087
+
3088
+
3089
+
3090
+
3091
+
3092
+
3093
+
3094
+
3095
+
3096
+
3097
+
3098
+
3099
+
3100
+
3101
+
3102
+
3103
+
3104
+
3105
+
3106
+
3107
+
3108
+
3109
+
3110
+
3111
+
3112
+ </dl>
3113
+
3114
+
3115
+
3116
+
3117
+
3118
+
3119
+
3120
+
3121
+
3122
+
3123
+
3124
+
3125
+
3126
+
3127
+
3128
+
3129
+
3130
+
3131
+ <div class='columns method-parameter'>
3132
+ <div class="column is-2"><label>返回值</label></div>
3133
+ <div class="column is-10">
3134
+
3135
+
3136
+
3137
+ <div class="columns">
3138
+
3139
+ <div class='param-desc column is-7'><p>导出的配置文件</p></div>
3140
+
3141
+
3142
+ <div class='column is-5 has-text-left'>
3143
+ <label>类型: </label>
3144
+
3145
+ <span class="param-type">Object</span>
3146
+
3147
+
3148
+ </div>
3149
+
3150
+ </div>
3151
+
3152
+
3153
+ </div>
3154
+ </div>
3155
+
3156
+
3157
+
3158
+
3159
+
3160
+
3161
+ </div>
3162
+
3163
+ <div class="member">
3164
+
3165
+
3166
+
3167
+ <h4 class="name" id="toMap">
3168
+ <a class="href-link" href="#toMap">#</a>
3169
+
3170
+ <span class="code-name" id="toMap" style="font-size:30px">
3171
+
3172
+ toMap<span class="signature">(screenPoint)</span>
3173
+
3174
+ </span>
3175
+ </h4>
3176
+
3177
+
3178
+
3179
+ <div class="description">
3180
+ <p><a id='toMap'></a>
3181
+ 屏幕像素坐标点转地理坐标点</p>
3182
+ </div>
3183
+
3184
+
3185
+
3186
+
3187
+
3188
+
3189
+
3190
+
3191
+
3192
+
3193
+ <h4>参数</h4>
3194
+
3195
+ <div class="table-container">
3196
+ <table class="params table">
3197
+ <thead>
3198
+ <tr>
3199
+
3200
+ <th>名称</th>
3201
+
3202
+
3203
+ <th>类型</th>
3204
+
3205
+
3206
+
3207
+ <th class="last">描述</th>
3208
+ </tr>
3209
+ </thead>
3210
+
3211
+ <tbody>
3212
+
3213
+
3214
+
3215
+ <tr class="deep-level-0">
3216
+
3217
+ <td class="name" id="screenPoint"><code>screenPoint</code></td>
3218
+
3219
+
3220
+ <td class="type">
3221
+
3222
+
3223
+ <span class="param-type">Object</span>
3224
+
3225
+
3226
+
3227
+ </td>
3228
+
3229
+
3230
+
3231
+ <td class="description last"><p>屏幕像素坐标点,例如{ x: 900, y: 500 }</p></td>
3232
+ </tr>
3233
+
3234
+
3235
+
3236
+
3237
+ </tbody>
3238
+ </table>
3239
+ </div>
3240
+
3241
+
3242
+
3243
+
3244
+
3245
+
3246
+ <dl class="details">
3247
+
3248
+
3249
+
3250
+
3251
+
3252
+
3253
+
3254
+
3255
+
3256
+
3257
+
3258
+
3259
+
3260
+
3261
+
3262
+
3263
+
3264
+
3265
+
3266
+
3267
+
3268
+
3269
+
3270
+
3271
+
3272
+
3273
+
3274
+
3275
+
3276
+
3277
+
3278
+ </dl>
3279
+
3280
+
3281
+
3282
+
3283
+
3284
+
3285
+
3286
+
3287
+
3288
+
3289
+
3290
+
3291
+
3292
+
3293
+
3294
+
3295
+
3296
+
3297
+ <div class='columns method-parameter'>
3298
+ <div class="column is-2"><label>返回值</label></div>
3299
+ <div class="column is-10">
3300
+
3301
+
3302
+
3303
+ <div class="columns">
3304
+
3305
+ <div class='param-desc column is-7'><p>地理坐标点</p></div>
3306
+
3307
+
3308
+ <div class='column is-5 has-text-left'>
3309
+ <label>类型: </label>
3310
+
3311
+ <span class="param-type">Point</span>
3312
+
3313
+
3314
+ </div>
3315
+
3316
+ </div>
3317
+
3318
+
3319
+ </div>
3320
+ </div>
3321
+
3322
+
3323
+
3324
+
3325
+
3326
+
3327
+ <h5>示例</h5>
3328
+
3329
+ <p class="code-caption"><h5>屏幕像素坐标点转地理坐标示例</h5></p>
3330
+
3331
+
3332
+ <pre class="prettyprint"><code>// ES6引入方式
3333
+ import { MapViewMapboxgl } from "@mapgis/webclient-mapboxgl-plugin"
3334
+ import { Map, Point, Extent } from "@mapgis/webclient-common"
3335
+ // 初始化图层管理容器
3336
+ const map = new Map();
3337
+ // 初始化地图视图对象
3338
+ const mapView = new MapViewMapboxgl({
3339
+ // 视图id
3340
+ viewId: "mapgis-2d-viewer",
3341
+ // 图层管理容器
3342
+ map: map
3343
+ });
3344
+ const screenPoint = { x: 900, y: 500 }
3345
+ mapView.toMap(screenPoint)</code></pre>
3346
+
3347
+
3348
+
3349
+ </div>
3350
+
3351
+ <div class="member">
3352
+
3353
+
3354
+
3355
+ <h4 class="name" id="toScreen">
3356
+ <a class="href-link" href="#toScreen">#</a>
3357
+
3358
+ <span class="code-name" id="toScreen" style="font-size:30px">
3359
+
3360
+ toScreen<span class="signature">(point)</span>
3361
+
3362
+ </span>
3363
+ </h4>
3364
+
3365
+
3366
+
3367
+ <div class="description">
3368
+ <p><a id='toScreen'></a>
3369
+ 地理坐标点转屏幕像素坐标点</p>
3370
+ </div>
3371
+
3372
+
3373
+
3374
+
3375
+
3376
+
3377
+
3378
+
3379
+
3380
+
3381
+ <h4>参数</h4>
3382
+
3383
+ <div class="table-container">
3384
+ <table class="params table">
3385
+ <thead>
3386
+ <tr>
3387
+
3388
+ <th>名称</th>
3389
+
3390
+
3391
+ <th>类型</th>
3392
+
3393
+
3394
+
3395
+ <th class="last">描述</th>
3396
+ </tr>
3397
+ </thead>
3398
+
3399
+ <tbody>
3400
+
3401
+
3402
+
3403
+ <tr class="deep-level-0">
3404
+
3405
+ <td class="name" id="point"><code>point</code></td>
3406
+
3407
+
3408
+ <td class="type">
3409
+
3410
+
3411
+ <span class="param-type">Point</span>
3412
+
3413
+
3414
+
3415
+ </td>
3416
+
3417
+
3418
+
3419
+ <td class="description last"><p>地理坐标点</p></td>
3420
+ </tr>
3421
+
3422
+
3423
+
3424
+
3425
+ </tbody>
3426
+ </table>
3427
+ </div>
3428
+
3429
+
3430
+
3431
+
3432
+
3433
+
3434
+ <dl class="details">
3435
+
3436
+
3437
+
3438
+
3439
+
3440
+
3441
+
3442
+
3443
+
3444
+
3445
+
3446
+
3447
+
3448
+
3449
+
3450
+
3451
+
3452
+
3453
+
3454
+
3455
+
3456
+
3457
+
3458
+
3459
+
3460
+
3461
+
3462
+
3463
+
3464
+
3465
+
3466
+ </dl>
3467
+
3468
+
3469
+
3470
+
3471
+
3472
+
3473
+
3474
+
3475
+
3476
+
3477
+
3478
+
3479
+
3480
+
3481
+
3482
+
3483
+
3484
+
3485
+ <div class='columns method-parameter'>
3486
+ <div class="column is-2"><label>返回值</label></div>
3487
+ <div class="column is-10">
3488
+
3489
+
3490
+
3491
+ <div class="columns">
3492
+
3493
+ <div class='param-desc column is-7'><p>屏幕像素坐标点</p></div>
3494
+
3495
+
3496
+ <div class='column is-5 has-text-left'>
3497
+ <label>类型: </label>
3498
+
3499
+ <span class="param-type">Object</span>
3500
+
3501
+
3502
+ </div>
3503
+
3504
+ </div>
3505
+
3506
+
3507
+ </div>
3508
+ </div>
3509
+
3510
+
3511
+
3512
+
3513
+
3514
+
3515
+ <h5>示例</h5>
3516
+
3517
+ <p class="code-caption"><h5>地理坐标点转屏幕像素坐标示例</h5></p>
3518
+
3519
+
3520
+ <pre class="prettyprint"><code>// ES6引入方式
3521
+ import { MapViewMapboxgl } from "@mapgis/webclient-mapboxgl-plugin"
3522
+ import { Map, Point, Extent } from "@mapgis/webclient-common"
3523
+ // 初始化图层管理容器
3524
+ const map = new Map();
3525
+ // 初始化地图视图对象
3526
+ const mapView = new MapViewMapboxgl({
3527
+ // 视图id
3528
+ viewId: "mapgis-2d-viewer",
3529
+ // 图层管理容器
3530
+ map: map
3531
+ });
3532
+ const geoPoint = new Point({ coordinates: [123, 23, 0] })
3533
+ mapView.toScreen(geoPoint)</code></pre>
3534
+
3535
+
3536
+
3537
+ </div>
3538
+
3539
+ </div>
3540
+ </div>
3541
+
3542
+
3543
+
3544
+
3545
+
3546
+ </article>
3547
+
3548
+ </section>
3549
+
3550
+
3551
+
3552
+
3553
+ </div>
3554
+
3555
+ <footer class="footer">
3556
+ <div class="content has-text-centered">
3557
+ <p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 17.0.0</a></p>
3558
+ <p class="sidebar-created-by">
3559
+ <a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
3560
+ <a href="http://webclient.smaryun.com/#/index" target="_blank">MapGIS Client for JavaScript</a>
3561
+ </p>
3562
+ </div>
3563
+ </footer>
3564
+
3565
+ </div>
3566
+ <div id="side-nav" class="side-nav">
3567
+ <div style="margin-bottom: 10px;">
3568
+ <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
3569
+ </div>
3570
+ <div style="margin-bottom: 10px;">
3571
+ <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
3572
+ </div>
3573
+ <div style="margin-bottom: 10px;">
3574
+ <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
3575
+ </div>
3576
+ <div>
3577
+ <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
3578
+ </div>
3579
+ </div>
3580
+ </div>
3581
+ <script src="scripts/linenumber.js"> </script>
3582
+
3583
+ <script src="scripts/search.js"> </script>
3584
+
3585
+ <script src="scripts/sideBar.js"> </script>
3586
+ </body>
3587
+ </html>