@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/plugin_components/index.html DELETED
@@ -1,70 +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/96.e5e6257b.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/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/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">
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">
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/" 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" 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> <p>本框架实现了@mapgis/cesium.js 和 @mapgis/webclient-cesium-plugin.jse 的内核包装。
38
- 其他的三方插件功能，类似<a href="https://cesium.com/blog/2014/01/16/introducing-cesium-plugins/" target="_blank" rel="noopener noreferrer">Cesium plugins<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>没有被封装。但是这些三方的插件也可以被封装成 Vue 组件的形式。</p> <h2 id="使用插件组件"><a href="#使用插件组件" class="header-anchor">#</a> 使用插件组件</h2> <p>使用插件组件相当简单。只需要和正常的组件一样放到<code>&lt;mapgis-web-scene&gt;</code>的内部并传递必要的属性就可以使用了。
39
- 以矢量瓦片为例<a href="http://develop.smaryun.com/#/demo/vue-cesium/vvectortile/vectortile" target="_blank" rel="noopener noreferrer">Vue-Cesium-VectorTile<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> <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>
40
- <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>
41
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mapgis-3d-vectortile-layer</span> <span class="token attr-name">:styleUrl</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mvtStyleUrl<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
42
- <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>
43
- <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
44
-
45
- <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">
46
- <span class="token keyword">import</span> <span class="token punctuation">{</span>
47
- MapgisWebScene<span class="token punctuation">,</span>
48
- Mapgis3dVectortileLayer
49
- <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@mapgis/webclient-vue-cesium&quot;</span><span class="token punctuation">;</span>
50
-
51
- <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
52
- <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;App&quot;</span><span class="token punctuation">,</span>
53
-
54
- <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
55
- MapgisWebScene<span class="token punctuation">,</span>
56
- Mapgis3dVectortileLayer
57
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
58
- <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
59
- <span class="token keyword">return</span> <span class="token punctuation">{</span>
60
- <span class="token literal-property property">mvtStyleUrl</span><span class="token operator">:</span>
61
- <span class="token string">&quot;http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/styles/蓝色-墨卡托.json&quot;</span>
62
- <span class="token punctuation">}</span><span class="token punctuation">;</span>
63
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
64
- <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
65
- <span class="token punctuation">}</span><span class="token punctuation">;</span>
66
- </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>
67
- </code></pre></div><p>如果中地&amp;开源届封装的组件还是满足不了项目需求，那么下一章自己封装一个组件，相当简单<a href="/plugin_components/plugin_components_development.html">自定义封装组件</a>.</p> <h2 id="目前开源组件"><a href="#目前开源组件" class="header-anchor">#</a> 目前开源组件</h2> <p>暂无，待补充</p> <h2 id="目前中地内置组件"><a href="#目前中地内置组件" class="header-anchor">#</a> 目前中地内置组件</h2> <ul><li><a href="https://github.com/soal/vue-mapbox-geocoder" target="_blank" rel="noopener noreferrer">mapv<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></li> <li><a href="https://github.com/soal/vue-mapbox-geocoder" target="_blank" rel="noopener noreferrer">echarts<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></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
68
- <script src="/assets/js/app.86648983.js" defer></script><script src="/assets/js/3.8682ab0b.js" defer></script><script src="/assets/js/96.e5e6257b.js" defer></script>
69
- </body>
70
- </html>
package/dist-docs/plugin_components/plugin_components_development.html DELETED
@@ -1,199 +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/97.7ba8c8b7.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/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/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">
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">
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/" 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" 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> <h2 id="概述"><a href="#概述" class="header-anchor">#</a> 概述</h2> <p>Webclient-Vue-Cesium 是针对原始的 cesium 脚本的封装。很多额外的高效的插件也是项目开发中常常使用的。因此为了将常用的 cesium 的插件也通过 Vue 的方式使用，下面将介绍如何创建插件组件。</p> <p>一个插件组件本质上还是通过 Vue 组件的方式，核心思想是通过获取 根组件<code>mapgis-web-scene</code>中的 <code>Cesium</code> 和 <code>CesiumZondy</code> 以及 <code>webGlobe</code> 对象来进行对应的拓展功能。</p> <p>Webclient-Vue-Mapboxgl 内部使用独立的 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>viewer</code> mapgis Cesium.viewer 对象</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>
38
- </code></pre></div><p>封装插件的核心思想是： 保持 Vue 本身的声明规范，这样做可以容易封装额外的控制组件和图层组件.同时也容易封装第三方插件，适应不同的业务需求。</p> <h2 id="基本示例"><a href="#基本示例" class="header-anchor">#</a> 基本示例</h2> <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> <p><strong>一言以蔽之：</strong></p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <blockquote><p>Vue 组件<code>创建</code>的时候，vue 组件<code>mounted</code>的时候通过</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">// 这段代码可以认为是对应的vue的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>属性的时候，vue 组件获取<code>data</code>的时候通过下面的代码来类比 this.data</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>的时候，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></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
197
- <script src="/assets/js/app.86648983.js" defer></script><script src="/assets/js/3.8682ab0b.js" defer></script><script src="/assets/js/97.7ba8c8b7.js" defer></script>
198
- </body>
199
- </html>