智慧水务管理系统 - 精河县供水工程综合管理平台

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. import Cartesian2 from "../Core/Cartesian2.js";
  2. import Cartesian3 from "../Core/Cartesian3.js";
  3. import Check from "../Core/Check.js";
  4. import Color from "../Core/Color.js";
  5. import Frozen from "../Core/Frozen.js";
  6. import defined from "../Core/defined.js";
  7. /**
  8. * <div class="notice">
  9. * A cloud is created and its initial properties are set by calling {@link CloudCollection#add}.
  10. * and {@link CloudCollection#remove}. Do not call the constructor directly.
  11. * </div>
  12. * A cumulus cloud billboard positioned in the 3D scene, that is created and rendered using a {@link CloudCollection}.
  13. * <br /><br />
  14. * <div align='center'>
  15. * <img src='Images/CumulusCloud.png' width='400' height='300' /><br />
  16. * Example cumulus clouds
  17. * </div>
  18. * @alias CumulusCloud
  19. *
  20. * @performance Similar to {@link Billboard}, reading a property, e.g., {@link CumulusCloud#show},
  21. * takes constant time. Assigning to a property is constant time but results in
  22. * CPU to GPU traffic when {@link CloudCollection#update} is called. The per-cloud traffic is
  23. * the same regardless of how many properties were updated. If most clouds in a collection need to be
  24. * updated, it may be more efficient to clear the collection with {@link CloudCollection#removeAll}
  25. * and add new clouds instead of modifying each one.
  26. *
  27. * @see CloudCollection
  28. * @see CloudCollection#add
  29. *
  30. * @internalConstructor
  31. * @class
  32. *
  33. * @demo {@link https://sandcastle.cesium.com/index.html?id=cloud-parameters|Cesium Sandcastle Cloud Parameters Demo}
  34. */
  35. function CumulusCloud(options, cloudCollection) {
  36. options = options ?? Frozen.EMPTY_OBJECT;
  37. this._show = options.show ?? true;
  38. this._position = Cartesian3.clone(options.position ?? Cartesian3.ZERO);
  39. if (!defined(options.scale) && defined(options.maximumSize)) {
  40. this._maximumSize = Cartesian3.clone(options.maximumSize);
  41. this._scale = new Cartesian2(this._maximumSize.x, this._maximumSize.y);
  42. } else {
  43. this._scale = Cartesian2.clone(options.scale ?? new Cartesian2(20.0, 12.0));
  44. const defaultMaxSize = new Cartesian3(
  45. this._scale.x,
  46. this._scale.y,
  47. Math.min(this._scale.x, this._scale.y) / 1.5,
  48. );
  49. this._maximumSize = Cartesian3.clone(options.maximumSize ?? defaultMaxSize);
  50. }
  51. this._slice = options.slice ?? -1.0;
  52. this._color = Color.clone(options.color ?? Color.WHITE);
  53. this._brightness = options.brightness ?? 1.0;
  54. this._cloudCollection = cloudCollection;
  55. this._index = -1; // Used by CloudCollection
  56. }
  57. const SHOW_INDEX = (CumulusCloud.SHOW_INDEX = 0);
  58. const POSITION_INDEX = (CumulusCloud.POSITION_INDEX = 1);
  59. const SCALE_INDEX = (CumulusCloud.SCALE_INDEX = 2);
  60. const MAXIMUM_SIZE_INDEX = (CumulusCloud.MAXIMUM_SIZE_INDEX = 3);
  61. const SLICE_INDEX = (CumulusCloud.SLICE_INDEX = 4);
  62. const BRIGHTNESS_INDEX = (CumulusCloud.BRIGHTNESS_INDEX = 5);
  63. const COLOR_INDEX = (CumulusCloud.COLOR_INDEX = 6);
  64. CumulusCloud.NUMBER_OF_PROPERTIES = 7;
  65. function makeDirty(cloud, propertyChanged) {
  66. const cloudCollection = cloud._cloudCollection;
  67. if (defined(cloudCollection)) {
  68. cloudCollection._updateCloud(cloud, propertyChanged);
  69. cloud._dirty = true;
  70. }
  71. }
  72. Object.defineProperties(CumulusCloud.prototype, {
  73. /**
  74. * Determines if this cumulus cloud will be shown. Use this to hide or show a cloud, instead
  75. * of removing it and re-adding it to the collection.
  76. * @memberof CumulusCloud.prototype
  77. * @type {boolean}
  78. * @default true
  79. */
  80. show: {
  81. get: function () {
  82. return this._show;
  83. },
  84. set: function (value) {
  85. //>>includeStart('debug', pragmas.debug);
  86. Check.typeOf.bool("value", value);
  87. //>>includeEnd('debug');
  88. if (this._show !== value) {
  89. this._show = value;
  90. makeDirty(this, SHOW_INDEX);
  91. }
  92. },
  93. },
  94. /**
  95. * Gets or sets the Cartesian position of this cumulus cloud.
  96. * @memberof CumulusCloud.prototype
  97. * @type {Cartesian3}
  98. */
  99. position: {
  100. get: function () {
  101. return this._position;
  102. },
  103. set: function (value) {
  104. //>>includeStart('debug', pragmas.debug)
  105. Check.typeOf.object("value", value);
  106. //>>includeEnd('debug');
  107. const position = this._position;
  108. if (!Cartesian3.equals(position, value)) {
  109. Cartesian3.clone(value, position);
  110. makeDirty(this, POSITION_INDEX);
  111. }
  112. },
  113. },
  114. /**
  115. * <p>Gets or sets the scale of the cumulus cloud billboard in meters.
  116. * The <code>scale</code> property will affect the size of the billboard,
  117. * but not the cloud's actual appearance.</p>
  118. * <div align='center'>
  119. * <table border='0' cellpadding='5'><tr>
  120. * <td align='center'>
  121. * <code>cloud.scale = new Cesium.Cartesian2(12, 8);</code><br/>
  122. * <img src='Images/CumulusCloud.scalex12y8.png' width='250' height='158' />
  123. * </td>
  124. * <td align='center'>
  125. * <code>cloud.scale = new Cesium.Cartesian2(24, 10);</code><br/>
  126. * <img src='Images/CumulusCloud.scalex24y10.png' width='250' height='158' />
  127. * </td>
  128. * </tr></table>
  129. * </div>
  130. *
  131. * <p>To modify the cloud's appearance, modify its <code>maximumSize</code>
  132. * and <code>slice</code> properties.</p>
  133. * @memberof CumulusCloud.prototype
  134. * @type {Cartesian2}
  135. *
  136. * @see CumulusCloud#maximumSize
  137. * @see CumulusCloud#slice
  138. */
  139. scale: {
  140. get: function () {
  141. return this._scale;
  142. },
  143. set: function (value) {
  144. //>>includeStart('debug', pragmas.debug)
  145. Check.typeOf.object("value", value);
  146. //>>includeEnd('debug');
  147. const scale = this._scale;
  148. if (!Cartesian2.equals(scale, value)) {
  149. Cartesian2.clone(value, scale);
  150. makeDirty(this, SCALE_INDEX);
  151. }
  152. },
  153. },
  154. /**
  155. * <p>Gets or sets the maximum size of the cumulus cloud rendered on the billboard.
  156. * This defines a maximum ellipsoid volume that the cloud can appear in.
  157. * Rather than guaranteeing a specific size, this specifies a boundary for the
  158. * cloud to appear in, and changing it can affect the shape of the cloud.</p>
  159. * <p>Changing the z-value of <code>maximumSize</code> has the most dramatic effect
  160. * on the cloud's appearance because it changes the depth of the cloud, and thus the
  161. * positions at which the cloud-shaping texture is sampled.</p>
  162. * <div align='center'>
  163. * <table border='0' cellpadding='5'>
  164. * <tr>
  165. * <td align='center'>
  166. * <code>cloud.maximumSize = new Cesium.Cartesian3(14, 9, 10);</code><br/>
  167. * <img src='Images/CumulusCloud.maximumSizex14y9z10.png' width='250' height='158' />
  168. * </td>
  169. * <td align='center'>
  170. * <code>cloud.maximumSize.x = 25;</code><br/>
  171. * <img src='Images/CumulusCloud.maximumSizex25.png' width='250' height='158' />
  172. * </td>
  173. * </tr>
  174. * <tr>
  175. * <td align='center'>
  176. * <code>cloud.maximumSize.y = 5;</code><br/>
  177. * <img src='Images/CumulusCloud.maximumSizey5.png' width='250' height='158' />
  178. * </td>
  179. * <td align='center'>
  180. * <code>cloud.maximumSize.z = 17;</code><br/>
  181. * <img src='Images/CumulusCloud.maximumSizez17.png' width='250' height='158' />
  182. * </td>
  183. * </tr>
  184. * </table>
  185. * </div>
  186. *
  187. * <p>To modify the billboard's actual size, modify the cloud's <code>scale</code> property.</p>
  188. * @memberof CumulusCloud.prototype
  189. * @type {Cartesian3}
  190. *
  191. * @see CumulusCloud#scale
  192. */
  193. maximumSize: {
  194. get: function () {
  195. return this._maximumSize;
  196. },
  197. set: function (value) {
  198. //>>includeStart('debug', pragmas.debug)
  199. Check.typeOf.object("value", value);
  200. //>>includeEnd('debug');
  201. const maximumSize = this._maximumSize;
  202. if (!Cartesian3.equals(maximumSize, value)) {
  203. Cartesian3.clone(value, maximumSize);
  204. makeDirty(this, MAXIMUM_SIZE_INDEX);
  205. }
  206. },
  207. },
  208. /**
  209. * Sets the color of the cloud
  210. * @memberof CumulusCloud.prototype
  211. * @type {Color}
  212. * @default Color.WHITE
  213. */
  214. color: {
  215. get: function () {
  216. return this._color;
  217. },
  218. set: function (value) {
  219. //>>includeStart('debug', pragmas.debug)
  220. Check.typeOf.object("value", value);
  221. //>>includeEnd('debug');
  222. const color = this._color;
  223. if (!Color.equals(color, value)) {
  224. Color.clone(value, color);
  225. makeDirty(this, COLOR_INDEX);
  226. }
  227. },
  228. },
  229. /**
  230. * <p>Gets or sets the "slice" of the cloud that is rendered on the billboard, i.e.
  231. * the specific cross-section of the cloud chosen for the billboard's appearance.
  232. * Given a value between 0 and 1, the slice specifies how deeply into the cloud
  233. * to intersect based on its maximum size in the z-direction.</p>
  234. * <div align='center'>
  235. * <table border='0' cellpadding='5'><tr>
  236. * <td align='center'><code>cloud.slice = 0.32;</code><br/><img src='Images/CumulusCloud.slice0.32.png' width='250' height='158' /></td>
  237. * <td align='center'><code>cloud.slice = 0.5;</code><br/><img src='Images/CumulusCloud.slice0.5.png' width='250' height='158' /></td>
  238. * <td align='center'><code>cloud.slice = 0.6;</code><br/><img src='Images/CumulusCloud.slice0.6.png' width='250' height='158' /></td>
  239. * </tr></table>
  240. * </div>
  241. *
  242. * <br />
  243. * <p>Due to the nature in which this slice is calculated,
  244. * values below <code>0.2</code> may result in cross-sections that are too small,
  245. * and the edge of the ellipsoid will be visible. Similarly, values above <code>0.7</code>
  246. * will cause the cloud to appear smaller. Values outside the range <code>[0.1, 0.9]</code>
  247. * should be avoided entirely because they do not produce desirable results.</p>
  248. *
  249. * <div align='center'>
  250. * <table border='0' cellpadding='5'><tr>
  251. * <td align='center'><code>cloud.slice = 0.08;</code><br/><img src='Images/CumulusCloud.slice0.08.png' width='250' height='158' /></td>
  252. * <td align='center'><code>cloud.slice = 0.8;</code><br/><img src='Images/CumulusCloud.slice0.8.png' width='250' height='158' /></td>
  253. * </tr></table>
  254. * </div>
  255. *
  256. * <p>If <code>slice</code> is set to a negative number, the cloud will not render a cross-section.
  257. * Instead, it will render the outside of the ellipsoid that is visible. For clouds with
  258. * small values of `maximumSize.z`, this can produce good-looking results, but for larger
  259. * clouds, this can result in a cloud that is undesirably warped to the ellipsoid volume.</p>
  260. *
  261. * <div align='center'>
  262. * <table border='0' cellpadding='5'><tr>
  263. * <td align='center'>
  264. * <code>cloud.slice = -1.0;<br/>cloud.maximumSize.z = 18;</code><br/>
  265. * <img src='Images/CumulusCloud.slice-1z18.png' width='250' height='158' />
  266. * </td>
  267. * <td align='center'>
  268. * <code>cloud.slice = -1.0;<br/>cloud.maximumSize.z = 30;</code><br/>
  269. * <img src='Images/CumulusCloud.slice-1z30.png' width='250' height='158' /></td>
  270. * </tr></table>
  271. * </div>
  272. *
  273. * @memberof CumulusCloud.prototype
  274. * @type {number}
  275. * @default -1.0
  276. */
  277. slice: {
  278. get: function () {
  279. return this._slice;
  280. },
  281. set: function (value) {
  282. //>>includeStart('debug', pragmas.debug)
  283. Check.typeOf.number("value", value);
  284. //>>includeEnd('debug');
  285. const slice = this._slice;
  286. if (slice !== value) {
  287. this._slice = value;
  288. makeDirty(this, SLICE_INDEX);
  289. }
  290. },
  291. },
  292. /**
  293. * Gets or sets the brightness of the cloud. This can be used to give clouds
  294. * a darker, grayer appearance.
  295. * <br /><br />
  296. * <div align='center'>
  297. * <table border='0' cellpadding='5'><tr>
  298. * <td align='center'><code>cloud.brightness = 1.0;</code><br/><img src='Images/CumulusCloud.brightness1.png' width='250' height='158' /></td>
  299. * <td align='center'><code>cloud.brightness = 0.6;</code><br/><img src='Images/CumulusCloud.brightness0.6.png' width='250' height='158' /></td>
  300. * <td align='center'><code>cloud.brightness = 0.0;</code><br/><img src='Images/CumulusCloud.brightness0.png' width='250' height='158' /></td>
  301. * </tr></table>
  302. * </div>
  303. * @memberof CumulusCloud.prototype
  304. * @type {number}
  305. * @default 1.0
  306. */
  307. brightness: {
  308. get: function () {
  309. return this._brightness;
  310. },
  311. set: function (value) {
  312. //>>includeStart('debug', pragmas.debug)
  313. Check.typeOf.number("value", value);
  314. //>>includeEnd('debug');
  315. const brightness = this._brightness;
  316. if (brightness !== value) {
  317. this._brightness = value;
  318. makeDirty(this, BRIGHTNESS_INDEX);
  319. }
  320. },
  321. },
  322. });
  323. CumulusCloud.prototype._destroy = function () {
  324. this._cloudCollection = undefined;
  325. };
  326. export default CumulusCloud;