@mapgis/webclient-vue-cesium 17.2.0 → 17.2.1

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 (245) hide show
  1. package/dist-libs/webclient-vue-cesium.common.js +137 -137
  2. package/dist-libs/webclient-vue-cesium.umd.js +137 -137
  3. package/package.json +1 -1
  4. package/dist-docs/404.html +0 -26
  5. package/dist-docs/api/MapStory/MapStory.html +0 -74
  6. package/dist-docs/api/Overlay/Echarts.html +0 -211
  7. package/dist-docs/api/Overlay/GraphThemeLayer.html +0 -95
  8. package/dist-docs/api/Overlay/Mapv.html +0 -150
  9. package/dist-docs/api/Overlay/ParticleEffects.html +0 -207
  10. package/dist-docs/api/Overlay/ThemeLayerCustom.html +0 -122
  11. package/dist-docs/api/analysis/Aspect.html +0 -217
  12. package/dist-docs/api/analysis/Bim.html +0 -106
  13. package/dist-docs/api/analysis/Buffer.html +0 -161
  14. package/dist-docs/api/analysis/Contour.html +0 -218
  15. package/dist-docs/api/analysis/CutFill.html +0 -225
  16. package/dist-docs/api/analysis/DynamicCutting.html +0 -188
  17. package/dist-docs/api/analysis/DynamicSection.html +0 -258
  18. package/dist-docs/api/analysis/Excavate.html +0 -101
  19. package/dist-docs/api/analysis/Fill.html +0 -191
  20. package/dist-docs/api/analysis/Flood.html +0 -240
  21. package/dist-docs/api/analysis/HeightLimited.html +0 -106
  22. package/dist-docs/api/analysis/Household.html +0 -112
  23. package/dist-docs/api/analysis/Overlay.html +0 -127
  24. package/dist-docs/api/analysis/Profile.html +0 -352
  25. package/dist-docs/api/analysis/ProjectorManager.html +0 -391
  26. package/dist-docs/api/analysis/ProjectorSetting.html +0 -154
  27. package/dist-docs/api/analysis/Shadow.html +0 -106
  28. package/dist-docs/api/analysis/Sightline.html +0 -96
  29. package/dist-docs/api/analysis/Skyline.html +0 -152
  30. package/dist-docs/api/analysis/Slope.html +0 -217
  31. package/dist-docs/api/analysis/ViewpointManager.html +0 -108
  32. package/dist-docs/api/analysis/Viewshed.html +0 -98
  33. package/dist-docs/api/datasource/geojson.html +0 -52
  34. package/dist-docs/api/index.html +0 -54
  35. package/dist-docs/api/layer/3DPlot/Plot.html +0 -85
  36. package/dist-docs/api/layer/3DPlot/PlotAnimation.html +0 -178
  37. package/dist-docs/api/layer/3DPlot/PlotLayer.html +0 -189
  38. package/dist-docs/api/layer/3DPlot/PlotLink.html +0 -137
  39. package/dist-docs/api/layer/ArcGISServer/ArcGISMapLayer.html +0 -177
  40. package/dist-docs/api/layer/ArcGISServer/ArcGISTileLayer.html +0 -98
  41. package/dist-docs/api/layer/Geojson/geojson.html +0 -352
  42. package/dist-docs/api/layer/Graphic/GraphicLayer.html +0 -99
  43. package/dist-docs/api/layer/Graphic/GraphicLayerService.html +0 -193
  44. package/dist-docs/api/layer/IGServer/IgsDocLayer.html +0 -195
  45. package/dist-docs/api/layer/IGServer/IgsDynamicLayer.html +0 -81
  46. package/dist-docs/api/layer/IGServer/IgsFeatureLayer.html +0 -157
  47. package/dist-docs/api/layer/IGServer/IgsTileLayer.html +0 -72
  48. package/dist-docs/api/layer/OGC/CesiumOgcWfsLayer.html +0 -117
  49. package/dist-docs/api/layer/OGC/CesiumOgcWmsLayer.html +0 -322
  50. package/dist-docs/api/layer/OGC/CesiumOgcWmtsLayer.html +0 -388
  51. package/dist-docs/api/layer/PopupMixin/popup.html +0 -301
  52. package/dist-docs/api/layer/Tileset/tileset.html +0 -60
  53. package/dist-docs/api/layer/m3d/m3d.html +0 -68
  54. package/dist-docs/api/layer/m3d/scene.html +0 -65
  55. package/dist-docs/api/layer/marker/DynamicMarker.html +0 -63
  56. package/dist-docs/api/layer/vectortile/vectortile.html +0 -58
  57. package/dist-docs/api/provider/igsterrain.html +0 -52
  58. package/dist-docs/api/sceneeffect/SceneSetting.html +0 -216
  59. package/dist-docs/api/sceneeffect/fogeffect.html +0 -113
  60. package/dist-docs/api/sceneeffect/pathroaming.html +0 -241
  61. package/dist-docs/api/sceneeffect/raineffect.html +0 -124
  62. package/dist-docs/api/sceneeffect/sceneroaming.html +0 -131
  63. package/dist-docs/api/sceneeffect/snoweffect.html +0 -103
  64. package/dist-docs/api/service/comprehensiveQuery/comprehensiveQuery.html +0 -206
  65. package/dist-docs/api/simulation/BuildingGrow.html +0 -79
  66. package/dist-docs/api/simulation/CityGrow.html +0 -84
  67. package/dist-docs/api/simulation/PondingSimulation.html +0 -120
  68. package/dist-docs/api/ui/compare.html +0 -75
  69. package/dist-docs/api/ui/debug.html +0 -51
  70. package/dist-docs/api/ui/draw.html +0 -122
  71. package/dist-docs/api/ui/images/popupfeature.html +0 -58
  72. package/dist-docs/api/ui/legend.html +0 -70
  73. package/dist-docs/api/ui/link.html +0 -91
  74. package/dist-docs/api/ui/locate.html +0 -91
  75. package/dist-docs/api/ui/marker.html +0 -48
  76. package/dist-docs/api/ui/measure.html +0 -223
  77. package/dist-docs/api/ui/outputimage.html +0 -47
  78. package/dist-docs/api/ui/popup.html +0 -48
  79. package/dist-docs/api/ui/popupfeature.html +0 -48
  80. package/dist-docs/api/ui/rotate.html +0 -90
  81. package/dist-docs/api/ui/statebar.html +0 -49
  82. package/dist-docs/api/ui/table.html +0 -243
  83. package/dist-docs/assets/css/0.styles.cb8abb08.css +0 -1
  84. package/dist-docs/assets/img/Wms.aadc425f.png +0 -0
  85. package/dist-docs/assets/img/arcgis-wmsserver.6c13bece.png +0 -0
  86. package/dist-docs/assets/img/bim.7e20ff81.png +0 -0
  87. package/dist-docs/assets/img/bim_collapse.1cadabeb.png +0 -0
  88. package/dist-docs/assets/img/bim_disable_bim.5028b8e6.png +0 -0
  89. package/dist-docs/assets/img/bim_enable_bim.bcba6335.png +0 -0
  90. package/dist-docs/assets/img/bim_open.b3d32504.png +0 -0
  91. package/dist-docs/assets/img/card.b0528dea.png +0 -0
  92. package/dist-docs/assets/img/cesium_dist.bd34c270.png +0 -0
  93. package/dist-docs/assets/img/cloudisk.31a0f7a2.png +0 -0
  94. package/dist-docs/assets/img/custom_popup_list.6eda8057.png +0 -0
  95. package/dist-docs/assets/img/custom_popup_tips.7bfbfd71.png +0 -0
  96. package/dist-docs/assets/img/debug.3092e258.png +0 -0
  97. package/dist-docs/assets/img/destop_house_1.575e045a.png +0 -0
  98. package/dist-docs/assets/img/destop_house_2.2073f920.png +0 -0
  99. package/dist-docs/assets/img/dynamicmarker.ce31938a.png +0 -0
  100. package/dist-docs/assets/img/house.82f7b807.png +0 -0
  101. package/dist-docs/assets/img/house_collapse.ff7c97a3.png +0 -0
  102. package/dist-docs/assets/img/house_layers.40588763.png +0 -0
  103. package/dist-docs/assets/img/igs_house.17ccedc3.png +0 -0
  104. package/dist-docs/assets/img/igs_vertex.69dbefdf.png +0 -0
  105. package/dist-docs/assets/img/img.89931892.png +0 -0
  106. package/dist-docs/assets/img/img_1.ea78b5ed.png +0 -0
  107. package/dist-docs/assets/img/img_10.7d2345ef.png +0 -0
  108. package/dist-docs/assets/img/img_2.d1236814.png +0 -0
  109. package/dist-docs/assets/img/img_3.fdad2ce3.png +0 -0
  110. package/dist-docs/assets/img/img_4.8dccaf99.png +0 -0
  111. package/dist-docs/assets/img/img_5.79a92838.png +0 -0
  112. package/dist-docs/assets/img/img_6.a48e76fe.png +0 -0
  113. package/dist-docs/assets/img/img_7.6a283273.png +0 -0
  114. package/dist-docs/assets/img/img_8.cc8bea6e.png +0 -0
  115. package/dist-docs/assets/img/mapgis-wmsserver.d02125e4.png +0 -0
  116. package/dist-docs/assets/img/maximumScreenSpaceError.0fe18df9.png +0 -0
  117. package/dist-docs/assets/img/minzoom-error.48ffbfc0.png +0 -0
  118. package/dist-docs/assets/img/rich-text.a733d89d.png +0 -0
  119. package/dist-docs/assets/img/scene_layer_1.6e06850f.png +0 -0
  120. package/dist-docs/assets/img/scene_layer_2.0abf41a1.png +0 -0
  121. package/dist-docs/assets/img/scene_layer_3.2ab58bc9.png +0 -0
  122. package/dist-docs/assets/img/scene_layer_4.c0e72cc4.png +0 -0
  123. package/dist-docs/assets/img/scene_layer_5.8839cbfd.png +0 -0
  124. package/dist-docs/assets/img/scene_layer_6.75a04a7e.png +0 -0
  125. package/dist-docs/assets/img/scene_layer_7.c930b15f.png +0 -0
  126. package/dist-docs/assets/img/search.83621669.svg +0 -1
  127. package/dist-docs/assets/img/selects.d7266d1e.png +0 -0
  128. package/dist-docs/assets/img/table.0f6e7d4b.png +0 -0
  129. package/dist-docs/assets/img/terrain_load.446f8cf4.png +0 -0
  130. package/dist-docs/assets/img/webclient-vue-cesium.dd9fbfdb.png +0 -0
  131. package/dist-docs/assets/js/10.fc57b0cc.js +0 -1
  132. package/dist-docs/assets/js/11.b954f99c.js +0 -1
  133. package/dist-docs/assets/js/12.021e39ab.js +0 -1
  134. package/dist-docs/assets/js/13.12df77fa.js +0 -1
  135. package/dist-docs/assets/js/14.6410454b.js +0 -1
  136. package/dist-docs/assets/js/15.c58479e4.js +0 -1
  137. package/dist-docs/assets/js/16.89ac43ea.js +0 -1
  138. package/dist-docs/assets/js/17.12bdd16a.js +0 -1
  139. package/dist-docs/assets/js/18.147c4f98.js +0 -1
  140. package/dist-docs/assets/js/19.0709d65f.js +0 -1
  141. package/dist-docs/assets/js/20.21dca636.js +0 -1
  142. package/dist-docs/assets/js/21.500530ac.js +0 -1
  143. package/dist-docs/assets/js/22.bb0aef6b.js +0 -1
  144. package/dist-docs/assets/js/23.a0938f08.js +0 -1
  145. package/dist-docs/assets/js/24.aa88ed0c.js +0 -1
  146. package/dist-docs/assets/js/25.4413f608.js +0 -1
  147. package/dist-docs/assets/js/26.b483463c.js +0 -1
  148. package/dist-docs/assets/js/27.6da60763.js +0 -1
  149. package/dist-docs/assets/js/28.78599c3a.js +0 -1
  150. package/dist-docs/assets/js/29.7f9684c8.js +0 -1
  151. package/dist-docs/assets/js/3.8682ab0b.js +0 -1
  152. package/dist-docs/assets/js/30.54f01c2b.js +0 -1
  153. package/dist-docs/assets/js/31.3e576068.js +0 -1
  154. package/dist-docs/assets/js/32.c9d0fbdf.js +0 -1
  155. package/dist-docs/assets/js/33.8f1d3741.js +0 -1
  156. package/dist-docs/assets/js/34.c48ccae5.js +0 -1
  157. package/dist-docs/assets/js/35.4ada564d.js +0 -1
  158. package/dist-docs/assets/js/36.9cdac935.js +0 -1
  159. package/dist-docs/assets/js/37.6ce6e255.js +0 -1
  160. package/dist-docs/assets/js/38.646f1573.js +0 -1
  161. package/dist-docs/assets/js/39.7c961c85.js +0 -1
  162. package/dist-docs/assets/js/4.4f953d91.js +0 -1
  163. package/dist-docs/assets/js/40.35fa1e67.js +0 -1
  164. package/dist-docs/assets/js/41.3b676499.js +0 -1
  165. package/dist-docs/assets/js/42.dd312491.js +0 -1
  166. package/dist-docs/assets/js/43.1afb12de.js +0 -1
  167. package/dist-docs/assets/js/44.bb43f598.js +0 -1
  168. package/dist-docs/assets/js/45.95ceff91.js +0 -1
  169. package/dist-docs/assets/js/46.4b671f73.js +0 -1
  170. package/dist-docs/assets/js/47.b39f812f.js +0 -1
  171. package/dist-docs/assets/js/48.aa61dd8a.js +0 -1
  172. package/dist-docs/assets/js/49.ee9115b1.js +0 -1
  173. package/dist-docs/assets/js/5.7798a6a9.js +0 -1
  174. package/dist-docs/assets/js/50.b46939d1.js +0 -1
  175. package/dist-docs/assets/js/51.7c343687.js +0 -1
  176. package/dist-docs/assets/js/52.742b94da.js +0 -1
  177. package/dist-docs/assets/js/53.eadbdc82.js +0 -1
  178. package/dist-docs/assets/js/54.b66efd7e.js +0 -1
  179. package/dist-docs/assets/js/55.8b2ad292.js +0 -1
  180. package/dist-docs/assets/js/56.9228eb8b.js +0 -1
  181. package/dist-docs/assets/js/57.b32c37af.js +0 -1
  182. package/dist-docs/assets/js/58.c1dce768.js +0 -1
  183. package/dist-docs/assets/js/59.95a3d9b7.js +0 -1
  184. package/dist-docs/assets/js/6.d575c9be.js +0 -1
  185. package/dist-docs/assets/js/60.53ca7494.js +0 -1
  186. package/dist-docs/assets/js/61.1febb4f5.js +0 -1
  187. package/dist-docs/assets/js/62.55ce28a0.js +0 -1
  188. package/dist-docs/assets/js/63.9df33434.js +0 -1
  189. package/dist-docs/assets/js/64.49653893.js +0 -1
  190. package/dist-docs/assets/js/65.edd48589.js +0 -1
  191. package/dist-docs/assets/js/66.0b45dbdc.js +0 -1
  192. package/dist-docs/assets/js/67.046a33b8.js +0 -1
  193. package/dist-docs/assets/js/68.bba7f139.js +0 -1
  194. package/dist-docs/assets/js/69.51d986bb.js +0 -1
  195. package/dist-docs/assets/js/7.4a6090da.js +0 -1
  196. package/dist-docs/assets/js/70.430801c6.js +0 -1
  197. package/dist-docs/assets/js/71.a4878f03.js +0 -1
  198. package/dist-docs/assets/js/72.04809b4d.js +0 -1
  199. package/dist-docs/assets/js/73.f00574ad.js +0 -1
  200. package/dist-docs/assets/js/74.1147a818.js +0 -1
  201. package/dist-docs/assets/js/75.5a6aa718.js +0 -1
  202. package/dist-docs/assets/js/76.05fa29a4.js +0 -1
  203. package/dist-docs/assets/js/77.6f266332.js +0 -1
  204. package/dist-docs/assets/js/78.af0bb05c.js +0 -1
  205. package/dist-docs/assets/js/79.d701c8a6.js +0 -1
  206. package/dist-docs/assets/js/8.e1110673.js +0 -1
  207. package/dist-docs/assets/js/80.0ddf54d9.js +0 -1
  208. package/dist-docs/assets/js/81.7b9946be.js +0 -1
  209. package/dist-docs/assets/js/82.b9b55001.js +0 -1
  210. package/dist-docs/assets/js/83.8665b982.js +0 -1
  211. package/dist-docs/assets/js/84.d86c5980.js +0 -1
  212. package/dist-docs/assets/js/85.5c4a89a2.js +0 -1
  213. package/dist-docs/assets/js/86.3b79f966.js +0 -1
  214. package/dist-docs/assets/js/87.94eb00ff.js +0 -1
  215. package/dist-docs/assets/js/88.cd7374cc.js +0 -1
  216. package/dist-docs/assets/js/89.f6eac417.js +0 -1
  217. package/dist-docs/assets/js/9.e0c77bdc.js +0 -1
  218. package/dist-docs/assets/js/90.54c09a11.js +0 -1
  219. package/dist-docs/assets/js/91.a5fde22d.js +0 -1
  220. package/dist-docs/assets/js/92.e6343876.js +0 -1
  221. package/dist-docs/assets/js/93.63edc1e3.js +0 -1
  222. package/dist-docs/assets/js/94.ee242da0.js +0 -1
  223. package/dist-docs/assets/js/95.6662977f.js +0 -1
  224. package/dist-docs/assets/js/96.e5e6257b.js +0 -1
  225. package/dist-docs/assets/js/97.7ba8c8b7.js +0 -1
  226. package/dist-docs/assets/js/98.4474a97c.js +0 -1
  227. package/dist-docs/assets/js/99.0ca2f58f.js +0 -1
  228. package/dist-docs/assets/js/app.86648983.js +0 -12
  229. package/dist-docs/assets/js/vendors~docsearch.f387753e.js +0 -3
  230. package/dist-docs/favicon.ico +0 -0
  231. package/dist-docs/guide/basemap.html +0 -93
  232. package/dist-docs/guide/customComponent.html +0 -276
  233. package/dist-docs/guide/index.html +0 -59
  234. package/dist-docs/guide/introduction.html +0 -48
  235. package/dist-docs/guide/markers&popups.html +0 -168
  236. package/dist-docs/guide/quickStart.html +0 -102
  237. package/dist-docs/guide/wms&map&doc.html +0 -43
  238. package/dist-docs/index.html +0 -46
  239. package/dist-docs/logo.svg +0 -7
  240. package/dist-docs/plugin_components/create_storybook.html +0 -198
  241. package/dist-docs/plugin_components/index.html +0 -70
  242. package/dist-docs/plugin_components/plugin_components_development.html +0 -199
  243. package/dist-docs/version/1_84.html +0 -63
  244. package/dist-docs/version/diff.html +0 -40
  245. package/dist-docs/version/version.html +0 -52
package/dist-docs/guide/customComponent.html DELETED
@@ -1,276 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="zh-CN">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>自定义组件 | 中地数码</title>
7
- <meta name="generator" content="VuePress 1.9.9">
8
- <script src="https://cdn.jsdelivr.net/npm/react@16.6.3/umd/react.production.min.js"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/react-dom@16.6.3/umd/react-dom.production.min.js"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
11
- <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
12
- <script src="https://cdn.jsdelivr.net/npm/numerify/lib/index.umd.min.js"></script>
13
- <link href="http://develop.smaryun.com/static/libs/cdn/zondyclient/npm/webclient-vue-cesium.css" rel="stylesheet" type="text/css">
14
- <script src="http://develop.smaryun.com/static/libs/cdn/zondyclient/npm/webclient-vue-cesium.umd.js"></script>
15
- <meta name="description" content="@mapgis/webclient-vue-cesium">
16
-
17
- <link rel="preload" href="/assets/css/0.styles.cb8abb08.css" as="style"><link rel="preload" href="/assets/js/app.86648983.js" as="script"><link rel="preload" href="/assets/js/3.8682ab0b.js" as="script"><link rel="preload" href="/assets/js/5.7798a6a9.js" as="script"><link rel="prefetch" href="/assets/js/10.fc57b0cc.js"><link rel="prefetch" href="/assets/js/11.b954f99c.js"><link rel="prefetch" href="/assets/js/12.021e39ab.js"><link rel="prefetch" href="/assets/js/13.12df77fa.js"><link rel="prefetch" href="/assets/js/14.6410454b.js"><link rel="prefetch" href="/assets/js/15.c58479e4.js"><link rel="prefetch" href="/assets/js/16.89ac43ea.js"><link rel="prefetch" href="/assets/js/17.12bdd16a.js"><link rel="prefetch" href="/assets/js/18.147c4f98.js"><link rel="prefetch" href="/assets/js/19.0709d65f.js"><link rel="prefetch" href="/assets/js/20.21dca636.js"><link rel="prefetch" href="/assets/js/21.500530ac.js"><link rel="prefetch" href="/assets/js/22.bb0aef6b.js"><link rel="prefetch" href="/assets/js/23.a0938f08.js"><link rel="prefetch" href="/assets/js/24.aa88ed0c.js"><link rel="prefetch" href="/assets/js/25.4413f608.js"><link rel="prefetch" href="/assets/js/26.b483463c.js"><link rel="prefetch" href="/assets/js/27.6da60763.js"><link rel="prefetch" href="/assets/js/28.78599c3a.js"><link rel="prefetch" href="/assets/js/29.7f9684c8.js"><link rel="prefetch" href="/assets/js/30.54f01c2b.js"><link rel="prefetch" href="/assets/js/31.3e576068.js"><link rel="prefetch" href="/assets/js/32.c9d0fbdf.js"><link rel="prefetch" href="/assets/js/33.8f1d3741.js"><link rel="prefetch" href="/assets/js/34.c48ccae5.js"><link rel="prefetch" href="/assets/js/35.4ada564d.js"><link rel="prefetch" href="/assets/js/36.9cdac935.js"><link rel="prefetch" href="/assets/js/37.6ce6e255.js"><link rel="prefetch" href="/assets/js/38.646f1573.js"><link rel="prefetch" href="/assets/js/39.7c961c85.js"><link rel="prefetch" href="/assets/js/4.4f953d91.js"><link rel="prefetch" href="/assets/js/40.35fa1e67.js"><link rel="prefetch" href="/assets/js/41.3b676499.js"><link rel="prefetch" href="/assets/js/42.dd312491.js"><link rel="prefetch" href="/assets/js/43.1afb12de.js"><link rel="prefetch" href="/assets/js/44.bb43f598.js"><link rel="prefetch" href="/assets/js/45.95ceff91.js"><link rel="prefetch" href="/assets/js/46.4b671f73.js"><link rel="prefetch" href="/assets/js/47.b39f812f.js"><link rel="prefetch" href="/assets/js/48.aa61dd8a.js"><link rel="prefetch" href="/assets/js/49.ee9115b1.js"><link rel="prefetch" href="/assets/js/50.b46939d1.js"><link rel="prefetch" href="/assets/js/51.7c343687.js"><link rel="prefetch" href="/assets/js/52.742b94da.js"><link rel="prefetch" href="/assets/js/53.eadbdc82.js"><link rel="prefetch" href="/assets/js/54.b66efd7e.js"><link rel="prefetch" href="/assets/js/55.8b2ad292.js"><link rel="prefetch" href="/assets/js/56.9228eb8b.js"><link rel="prefetch" href="/assets/js/57.b32c37af.js"><link rel="prefetch" href="/assets/js/58.c1dce768.js"><link rel="prefetch" href="/assets/js/59.95a3d9b7.js"><link rel="prefetch" href="/assets/js/6.d575c9be.js"><link rel="prefetch" href="/assets/js/60.53ca7494.js"><link rel="prefetch" href="/assets/js/61.1febb4f5.js"><link rel="prefetch" href="/assets/js/62.55ce28a0.js"><link rel="prefetch" href="/assets/js/63.9df33434.js"><link rel="prefetch" href="/assets/js/64.49653893.js"><link rel="prefetch" href="/assets/js/65.edd48589.js"><link rel="prefetch" href="/assets/js/66.0b45dbdc.js"><link rel="prefetch" href="/assets/js/67.046a33b8.js"><link rel="prefetch" href="/assets/js/68.bba7f139.js"><link rel="prefetch" href="/assets/js/69.51d986bb.js"><link rel="prefetch" href="/assets/js/7.4a6090da.js"><link rel="prefetch" href="/assets/js/70.430801c6.js"><link rel="prefetch" href="/assets/js/71.a4878f03.js"><link rel="prefetch" href="/assets/js/72.04809b4d.js"><link rel="prefetch" href="/assets/js/73.f00574ad.js"><link rel="prefetch" href="/assets/js/74.1147a818.js"><link rel="prefetch" href="/assets/js/75.5a6aa718.js"><link rel="prefetch" href="/assets/js/76.05fa29a4.js"><link rel="prefetch" href="/assets/js/77.6f266332.js"><link rel="prefetch" href="/assets/js/78.af0bb05c.js"><link rel="prefetch" href="/assets/js/79.d701c8a6.js"><link rel="prefetch" href="/assets/js/8.e1110673.js"><link rel="prefetch" href="/assets/js/80.0ddf54d9.js"><link rel="prefetch" href="/assets/js/81.7b9946be.js"><link rel="prefetch" href="/assets/js/82.b9b55001.js"><link rel="prefetch" href="/assets/js/83.8665b982.js"><link rel="prefetch" href="/assets/js/84.d86c5980.js"><link rel="prefetch" href="/assets/js/85.5c4a89a2.js"><link rel="prefetch" href="/assets/js/86.3b79f966.js"><link rel="prefetch" href="/assets/js/87.94eb00ff.js"><link rel="prefetch" href="/assets/js/88.cd7374cc.js"><link rel="prefetch" href="/assets/js/89.f6eac417.js"><link rel="prefetch" href="/assets/js/9.e0c77bdc.js"><link rel="prefetch" href="/assets/js/90.54c09a11.js"><link rel="prefetch" href="/assets/js/91.a5fde22d.js"><link rel="prefetch" href="/assets/js/92.e6343876.js"><link rel="prefetch" href="/assets/js/93.63edc1e3.js"><link rel="prefetch" href="/assets/js/94.ee242da0.js"><link rel="prefetch" href="/assets/js/95.6662977f.js"><link rel="prefetch" href="/assets/js/96.e5e6257b.js"><link rel="prefetch" href="/assets/js/97.7ba8c8b7.js"><link rel="prefetch" href="/assets/js/98.4474a97c.js"><link rel="prefetch" href="/assets/js/99.0ca2f58f.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.f387753e.js">
18
- <link rel="stylesheet" href="/assets/css/0.styles.cb8abb08.css">
19
- </head>
20
- <body>
21
- <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">中地数码</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">
22
- 向导
23
- </a></div><div class="nav-item"><a href="/api/" class="nav-link">
24
- API
25
- </a></div><div class="nav-item"><a href="http://develop.smaryun.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
26
- WebClient
27
- <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MapGIS/WebClient-Vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
28
- 开源
29
- <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">
30
- 向导
31
- </a></div><div class="nav-item"><a href="/api/" class="nav-link">
32
- API
33
- </a></div><div class="nav-item"><a href="http://develop.smaryun.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
34
- WebClient
35
- <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MapGIS/WebClient-Vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
36
- 开源
37
- <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>开发指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/" aria-current="page" class="sidebar-link">安装</a></li><li><a href="/guide/quickStart.html" class="sidebar-link">快速上手</a></li><li><a href="/guide/introduction.html" class="sidebar-link">模块说明</a></li><li><a href="/guide/basemap.html" class="sidebar-link">注意事项</a></li><li><a href="/guide/customComponent.html" aria-current="page" class="active sidebar-link">自定义组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/customComponent.html#创建插件组件" class="sidebar-link">创建插件组件</a></li><li class="sidebar-sub-header"><a href="/guide/customComponent.html#创建-storybook-示例" class="sidebar-link">创建 Storybook 示例</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>场景</span> <!----></p> <!----></section></li><li><a href="/api/" class="sidebar-link">地图场景</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>场景子组件</span> <!----></p> <!----></section></li><li><a href="/api/ui/popup.html" class="sidebar-link">气泡-自定义槽</a></li><li><a href="/api/ui/popupfeature.html" class="sidebar-link">气泡-默认样式</a></li><li><a href="/api/ui/marker.html" class="sidebar-link">标记点</a></li><li><a href="/api/ui/compare.html" class="sidebar-link">卷帘</a></li><li><a href="/api/ui/link.html" class="sidebar-link">多屏联动</a></li><li><a href="/api/ui/legend.html" class="sidebar-link">图例</a></li><li><a href="/api/ui/table.html" class="sidebar-link">表格</a></li><li><a href="/api/ui/draw.html" class="sidebar-link">绘制</a></li><li><a href="/api/ui/measure.html" class="sidebar-link">量测</a></li><li><a href="/api/ui/statebar.html" class="sidebar-link">状态栏</a></li><li><a href="/api/ui/debug.html" class="sidebar-link">调试</a></li><li><a href="/api/sceneeffect/SceneSetting.html" class="sidebar-link">场景设置</a></li><li><a href="/api/analysis/ViewpointManager.html" class="sidebar-link">视点管理</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>图层</span> <!----></p> <!----></section></li><li><a href="/api/layer/PopupMixin/popup.html" class="sidebar-link">图层拾取</a></li><li><a href="/api/layer/IGServer/IgsDynamicLayer.html" class="sidebar-link">IGS二维矢量</a></li><li><a href="/api/layer/IGServer/IgsDocLayer.html" class="sidebar-link">IGS地图文档</a></li><li><a href="/api/layer/IGServer/IgsFeatureLayer.html" class="sidebar-link">IGS Feature</a></li><li><a href="/api/layer/IGServer/IgsTileLayer.html" class="sidebar-link">IGS瓦片</a></li><li><a href="/api/provider/igsterrain.html" class="sidebar-link">IGS地形</a></li><li><a href="/api/layer/ArcGISServer/ArcGISMapLayer.html" class="sidebar-link">ArcGIS地图</a></li><li><a href="/api/layer/ArcGISServer/ArcGISTileLayer.html" class="sidebar-link">ArcGIS瓦片</a></li><li><a href="/api/layer/OGC/CesiumOgcWmsLayer.html" class="sidebar-link">WMS</a></li><li><a href="/api/layer/OGC/CesiumOgcWmtsLayer.html" class="sidebar-link">WMTS</a></li><li><a href="/api/layer/vectortile/vectortile.html" class="sidebar-link">矢量瓦片</a></li><li><a href="/api/layer/m3d/scene.html" class="sidebar-link">Scene图层</a></li><li><a href="/api/layer/m3d/m3d.html" class="sidebar-link">M3D图层</a></li><li><a href="/api/layer/Tileset/tileset.html" class="sidebar-link">3DTiles</a></li><li><a href="/api/layer/Geojson/geojson.html" class="sidebar-link">GeoJSON</a></li><li><a href="/api/layer/marker/DynamicMarker.html" class="sidebar-link">动态注记</a></li><li><a href="/api/layer/Graphic/GraphicLayer.html" class="sidebar-link">标绘图层</a></li><li><a href="/api/layer/Graphic/GraphicLayerService.html" class="sidebar-link">标绘图层-工具类</a></li><li><a href="/api/MapStory/MapStory.html" class="sidebar-link">地图故事图层</a></li><li><a href="/api/layer/3DPlot/PlotLayer.html" class="sidebar-link">行业标绘图层</a></li><li><a href="/api/layer/3DPlot/Plot.html" class="sidebar-link">行业标绘绘制组件</a></li><li><a href="/api/layer/3DPlot/PlotAnimation.html" class="sidebar-link">态势推演组件</a></li><li><a href="/api/layer/3DPlot/PlotLink.html" class="sidebar-link">行业标绘二三维联动</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>可视化</span> <!----></p> <!----></section></li><li><a href="/api/Overlay/Echarts.html" class="sidebar-link">Echarts</a></li><li><a href="/api/Overlay/Mapv.html" class="sidebar-link">MapV</a></li><li><a href="/api/Overlay/ParticleEffects.html" class="sidebar-link">粒子特效</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>场景漫游</span> <!----></p> <!----></section></li><li><a href="/api/sceneeffect/pathroaming.html" class="sidebar-link">单路径</a></li><li><a href="/api/sceneeffect/sceneroaming.html" class="sidebar-link">路径管理</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>模拟仿真</span> <!----></p> <!----></section></li><li><a href="/api/simulation/CityGrow.html" class="sidebar-link">城市生长</a></li><li><a href="/api/simulation/BuildingGrow.html" class="sidebar-link">单体建筑生长</a></li><li><a href="/api/simulation/PondingSimulation.html" class="sidebar-link">积水仿真</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>空间分析</span> <!----></p> <!----></section></li><li><a href="/api/analysis/Viewshed.html" class="sidebar-link">可视域分析</a></li><li><a href="/api/analysis/Sightline.html" class="sidebar-link">通视分析</a></li><li><a href="/api/analysis/Flood.html" class="sidebar-link">洪水淹没分析</a></li><li><a href="/api/analysis/DynamicCutting.html" class="sidebar-link">动态剖切</a></li><li><a href="/api/analysis/DynamicSection.html" class="sidebar-link">动态剖切-高级</a></li><li><a href="/api/analysis/Excavate.html" class="sidebar-link">开挖分析</a></li><li><a href="/api/analysis/Fill.html" class="sidebar-link">填挖方分析</a></li><li><a href="/api/analysis/HeightLimited.html" class="sidebar-link">限高分析</a></li><li><a href="/api/analysis/Shadow.html" class="sidebar-link">阴影分析</a></li><li><a href="/api/analysis/Skyline.html" class="sidebar-link">天际线分析</a></li><li><a href="/api/analysis/Contour.html" class="sidebar-link">等值线面分析</a></li><li><a href="/api/analysis/Household.html" class="sidebar-link">分层分户</a></li><li><a href="/api/analysis/Bim.html" class="sidebar-link">BIM构件树</a></li><li><a href="/api/analysis/ProjectorManager.html" class="sidebar-link">投放管理</a></li><li><a href="/api/analysis/ProjectorSetting.html" class="sidebar-link">投放配置</a></li><li><a href="/api/analysis/Buffer.html" class="sidebar-link">缓冲分析</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="自定义组件"><a href="#自定义组件" class="header-anchor">#</a> 自定义组件</h1> <h2 id="创建插件组件"><a href="#创建插件组件" class="header-anchor">#</a> 创建插件组件</h2> <h3 id="概述"><a href="#概述" class="header-anchor">#</a> 概述</h3> <p>webclient-vue-cesium 是针对原始的 cesium 脚本的封装。很多额外的高效的插件也是项目开发中常常使用的。因此为了将常用的 cesium 的插件也通过 Vue 的方式使用，下面将介绍如何创建插件组件。</p> <p>一个插件组件本质上还是通过 Vue 组件的方式，核心思想是通过获取 根组件<code>mapgis-web-scene</code>中的 <code>Cesium</code> 、 <code>CesiumZondy</code>和 <code>vueCesium</code> 以及 <code>component</code> 对象来进行对应的拓展功能。</p> <p>webclient-vue-cesium 内部使用独立的 Vue 注入机制<a href="https://vuejs.org/v2/api/#provide-inject" target="_blank" rel="noopener noreferrer">provide/inject<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>当<code>mapgis-web-scene</code>组件创建的时候，必须等到地图初始化加载完毕后，然后才会渲染子组件。同时通过 provide 的方式提供下面四个对象:</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ol><li><code>Cesium</code> @mapgis/cesium</li> <li><code>vueCesium</code> cesium 对象的存储管理器</li> <li><code>CesiumZondy</code> @mapgis/webclient-ceisum-plugin.js(后期不再使用)</li> <li><code>component</code> 当前 mapgis-web-scene 组件对象</li></ol></div> <p>只要是注入了上面的对象,你就可以添加地图要素或者执行对应的地图方法。 注入方法如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">inject</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;Cesium&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;vueCesium&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;CesiumZondy&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;viewer&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// viewer通过mapgis-web-scene组件对象：component.viewer获取</span>
38
- </code></pre></div><p>封装插件的核心思想是：保持 Vue 本身的声明规范，这样做可以容易封装额外的控制组件和图层组件。同时也容易封装第三方插件，适应不同的业务需求。</p> <h3 id="基本示例"><a href="#基本示例" class="header-anchor">#</a> 基本示例</h3> <p><strong>App 项目代码</strong></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
39
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>custom-geojson-layer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
40
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
41
-
42
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
43
- <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
44
- <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;mapgis-3d-custom-geojson-layer&quot;</span><span class="token punctuation">,</span>
45
- <span class="token literal-property property">inject</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;Cesium&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;vueCesium&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;viewer&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
46
- <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
47
- <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
48
- <span class="token comment">// import VueOptions from '@components/Base/Vue/VueOptions'</span>
49
- <span class="token comment">// ...VueOptions // VueOptions就是下面的vueKey， vueIndex</span>
50
- <span class="token literal-property property">vueKey</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&quot;default&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
51
- <span class="token literal-property property">vueIndex</span><span class="token operator">:</span> <span class="token punctuation">{</span>
52
- <span class="token literal-property property">type</span><span class="token operator">:</span> String <span class="token operator">|</span> Number<span class="token punctuation">,</span>
53
- <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">10000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
54
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
55
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
56
- <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
57
- <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
58
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
59
- <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
60
- <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
61
- <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
62
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
63
- <span class="token function">destroyed</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
64
- <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">unmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
65
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
66
- <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
67
- <span class="token function">createCesiumObject</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
68
- <span class="token keyword">const</span> <span class="token punctuation">{</span> url <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
69
- <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Cesium<span class="token punctuation">.</span>GeoJsonDataSource<span class="token punctuation">.</span>load</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
70
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
71
- <span class="token function">mount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
72
- <span class="token keyword">const</span> <span class="token punctuation">{</span> vueCesium<span class="token punctuation">,</span> viewer<span class="token punctuation">,</span> options<span class="token punctuation">,</span> type<span class="token punctuation">,</span> vueKey<span class="token punctuation">,</span> vueIndex <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
73
- <span class="token keyword">const</span> <span class="token punctuation">{</span> dataSources <span class="token punctuation">}</span> <span class="token operator">=</span> viewer<span class="token punctuation">;</span>
74
- <span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
75
- <span class="token keyword">let</span> datasource <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">createCesiumObject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
76
- <span class="token comment">// datasource这里绝对不能放到vue.data上</span>
77
- <span class="token comment">// this.$_datasource = datasource; $_前缀也不行，还是会触发更新机制</span>
78
-
79
- datasource<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">dataSource</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
80
- <span class="token comment">// viewer.zoomTo(dataSource);</span>
81
- dataSources<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>dataSource<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
82
- <span class="token keyword">let</span> entities <span class="token operator">=</span> dataSource<span class="token punctuation">.</span>entities<span class="token punctuation">.</span>values<span class="token punctuation">;</span>
83
- <span class="token comment">// 可以认为是一个范式，在 @components/WebGlobe/manager.js中新增/使用对应的XXXManager对象</span>
84
- <span class="token comment">// Cesium管理中心添加对应的记录，这段代码可以认为是对应的vue的mounted的生命周期中的初始化data属性</span>
85
- vueCesium<span class="token punctuation">.</span>GeojsonManager<span class="token punctuation">.</span><span class="token function">addSource</span><span class="token punctuation">(</span>vueKey<span class="token punctuation">,</span> vueIndex<span class="token punctuation">,</span> dataSource<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
86
- <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">&quot;load&quot;</span><span class="token punctuation">,</span> vm<span class="token punctuation">)</span><span class="token punctuation">;</span>
87
- <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
88
- <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
89
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
90
- <span class="token function">unmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
91
- <span class="token keyword">let</span> <span class="token punctuation">{</span> vueCesium<span class="token punctuation">,</span> viewer<span class="token punctuation">,</span> vueKey<span class="token punctuation">,</span> vueIndex <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
92
- <span class="token keyword">const</span> <span class="token punctuation">{</span> dataSources<span class="token punctuation">,</span> scene <span class="token punctuation">}</span> <span class="token operator">=</span> viewer<span class="token punctuation">;</span>
93
-
94
- <span class="token comment">// 这段代码可以认为是对应的vue的获取data属性</span>
95
- <span class="token keyword">let</span> find <span class="token operator">=</span> vueCesium<span class="token punctuation">.</span>GeojsonManager<span class="token punctuation">.</span><span class="token function">findSource</span><span class="token punctuation">(</span>vueKey<span class="token punctuation">,</span> vueIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
96
- <span class="token keyword">if</span> <span class="token punctuation">(</span>find<span class="token punctuation">)</span> <span class="token punctuation">{</span>
97
- <span class="token keyword">if</span> <span class="token punctuation">(</span>dataSources<span class="token punctuation">)</span> <span class="token punctuation">{</span>
98
- dataSources<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span>find<span class="token punctuation">.</span>source<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
99
- <span class="token punctuation">}</span>
100
- <span class="token punctuation">}</span>
101
- <span class="token comment">// 这段代码可以认为是对应的vue的获取destroyed生命周期</span>
102
- vueCesium<span class="token punctuation">.</span>GeojsonManager<span class="token punctuation">.</span><span class="token function">deleteSource</span><span class="token punctuation">(</span>vueKey<span class="token punctuation">,</span> vueIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
103
- <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">&quot;unload&quot;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
104
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
105
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
106
- <span class="token punctuation">}</span><span class="token punctuation">;</span>
107
- </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
108
- </code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code> window<span class="token punctuation">.</span>vueCesium<span class="token punctuation">.</span>GeojsonManager <span class="token operator">=</span> window<span class="token punctuation">.</span>vueCesium<span class="token punctuation">.</span>GeojsonManager <span class="token operator">||</span> <span class="token keyword">new</span> <span class="token class-name">GeojsonManager</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
109
- <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">GeojsonManager</span> <span class="token keyword">extends</span> <span class="token class-name">BaseManager</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
110
- <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">vueKey</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
111
- <span class="token keyword">this</span><span class="token punctuation">.</span>default <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
112
- <span class="token keyword">this</span><span class="token punctuation">.</span>vueKey <span class="token operator">=</span> vueKey <span class="token operator">||</span> <span class="token string">&quot;default&quot;</span><span class="token punctuation">;</span>
113
- <span class="token punctuation">}</span>
114
-
115
- <span class="token comment">// 添加数据</span>
116
- <span class="token function">addSource</span><span class="token punctuation">(</span><span class="token parameter">vueKey<span class="token punctuation">,</span> vueIndex<span class="token punctuation">,</span> source<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
117
- vueKey <span class="token operator">=</span> vueKey <span class="token operator">?</span> vueKey <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vueKey<span class="token punctuation">;</span>
118
- vueIndex <span class="token operator">=</span> vueIndex <span class="token operator">?</span> vueIndex <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vueIndex<span class="token punctuation">;</span>
119
- vueIndex <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>vueIndex<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
120
- <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">[</span>vueKey<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
121
- <span class="token keyword">this</span><span class="token punctuation">[</span>vueKey<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
122
- <span class="token punctuation">}</span>
123
- <span class="token keyword">this</span><span class="token punctuation">[</span>vueKey<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
124
- <span class="token literal-property property">key</span><span class="token operator">:</span> vueIndex<span class="token punctuation">,</span>
125
- <span class="token literal-property property">source</span><span class="token operator">:</span> source<span class="token punctuation">,</span>
126
- <span class="token literal-property property">options</span><span class="token operator">:</span> options<span class="token punctuation">,</span>
127
- <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
128
- <span class="token punctuation">}</span>
129
-
130
- <span class="token comment">// 删除数据</span>
131
- <span class="token function">deleteSource</span><span class="token punctuation">(</span><span class="token parameter">vueKey<span class="token punctuation">,</span> vueIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
132
- <span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
133
- vueIndex <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>vueIndex<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
134
- <span class="token keyword">this</span><span class="token punctuation">[</span>vueKey<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">s<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
135
- <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
136
- <span class="token keyword">if</span> <span class="token punctuation">(</span>s <span class="token operator">&amp;&amp;</span> s<span class="token punctuation">.</span>key <span class="token operator">===</span> vueIndex<span class="token punctuation">)</span> <span class="token punctuation">{</span>
137
- index <span class="token operator">=</span> i<span class="token punctuation">;</span>
138
- result <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
139
- <span class="token punctuation">}</span>
140
- <span class="token keyword">return</span> result<span class="token punctuation">;</span>
141
- <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
142
- <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">&gt;=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
143
- <span class="token keyword">this</span><span class="token punctuation">[</span>vueKey<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
144
- <span class="token punctuation">}</span>
145
- <span class="token punctuation">}</span>
146
-
147
- <span class="token comment">// 获取指定vue组件数据</span>
148
- <span class="token function">findSource</span><span class="token punctuation">(</span><span class="token parameter">vueKey<span class="token punctuation">,</span> vueIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
149
- vueKey <span class="token operator">=</span> vueKey <span class="token operator">?</span> vueKey <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vueKey<span class="token punctuation">;</span>
150
- vueIndex <span class="token operator">=</span> vueIndex <span class="token operator">?</span> vueIndex <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vueIndex<span class="token punctuation">;</span>
151
- vueIndex <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>vueIndex<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
152
- <span class="token keyword">let</span> index <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
153
- <span class="token keyword">let</span> findSource <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
154
- <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">[</span>vueKey<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token keyword">return</span> findSource<span class="token punctuation">;</span>
155
-
156
- <span class="token keyword">let</span> find <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">[</span>vueKey<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">s<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
157
- <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
158
- <span class="token keyword">if</span> <span class="token punctuation">(</span>s <span class="token operator">&amp;&amp;</span> s<span class="token punctuation">.</span>key <span class="token operator">===</span> vueIndex<span class="token punctuation">)</span> <span class="token punctuation">{</span>
159
- index <span class="token operator">=</span> i<span class="token punctuation">;</span>
160
- result <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
161
- <span class="token punctuation">}</span>
162
- <span class="token keyword">return</span> result<span class="token punctuation">;</span>
163
- <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
164
- <span class="token keyword">if</span> <span class="token punctuation">(</span>find<span class="token punctuation">)</span> <span class="token punctuation">{</span>
165
- findSource <span class="token operator">=</span> <span class="token punctuation">{</span>
166
- <span class="token operator">...</span>find<span class="token punctuation">,</span>
167
- <span class="token literal-property property">index</span><span class="token operator">:</span> index<span class="token punctuation">,</span>
168
- <span class="token punctuation">}</span><span class="token punctuation">;</span>
169
- <span class="token punctuation">}</span>
170
- <span class="token keyword">return</span> findSource<span class="token punctuation">;</span>
171
- <span class="token punctuation">}</span>
172
-
173
- <span class="token comment">// 获取全部vue组件数据</span>
174
- <span class="token function">findAllSource</span><span class="token punctuation">(</span><span class="token parameter">vueKey</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
175
- vueKey <span class="token operator">=</span> vueKey <span class="token operator">?</span> vueKey <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vueKey<span class="token punctuation">;</span>
176
- <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">[</span>vueKey<span class="token punctuation">]</span><span class="token punctuation">;</span>
177
- <span class="token punctuation">}</span>
178
- <span class="token punctuation">}</span>
179
- </code></pre></div><div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
180
- <span class="token property">&quot;default&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>...Layer1<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>...Layer2<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
181
- <span class="token property">&quot;custom_key&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>...Layer1<span class="token punctuation">}</span><span class="token punctuation">]</span>
182
- <span class="token punctuation">}</span>
183
- </code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>看完上面的源码分析，可能会存在一个疑问，为什么不采取 vue 的 data 属性来控制 Cesium 的图层对象，而是实现了一个 vueCesium.XXXXManager 来实现对应的生命周期管理。本质原因在于：</p> <ol><li>Cesium 的对象只能通过自身或者全局 window 来管理，一旦被 vue 框架管理，很容易出现 Cesuim 对象被 vue 自身的更新机制<code>反复强制更新</code>，这点在多屏联动以及 WebGL 渲染的时候尤其明显。</li> <li>Vue 的内存占用其实很低，绝大部分的内存、CPU、GPU 资源都是被 Cesium 本身占据，Cesium 本身有自身的内存管理方式，因此不能将<code>Cesium的生命周期让Vue框架来托管</code></li> <li>直接表现就是不类似这么处理，封装的 Cesium 组件在加载使用后会变得<code>异常卡顿</code></li></ol></div> <div class="custom-block tip"><p class="custom-block-title">可以做如下理解：</p> <blockquote><p>vue 组件<code>创建</code>cesium 某个对象的时候，vue 组件<code>mounted</code>中做 cesium 某个对象的存储。</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> datasource <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">this.createCesiumObject()</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token comment">// 创建Cesium本身的对象</span>
184
- </code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 可以认为是一个范式，在 @components/WebGlobe/manager.js中新增或使用对应的XXXManager对象</span>
185
- <span class="token comment">// 这段代码可以认为是对应的cesium对象的mounted的生命周期，初始化数据存储的作用。</span>
186
- vueCesium<span class="token punctuation">.</span>GeojsonManager<span class="token punctuation">.</span><span class="token function">addSource</span><span class="token punctuation">(</span>vueKey<span class="token punctuation">,</span> vueIndex<span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">dataSource</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
187
- </code></pre></div></div> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <blockquote><p>vue 组件使用<code>data</code>属性的时候，通过下面的代码来类比 this.data 使用 cesium 某个对象</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> find <span class="token operator">=</span> vueCesium<span class="token punctuation">.</span>GeojsonManager<span class="token punctuation">.</span><span class="token function">findSource</span><span class="token punctuation">(</span>vueKey<span class="token punctuation">,</span> vueIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
188
- <span class="token keyword">let</span> value <span class="token operator">=</span> find<span class="token punctuation">.</span>source<span class="token punctuation">;</span> <span class="token comment">// 获取mounted的时候存储的Cesium对象`dataSource`</span>
189
- </code></pre></div></div> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <blockquote><p>vue 组件<code>释放</code>cesium 对象的时候，vue 组件获取 data 的 cesium 对象进行对应的释放</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 类比data属性，获取对应的资源</span>
190
- <span class="token keyword">let</span> find <span class="token operator">=</span> vueCesium<span class="token punctuation">.</span>GeojsonManager<span class="token punctuation">.</span><span class="token function">findSource</span><span class="token punctuation">(</span>vueKey<span class="token punctuation">,</span> vueIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
191
- </code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 真正释放大量占用内存、GPU、CPU资源的地方</span>
192
- dataSources<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span>find<span class="token punctuation">.</span>source<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
193
- </code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Cesium管理中心删除对应的记录</span>
194
- <span class="token comment">// 释放真正占内存的cesium对象</span>
195
- vueCesium<span class="token punctuation">.</span>GeojsonManager<span class="token punctuation">.</span><span class="token function">deleteSource</span><span class="token punctuation">(</span>vueKey<span class="token punctuation">,</span> vueIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
196
- </code></pre></div></div> <div class="custom-block danger"><p class="custom-block-title">DANGER</p> <p>上面的核心思想就一句话，通过 XXXManager 来<code>托管类比</code>实现 Vue 的创建、使用、销毁的生命周期,一定要实际实战一下才能体会到这样设计的原因</p></div> <h2 id="创建-storybook-示例"><a href="#创建-storybook-示例" class="header-anchor">#</a> 创建 Storybook 示例</h2> <h3 id="一、注册组件到-storybook"><a href="#一、注册组件到-storybook" class="header-anchor">#</a> 一、注册组件到 StoryBook</h3> <p>这里以一个 WMTS 组件为例，创建了一个新组件
197
- <img src="/assets/img/img.89931892.png" alt="img.png"> <br>
198
- 将组建注册到 StoryBook 的配置文件中，配置文件路径如下：webclient-vue/.storybook/components/cesium_coms.js</p> <p><img src="/assets/img/img_1.ea78b5ed.png" alt="img_1.png"></p> <h3 id="二、创建一个-storybook-的-3d-组件示例"><a href="#二、创建一个-storybook-的-3d-组件示例" class="header-anchor">#</a> 二、创建一个 StoryBook 的 3D 组件示例</h3> <p>找到如下文件夹：webclient-vue/stories/mapgis3d，新建一个 storybook 的 3D 示例 CesiumExample.stories.js</p> <p><img src="/assets/img/img_2.d1236814.png" alt="img_2.png"></p> <h3 id="三、stories-的结构解析"><a href="#三、stories-的结构解析" class="header-anchor">#</a> 三、stories 的结构解析</h3> <p>一个 storybook 示例包含如下三部分：标题、示例代码、接口展示</p> <p><img src="/assets/img/img_3.fdad2ce3.png" alt="img_3.png"> <br>
199
- 标题结构如下：</p> <div class="language-vue extra-class"><pre class="language-vue"><code>export default { title: &quot;三维/图层/OGC/示例&quot;, argTypes: { baseUrl: {
200
- description:'地图请求的基地址路径', table:{ type:{ summary: 'tips',detail:
201
- &quot;这是提示信息&quot; }, defaultValue: { summary: 'null' }, }, control:'text' }, } };
202
- </code></pre></div><p>title 里面每一个斜杠'/'，代表一个文件夹，最后一个斜杠'/'后面的文字就是最终的标题，这里的标题就是“示例”
203
- <br></p> <p>示例代码结构如下：</p> <div class="language-vue extra-class"><pre class="language-vue"><code>const Template = (args, { argTypes }) =&gt; ({ props: Object.keys(argTypes),
204
- template: `
205
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mapgis-web-scene</span><span class="token punctuation">&gt;</span></span>
206
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mapgis-3d-ogc-example-wmts-layer</span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$props<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
207
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mapgis-web-scene</span><span class="token punctuation">&gt;</span></span>
208
- `, data(){ return {} }, methods:{ } });
209
- </code></pre></div><p>argTypes 代表对外展示的接口，所有的 argTypes 里面的值，都会展示到示例页面里</p> <p>props、template、data。methods 就是标准的 vue 模板语法，可完全按照 vue 来编写
210
- <br></p> <p>接口展示结构如下：</p> <div class="language-vue extra-class"><pre class="language-vue"><code>export const ExampleLayer = Template.bind({}); ExampleLayer.args = {
211
- baseUrl:&quot;http://develop.smaryun.com:6163/igs/rest/ogc/beijing/WMTSServer&quot;,
212
- wmtsLayer: &quot;beijing&quot;, tileMatrixSet : &quot;EPSG:4326_北京市_028mm_GB&quot;, tilingScheme
213
- : &quot;EPSG:4326&quot;, layerStyle: { visible: true, opacity: 1, zIndex: 10 }, vueIndex:
214
- 1, options: {} };
215
- </code></pre></div><p>请注意这句话 export const ExampleLayer = Template.bind({});
216
- <br></p> <p>&quot;ExampleLayer&quot;这个名称就是次级标题的名称</p> <p><img src="/assets/img/img_4.8dccaf99.png" alt="img_4.png"> <br></p> <p>ExampleLayer.args 里面的值将会展示在示例页面的 form 表单中</p> <p><img src="/assets/img/img_5.79a92838.png" alt="img_5.png"> <br></p> <p>在展示示例的接口展示表单中修改接口的值，可以实时更新示例，但请注意，更新走的是初始化的方法，不会触发 watch 函数！！！！</p> <p><img src="/assets/img/img_6.a48e76fe.png" alt="img_6.png"> <br></p> <p>编写接口描述信息，这里以 baseUrl 字段为例，展示如何编写 Description 以及 Default 的值</p> <p>在 export default 中的 argTypes 添加一个 baseUrl 字段，如下所示</p> <div class="language-vue extra-class"><pre class="language-vue"><code>export default { title: &quot;三维/图层/OGC/示例&quot;, argTypes: { //要描述的字段
217
- baseUrl: { //描述信息，即页面上Description那一栏的值
218
- description:'地图请求的基地址路径', table:{
219
- //description描述信息下的提示框，可选，添加这一项就会在描述信息文字下生成一个提示信息按钮
220
- //summary：提示按钮里的文字，detail：提示信息 type:{ summary: 'tips',detail:
221
- &quot;这里是提示&quot; },
222
- //默认值，即页面上Default那一栏的值，不在这里填写，则页面上不会有默认值
223
- //如果加了detail,{ summary: 'null',detail: &quot;这里是提示&quot;
224
- },则页面会多出一个描述信息的提示框 defaultValue: { summary: 'null' }, },
225
- //Control这里一栏里面展示数据的方式，可以是input、textArean、boolean等，可选值如下
226
- control:'text' }, } };
227
- </code></pre></div><p><img src="/assets/img/img_10.7d2345ef.png" alt="img_10.png"> <br></p> <p>control 的可选值：
228
- <br></p> <p><img src="/assets/img/img_7.6a283273.png" alt="img_7.png"></p> <p><img src="/assets/img/img_8.cc8bea6e.png" alt="img_8.png"></p> <h3 id="四、一个-stories-示例里面展示多个示例"><a href="#四、一个-stories-示例里面展示多个示例" class="header-anchor">#</a> 四、一个 stories 示例里面展示多个示例</h3> <div class="language-vue extra-class"><pre class="language-vue"><code>//展示第一个图层 export const ExampleLayer = Template.bind({});
229
- ExampleLayer.args = {
230
- baseUrl:&quot;http://develop.smaryun.com:6163/igs/rest/ogc/beijing/WMTSServer&quot;,
231
- wmtsLayer: &quot;beijing&quot;, tileMatrixSet : &quot;EPSG:4326_北京市_028mm_GB&quot;, tilingScheme
232
- : &quot;EPSG:4326&quot;, layerStyle: { visible: true, opacity: 1, zIndex: 10 }, vueIndex:
233
- 1, options: {} }; //展示第二个图层，此处不会在展示接口面板 export const
234
- ExampleLayerTwo = Template.bind({}); ExampleLayerTwo.args = {
235
- baseUrl:&quot;http://develop.smaryun.com:6163/igs/rest/ogc/beijing/WMTSServer&quot;,
236
- wmtsLayer: &quot;beijing&quot;, tileMatrixSet : &quot;EPSG:4326_北京市_028mm_GB&quot;, tilingScheme
237
- : &quot;EPSG:4326&quot;, layerStyle: { visible: true, opacity: 1, zIndex: 10 }, vueIndex:
238
- 1, options: {} };
239
- </code></pre></div><h3 id="五、完整-storybook-示例"><a href="#五、完整-storybook-示例" class="header-anchor">#</a> 五、完整 storybook 示例</h3> <div class="language-vue extra-class"><pre class="language-vue"><code>export default { title: &quot;三维/图层/OGC/示例&quot;, argTypes: { //要描述的字段
240
- baseUrl: { //描述信息，即页面上Description那一栏的值
241
- description:'地图请求的基地址路径', table:{
242
- //description描述信息下的提示框，可选，添加这一项就会在描述信息文字下生成一个提示信息按钮
243
- //summary：提示按钮里的文字，detail：提示信息 type:{ summary: 'tips',detail:
244
- &quot;这里是提示&quot; },
245
- //默认值，即页面上Default那一栏的值，不在这里填写，则页面上不会有默认值
246
- //如果加了detail,{ summary: 'null',detail: &quot;这里是提示&quot;
247
- },则页面会多出一个描述信息的提示框 defaultValue: { summary: 'null' }, },
248
- //Control这里一栏里面展示数据的方式，可以是input、textArean、boolean等，可选值如下
249
- control:'text' } } }; //按照vue语法写即可 const Template = (args, { argTypes })
250
- =&gt; ({ props: Object.keys(argTypes), template: `
251
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mapgis-web-scene</span><span class="token punctuation">&gt;</span></span>
252
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mapgis-3d-ogc-example-wmts-layer</span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$props<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
253
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mapgis-web-scene</span><span class="token punctuation">&gt;</span></span>
254
- `, data(){ return {} }, methods:{} }); //展示第一个图层 export const
255
- ExampleLayer = Template.bind({}); ExampleLayer.args = {
256
- baseUrl:&quot;http://develop.smaryun.com:6163/igs/rest/ogc/beijing/WMTSServer&quot;,
257
- wmtsLayer: &quot;beijing&quot;, tileMatrixSet : &quot;EPSG:4326_北京市_028mm_GB&quot;, tilingScheme
258
- : &quot;EPSG:4326&quot;, layerStyle: { visible: true, opacity: 1, zIndex: 10 }, vueIndex:
259
- 1, options: {} }; //展示第二个图层，此处不会在展示接口面板 export const
260
- ExampleLayerTwo = Template.bind({}); ExampleLayerTwo.args = {
261
- baseUrl:&quot;http://develop.smaryun.com:6163/igs/rest/ogc/beijing/WMTSServer&quot;,
262
- wmtsLayer: &quot;beijing&quot;, tileMatrixSet : &quot;EPSG:4326_北京市_028mm_GB&quot;, tilingScheme
263
- : &quot;EPSG:4326&quot;, layerStyle: { visible: true, opacity: 1, zIndex: 10 }, vueIndex:
264
- 1, options: {} };
265
- </code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
266
- ←
267
- <a href="/guide/basemap.html" class="prev">
268
- 注意事项
269
- </a></span> <span class="next"><a href="/api/">
270
- 地图场景
271
- </a>
272
- →
273
- </span></p></div> </main></div><div class="global-ui"></div></div>
274
- <script src="/assets/js/app.86648983.js" defer></script><script src="/assets/js/3.8682ab0b.js" defer></script><script src="/assets/js/5.7798a6a9.js" defer></script>
275
- </body>
276
- </html>
package/dist-docs/guide/index.html DELETED
@@ -1,59 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="zh-CN">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>安装 | 中地数码</title>
7
- <meta name="generator" content="VuePress 1.9.9">
8
- <script src="https://cdn.jsdelivr.net/npm/react@16.6.3/umd/react.production.min.js"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/react-dom@16.6.3/umd/react-dom.production.min.js"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
11
- <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
12
- <script src="https://cdn.jsdelivr.net/npm/numerify/lib/index.umd.min.js"></script>
13
- <link href="http://develop.smaryun.com/static/libs/cdn/zondyclient/npm/webclient-vue-cesium.css" rel="stylesheet" type="text/css">
14
- <script src="http://develop.smaryun.com/static/libs/cdn/zondyclient/npm/webclient-vue-cesium.umd.js"></script>
15
- <meta name="description" content="@mapgis/webclient-vue-cesium">
16
-
17
- <link rel="preload" href="/assets/css/0.styles.cb8abb08.css" as="style"><link rel="preload" href="/assets/js/app.86648983.js" as="script"><link rel="preload" href="/assets/js/3.8682ab0b.js" as="script"><link rel="preload" href="/assets/js/93.63edc1e3.js" as="script"><link rel="prefetch" href="/assets/js/10.fc57b0cc.js"><link rel="prefetch" href="/assets/js/11.b954f99c.js"><link rel="prefetch" href="/assets/js/12.021e39ab.js"><link rel="prefetch" href="/assets/js/13.12df77fa.js"><link rel="prefetch" href="/assets/js/14.6410454b.js"><link rel="prefetch" href="/assets/js/15.c58479e4.js"><link rel="prefetch" href="/assets/js/16.89ac43ea.js"><link rel="prefetch" href="/assets/js/17.12bdd16a.js"><link rel="prefetch" href="/assets/js/18.147c4f98.js"><link rel="prefetch" href="/assets/js/19.0709d65f.js"><link rel="prefetch" href="/assets/js/20.21dca636.js"><link rel="prefetch" href="/assets/js/21.500530ac.js"><link rel="prefetch" href="/assets/js/22.bb0aef6b.js"><link rel="prefetch" href="/assets/js/23.a0938f08.js"><link rel="prefetch" href="/assets/js/24.aa88ed0c.js"><link rel="prefetch" href="/assets/js/25.4413f608.js"><link rel="prefetch" href="/assets/js/26.b483463c.js"><link rel="prefetch" href="/assets/js/27.6da60763.js"><link rel="prefetch" href="/assets/js/28.78599c3a.js"><link rel="prefetch" href="/assets/js/29.7f9684c8.js"><link rel="prefetch" href="/assets/js/30.54f01c2b.js"><link rel="prefetch" href="/assets/js/31.3e576068.js"><link rel="prefetch" href="/assets/js/32.c9d0fbdf.js"><link rel="prefetch" href="/assets/js/33.8f1d3741.js"><link rel="prefetch" href="/assets/js/34.c48ccae5.js"><link rel="prefetch" href="/assets/js/35.4ada564d.js"><link rel="prefetch" href="/assets/js/36.9cdac935.js"><link rel="prefetch" href="/assets/js/37.6ce6e255.js"><link rel="prefetch" href="/assets/js/38.646f1573.js"><link rel="prefetch" href="/assets/js/39.7c961c85.js"><link rel="prefetch" href="/assets/js/4.4f953d91.js"><link rel="prefetch" href="/assets/js/40.35fa1e67.js"><link rel="prefetch" href="/assets/js/41.3b676499.js"><link rel="prefetch" href="/assets/js/42.dd312491.js"><link rel="prefetch" href="/assets/js/43.1afb12de.js"><link rel="prefetch" href="/assets/js/44.bb43f598.js"><link rel="prefetch" href="/assets/js/45.95ceff91.js"><link rel="prefetch" href="/assets/js/46.4b671f73.js"><link rel="prefetch" href="/assets/js/47.b39f812f.js"><link rel="prefetch" href="/assets/js/48.aa61dd8a.js"><link rel="prefetch" href="/assets/js/49.ee9115b1.js"><link rel="prefetch" href="/assets/js/5.7798a6a9.js"><link rel="prefetch" href="/assets/js/50.b46939d1.js"><link rel="prefetch" href="/assets/js/51.7c343687.js"><link rel="prefetch" href="/assets/js/52.742b94da.js"><link rel="prefetch" href="/assets/js/53.eadbdc82.js"><link rel="prefetch" href="/assets/js/54.b66efd7e.js"><link rel="prefetch" href="/assets/js/55.8b2ad292.js"><link rel="prefetch" href="/assets/js/56.9228eb8b.js"><link rel="prefetch" href="/assets/js/57.b32c37af.js"><link rel="prefetch" href="/assets/js/58.c1dce768.js"><link rel="prefetch" href="/assets/js/59.95a3d9b7.js"><link rel="prefetch" href="/assets/js/6.d575c9be.js"><link rel="prefetch" href="/assets/js/60.53ca7494.js"><link rel="prefetch" href="/assets/js/61.1febb4f5.js"><link rel="prefetch" href="/assets/js/62.55ce28a0.js"><link rel="prefetch" href="/assets/js/63.9df33434.js"><link rel="prefetch" href="/assets/js/64.49653893.js"><link rel="prefetch" href="/assets/js/65.edd48589.js"><link rel="prefetch" href="/assets/js/66.0b45dbdc.js"><link rel="prefetch" href="/assets/js/67.046a33b8.js"><link rel="prefetch" href="/assets/js/68.bba7f139.js"><link rel="prefetch" href="/assets/js/69.51d986bb.js"><link rel="prefetch" href="/assets/js/7.4a6090da.js"><link rel="prefetch" href="/assets/js/70.430801c6.js"><link rel="prefetch" href="/assets/js/71.a4878f03.js"><link rel="prefetch" href="/assets/js/72.04809b4d.js"><link rel="prefetch" href="/assets/js/73.f00574ad.js"><link rel="prefetch" href="/assets/js/74.1147a818.js"><link rel="prefetch" href="/assets/js/75.5a6aa718.js"><link rel="prefetch" href="/assets/js/76.05fa29a4.js"><link rel="prefetch" href="/assets/js/77.6f266332.js"><link rel="prefetch" href="/assets/js/78.af0bb05c.js"><link rel="prefetch" href="/assets/js/79.d701c8a6.js"><link rel="prefetch" href="/assets/js/8.e1110673.js"><link rel="prefetch" href="/assets/js/80.0ddf54d9.js"><link rel="prefetch" href="/assets/js/81.7b9946be.js"><link rel="prefetch" href="/assets/js/82.b9b55001.js"><link rel="prefetch" href="/assets/js/83.8665b982.js"><link rel="prefetch" href="/assets/js/84.d86c5980.js"><link rel="prefetch" href="/assets/js/85.5c4a89a2.js"><link rel="prefetch" href="/assets/js/86.3b79f966.js"><link rel="prefetch" href="/assets/js/87.94eb00ff.js"><link rel="prefetch" href="/assets/js/88.cd7374cc.js"><link rel="prefetch" href="/assets/js/89.f6eac417.js"><link rel="prefetch" href="/assets/js/9.e0c77bdc.js"><link rel="prefetch" href="/assets/js/90.54c09a11.js"><link rel="prefetch" href="/assets/js/91.a5fde22d.js"><link rel="prefetch" href="/assets/js/92.e6343876.js"><link rel="prefetch" href="/assets/js/94.ee242da0.js"><link rel="prefetch" href="/assets/js/95.6662977f.js"><link rel="prefetch" href="/assets/js/96.e5e6257b.js"><link rel="prefetch" href="/assets/js/97.7ba8c8b7.js"><link rel="prefetch" href="/assets/js/98.4474a97c.js"><link rel="prefetch" href="/assets/js/99.0ca2f58f.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.f387753e.js">
18
- <link rel="stylesheet" href="/assets/css/0.styles.cb8abb08.css">
19
- </head>
20
- <body>
21
- <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">中地数码</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
22
- 向导
23
- </a></div><div class="nav-item"><a href="/api/" class="nav-link">
24
- API
25
- </a></div><div class="nav-item"><a href="http://develop.smaryun.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
26
- WebClient
27
- <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MapGIS/WebClient-Vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
28
- 开源
29
- <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
30
- 向导
31
- </a></div><div class="nav-item"><a href="/api/" class="nav-link">
32
- API
33
- </a></div><div class="nav-item"><a href="http://develop.smaryun.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
34
- WebClient
35
- <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/MapGIS/WebClient-Vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
36
- 开源
37
- <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>开发指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/" aria-current="page" class="active sidebar-link">安装</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/quickStart.html" class="sidebar-link">快速上手</a></li><li><a href="/guide/introduction.html" class="sidebar-link">模块说明</a></li><li><a href="/guide/basemap.html" class="sidebar-link">注意事项</a></li><li><a href="/guide/customComponent.html" class="sidebar-link">自定义组件</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>场景</span> <!----></p> <!----></section></li><li><a href="/api/" class="sidebar-link">地图场景</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>场景子组件</span> <!----></p> <!----></section></li><li><a href="/api/ui/popup.html" class="sidebar-link">气泡-自定义槽</a></li><li><a href="/api/ui/popupfeature.html" class="sidebar-link">气泡-默认样式</a></li><li><a href="/api/ui/marker.html" class="sidebar-link">标记点</a></li><li><a href="/api/ui/compare.html" class="sidebar-link">卷帘</a></li><li><a href="/api/ui/link.html" class="sidebar-link">多屏联动</a></li><li><a href="/api/ui/legend.html" class="sidebar-link">图例</a></li><li><a href="/api/ui/table.html" class="sidebar-link">表格</a></li><li><a href="/api/ui/draw.html" class="sidebar-link">绘制</a></li><li><a href="/api/ui/measure.html" class="sidebar-link">量测</a></li><li><a href="/api/ui/statebar.html" class="sidebar-link">状态栏</a></li><li><a href="/api/ui/debug.html" class="sidebar-link">调试</a></li><li><a href="/api/sceneeffect/SceneSetting.html" class="sidebar-link">场景设置</a></li><li><a href="/api/analysis/ViewpointManager.html" class="sidebar-link">视点管理</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>图层</span> <!----></p> <!----></section></li><li><a href="/api/layer/PopupMixin/popup.html" class="sidebar-link">图层拾取</a></li><li><a href="/api/layer/IGServer/IgsDynamicLayer.html" class="sidebar-link">IGS二维矢量</a></li><li><a href="/api/layer/IGServer/IgsDocLayer.html" class="sidebar-link">IGS地图文档</a></li><li><a href="/api/layer/IGServer/IgsFeatureLayer.html" class="sidebar-link">IGS Feature</a></li><li><a href="/api/layer/IGServer/IgsTileLayer.html" class="sidebar-link">IGS瓦片</a></li><li><a href="/api/provider/igsterrain.html" class="sidebar-link">IGS地形</a></li><li><a href="/api/layer/ArcGISServer/ArcGISMapLayer.html" class="sidebar-link">ArcGIS地图</a></li><li><a href="/api/layer/ArcGISServer/ArcGISTileLayer.html" class="sidebar-link">ArcGIS瓦片</a></li><li><a href="/api/layer/OGC/CesiumOgcWmsLayer.html" class="sidebar-link">WMS</a></li><li><a href="/api/layer/OGC/CesiumOgcWmtsLayer.html" class="sidebar-link">WMTS</a></li><li><a href="/api/layer/vectortile/vectortile.html" class="sidebar-link">矢量瓦片</a></li><li><a href="/api/layer/m3d/scene.html" class="sidebar-link">Scene图层</a></li><li><a href="/api/layer/m3d/m3d.html" class="sidebar-link">M3D图层</a></li><li><a href="/api/layer/Tileset/tileset.html" class="sidebar-link">3DTiles</a></li><li><a href="/api/layer/Geojson/geojson.html" class="sidebar-link">GeoJSON</a></li><li><a href="/api/layer/marker/DynamicMarker.html" class="sidebar-link">动态注记</a></li><li><a href="/api/layer/Graphic/GraphicLayer.html" class="sidebar-link">标绘图层</a></li><li><a href="/api/layer/Graphic/GraphicLayerService.html" class="sidebar-link">标绘图层-工具类</a></li><li><a href="/api/MapStory/MapStory.html" class="sidebar-link">地图故事图层</a></li><li><a href="/api/layer/3DPlot/PlotLayer.html" class="sidebar-link">行业标绘图层</a></li><li><a href="/api/layer/3DPlot/Plot.html" class="sidebar-link">行业标绘绘制组件</a></li><li><a href="/api/layer/3DPlot/PlotAnimation.html" class="sidebar-link">态势推演组件</a></li><li><a href="/api/layer/3DPlot/PlotLink.html" class="sidebar-link">行业标绘二三维联动</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>可视化</span> <!----></p> <!----></section></li><li><a href="/api/Overlay/Echarts.html" class="sidebar-link">Echarts</a></li><li><a href="/api/Overlay/Mapv.html" class="sidebar-link">MapV</a></li><li><a href="/api/Overlay/ParticleEffects.html" class="sidebar-link">粒子特效</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>场景漫游</span> <!----></p> <!----></section></li><li><a href="/api/sceneeffect/pathroaming.html" class="sidebar-link">单路径</a></li><li><a href="/api/sceneeffect/sceneroaming.html" class="sidebar-link">路径管理</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>模拟仿真</span> <!----></p> <!----></section></li><li><a href="/api/simulation/CityGrow.html" class="sidebar-link">城市生长</a></li><li><a href="/api/simulation/BuildingGrow.html" class="sidebar-link">单体建筑生长</a></li><li><a href="/api/simulation/PondingSimulation.html" class="sidebar-link">积水仿真</a></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>空间分析</span> <!----></p> <!----></section></li><li><a href="/api/analysis/Viewshed.html" class="sidebar-link">可视域分析</a></li><li><a href="/api/analysis/Sightline.html" class="sidebar-link">通视分析</a></li><li><a href="/api/analysis/Flood.html" class="sidebar-link">洪水淹没分析</a></li><li><a href="/api/analysis/DynamicCutting.html" class="sidebar-link">动态剖切</a></li><li><a href="/api/analysis/DynamicSection.html" class="sidebar-link">动态剖切-高级</a></li><li><a href="/api/analysis/Excavate.html" class="sidebar-link">开挖分析</a></li><li><a href="/api/analysis/Fill.html" class="sidebar-link">填挖方分析</a></li><li><a href="/api/analysis/HeightLimited.html" class="sidebar-link">限高分析</a></li><li><a href="/api/analysis/Shadow.html" class="sidebar-link">阴影分析</a></li><li><a href="/api/analysis/Skyline.html" class="sidebar-link">天际线分析</a></li><li><a href="/api/analysis/Contour.html" class="sidebar-link">等值线面分析</a></li><li><a href="/api/analysis/Household.html" class="sidebar-link">分层分户</a></li><li><a href="/api/analysis/Bim.html" class="sidebar-link">BIM构件树</a></li><li><a href="/api/analysis/ProjectorManager.html" class="sidebar-link">投放管理</a></li><li><a href="/api/analysis/ProjectorSetting.html" class="sidebar-link">投放配置</a></li><li><a href="/api/analysis/Buffer.html" class="sidebar-link">缓冲分析</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h1> <h3 id="方式一-npm-安装"><a href="#方式一-npm-安装" class="header-anchor">#</a> 方式一：npm 安装</h3> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># npm或yarn安装 webclient-vue-cesium</span>
38
- <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">--save</span> @mapgis/webclient-vue-cesium
39
- <span class="token comment"># 或者</span>
40
- <span class="token function">yarn</span> <span class="token function">add</span> @mapgis/webclient-vue-cesium
41
- </code></pre></div><div class="custom-block tip"><p class="custom-block-title">安装webclient-vue-cesium的同时，默认会自动安装 webclient-vue-ui</p> <p>原因：由于 webclient-vue-cesium 使用了大量内置的 webclient-vue-ui，因此会同步安装 webclient-vue-ui</p></div> <h3 id="方式二-yarn-link特殊情况下-需要使用组件最新的功能时"><a href="#方式二-yarn-link特殊情况下-需要使用组件最新的功能时" class="header-anchor">#</a> 方式二：yarn link<code>特殊情况下：需要使用组件最新的功能时</code></h3> <p>1.通过在 github 路径中：https://github.com/MapGIS/WebClient-Vue 下载最新的 WebClient-Vue 项目。</p> <p>2.项目下载完成后，分别有：cesium、mapboxgl、ui 工程，执行对应文件中的 package.json 的 yarn/npm install 安装项目依赖。</p> <p>3.cd 进入 cesium 工程目录下，执行</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">yarn</span> <span class="token function">link</span>
42
- </code></pre></div><p>4.再 cd 进入自己的项目工程，执行</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">yarn</span> <span class="token function">link</span> @mapgis/webclient-vue-cesium
43
- </code></pre></div><p>5.同理，mapboxgl、ui 工程也执行 3、4 步骤来链接到自己项目中</p> <p>6.在项目中 main.js 中全局引入组件和样式文件即可使用</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token string">&quot;@mapgis/webclient-vue-ui/dist-libs/webclient-vue-ui.css&quot;</span><span class="token punctuation">;</span>
44
- <span class="token keyword">import</span> <span class="token string">&quot;@mapgis/webclient-vue-cesium/dist-libs/webclient-vue-cesium.css&quot;</span><span class="token punctuation">;</span>
45
-
46
- <span class="token keyword">import</span> MapgisUi <span class="token keyword">from</span> <span class="token string">&quot;@mapgis/webclient-vue-ui&quot;</span><span class="token punctuation">;</span>
47
- <span class="token keyword">import</span> Mapgis3d <span class="token keyword">from</span> <span class="token string">&quot;@mapgis/webclient-vue-cesium&quot;</span><span class="token punctuation">;</span>
48
-
49
- Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>MapgisUi<span class="token punctuation">)</span><span class="token punctuation">;</span>
50
- Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Mapgis3d<span class="token punctuation">)</span><span class="token punctuation">;</span>
51
- </code></pre></div><p>7.不想使用 link @mapgis/webclient-vue-cesium 时可以执行</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">yarn</span> unlink @mapgis/webclient-vue-cesium
52
- </code></pre></div><p>解除链接。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/guide/quickStart.html">
53
- 快速上手
54
- </a>
55
- →
56
- </span></p></div> </main></div><div class="global-ui"></div></div>
57
- <script src="/assets/js/app.86648983.js" defer></script><script src="/assets/js/3.8682ab0b.js" defer></script><script src="/assets/js/93.63edc1e3.js" defer></script>
58
- </body>
59
- </html>