@mapgis/webclient-mapboxgl-plugin 10.3.3 → 17.0.0

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