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

BillboardGraphics.js 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
  1. import Frozen from "../Core/Frozen.js";
  2. import defined from "../Core/defined.js";
  3. import DeveloperError from "../Core/DeveloperError.js";
  4. import Event from "../Core/Event.js";
  5. import createPropertyDescriptor from "./createPropertyDescriptor.js";
  6. /**
  7. * @typedef {object} BillboardGraphics.ConstructorOptions
  8. *
  9. * Initialization options for the BillboardGraphics constructor
  10. *
  11. * @property {Property | boolean} [show=true] A boolean Property specifying the visibility of the billboard.
  12. * @property {Property | string | HTMLImageElement | HTMLCanvasElement} [image] A Property specifying the Image, URI, or Canvas to use for the billboard.
  13. * @property {Property | number} [scale=1.0] A numeric Property specifying the scale to apply to the image size.
  14. * @property {Property | Cartesian2} [pixelOffset=Cartesian2.ZERO] A {@link Cartesian2} Property specifying the pixel offset.
  15. * @property {Property | Cartesian3} [eyeOffset=Cartesian3.ZERO] A {@link Cartesian3} Property specifying the eye offset.
  16. * @property {Property | HorizontalOrigin} [horizontalOrigin=HorizontalOrigin.CENTER] A Property specifying the {@link HorizontalOrigin}.
  17. * @property {Property | VerticalOrigin} [verticalOrigin=VerticalOrigin.CENTER] A Property specifying the {@link VerticalOrigin}.
  18. * @property {Property | HeightReference} [heightReference=HeightReference.NONE] A Property specifying what the height is relative to.
  19. * @property {Property | Color} [color=Color.WHITE] A Property specifying the tint {@link Color} of the image.
  20. * @property {Property | number} [rotation=0] A numeric Property specifying the rotation about the alignedAxis.
  21. * @property {Property | Cartesian3} [alignedAxis=Cartesian3.ZERO] A {@link Cartesian3} Property specifying the unit vector axis of rotation.
  22. * @property {Property | boolean} [sizeInMeters] A boolean Property specifying whether this billboard's size should be measured in meters.
  23. * @property {Property | number} [width] A numeric Property specifying the width of the billboard in pixels, overriding the native size.
  24. * @property {Property | number} [height] A numeric Property specifying the height of the billboard in pixels, overriding the native size.
  25. * @property {Property | NearFarScalar} [scaleByDistance] A {@link NearFarScalar} Property used to scale the point based on distance from the camera.
  26. * @property {Property | NearFarScalar} [translucencyByDistance] A {@link NearFarScalar} Property used to set translucency based on distance from the camera.
  27. * @property {Property | NearFarScalar} [pixelOffsetScaleByDistance] A {@link NearFarScalar} Property used to set pixelOffset based on distance from the camera.
  28. * @property {Property | BoundingRectangle} [imageSubRegion] A Property specifying a {@link BoundingRectangle} that defines a sub-region of the image to use for the billboard, rather than the entire image, measured in pixels from the bottom-left.
  29. * @property {Property | DistanceDisplayCondition} [distanceDisplayCondition] A Property specifying at what distance from the camera that this billboard will be displayed.
  30. * @property {Property | number} [disableDepthTestDistance] A Property specifying the distance from the camera at which to disable the depth test to.
  31. * @property {Property | SplitDirection} [splitDirection] A Property specifying the {@link SplitDirection} of the billboard.
  32. */
  33. /**
  34. * Describes a two dimensional icon located at the position of the containing {@link Entity}.
  35. * <p>
  36. * <div align='center'>
  37. * <img src='Images/Billboard.png' width='400' height='300' /><br />
  38. * Example billboards
  39. * </div>
  40. * </p>
  41. *
  42. * @alias BillboardGraphics
  43. * @constructor
  44. *
  45. * @param {BillboardGraphics.ConstructorOptions} [options] Object describing initialization options
  46. *
  47. * @demo {@link https://sandcastle.cesium.com/index.html?id=billboards|Cesium Sandcastle Billboard Demo}
  48. */
  49. function BillboardGraphics(options) {
  50. this._definitionChanged = new Event();
  51. this._show = undefined;
  52. this._showSubscription = undefined;
  53. this._image = undefined;
  54. this._imageSubscription = undefined;
  55. this._scale = undefined;
  56. this._scaleSubscription = undefined;
  57. this._pixelOffset = undefined;
  58. this._pixelOffsetSubscription = undefined;
  59. this._eyeOffset = undefined;
  60. this._eyeOffsetSubscription = undefined;
  61. this._horizontalOrigin = undefined;
  62. this._horizontalOriginSubscription = undefined;
  63. this._verticalOrigin = undefined;
  64. this._verticalOriginSubscription = undefined;
  65. this._heightReference = undefined;
  66. this._heightReferenceSubscription = undefined;
  67. this._color = undefined;
  68. this._colorSubscription = undefined;
  69. this._rotation = undefined;
  70. this._rotationSubscription = undefined;
  71. this._alignedAxis = undefined;
  72. this._alignedAxisSubscription = undefined;
  73. this._sizeInMeters = undefined;
  74. this._sizeInMetersSubscription = undefined;
  75. this._width = undefined;
  76. this._widthSubscription = undefined;
  77. this._height = undefined;
  78. this._heightSubscription = undefined;
  79. this._scaleByDistance = undefined;
  80. this._scaleByDistanceSubscription = undefined;
  81. this._translucencyByDistance = undefined;
  82. this._translucencyByDistanceSubscription = undefined;
  83. this._pixelOffsetScaleByDistance = undefined;
  84. this._pixelOffsetScaleByDistanceSubscription = undefined;
  85. this._imageSubRegion = undefined;
  86. this._imageSubRegionSubscription = undefined;
  87. this._distanceDisplayCondition = undefined;
  88. this._distanceDisplayConditionSubscription = undefined;
  89. this._disableDepthTestDistance = undefined;
  90. this._disableDepthTestDistanceSubscription = undefined;
  91. this._splitDirection = undefined;
  92. this._splitDirectionSubscription = undefined;
  93. this.merge(options ?? Frozen.EMPTY_OBJECT);
  94. }
  95. Object.defineProperties(BillboardGraphics.prototype, {
  96. /**
  97. * Gets the event that is raised whenever a property or sub-property is changed or modified.
  98. * @memberof BillboardGraphics.prototype
  99. *
  100. * @type {Event}
  101. * @readonly
  102. */
  103. definitionChanged: {
  104. get: function () {
  105. return this._definitionChanged;
  106. },
  107. },
  108. /**
  109. * Gets or sets the boolean Property specifying the visibility of the billboard.
  110. * @memberof BillboardGraphics.prototype
  111. * @type {Property|undefined}
  112. * @default true
  113. */
  114. show: createPropertyDescriptor("show"),
  115. /**
  116. * Gets or sets the Property specifying the Image, URI, or Canvas to use for the billboard.
  117. * @memberof BillboardGraphics.prototype
  118. * @type {Property|undefined}
  119. */
  120. image: createPropertyDescriptor("image"),
  121. /**
  122. * Gets or sets the numeric Property specifying the uniform scale to apply to the image.
  123. * A scale greater than <code>1.0</code> enlarges the billboard while a scale less than <code>1.0</code> shrinks it.
  124. * <p>
  125. * <div align='center'>
  126. * <img src='Images/Billboard.setScale.png' width='400' height='300' /><br/>
  127. * From left to right in the above image, the scales are <code>0.5</code>, <code>1.0</code>, and <code>2.0</code>.
  128. * </div>
  129. * </p>
  130. * @memberof BillboardGraphics.prototype
  131. * @type {Property|undefined}
  132. * @default 1.0
  133. */
  134. scale: createPropertyDescriptor("scale"),
  135. /**
  136. * Gets or sets the {@link Cartesian2} Property specifying the billboard's pixel offset in screen space
  137. * from the origin of this billboard. This is commonly used to align multiple billboards and labels at
  138. * the same position, e.g., an image and text. The screen space origin is the top, left corner of the
  139. * canvas; <code>x</code> increases from left to right, and <code>y</code> increases from top to bottom.
  140. * <p>
  141. * <div align='center'>
  142. * <table border='0' cellpadding='5'><tr>
  143. * <td align='center'><code>default</code><br/><img src='Images/Billboard.setPixelOffset.default.png' width='250' height='188' /></td>
  144. * <td align='center'><code>b.pixeloffset = new Cartesian2(50, 25);</code><br/><img src='Images/Billboard.setPixelOffset.x50y-25.png' width='250' height='188' /></td>
  145. * </tr></table>
  146. * The billboard's origin is indicated by the yellow point.
  147. * </div>
  148. * </p>
  149. * @memberof BillboardGraphics.prototype
  150. * @type {Property|undefined}
  151. * @default Cartesian2.ZERO
  152. */
  153. pixelOffset: createPropertyDescriptor("pixelOffset"),
  154. /**
  155. * Gets or sets the {@link Cartesian3} Property specifying the billboard's offset in eye coordinates.
  156. * Eye coordinates is a left-handed coordinate system, where <code>x</code> points towards the viewer's
  157. * right, <code>y</code> points up, and <code>z</code> points into the screen.
  158. * <p>
  159. * An eye offset is commonly used to arrange multiple billboards or objects at the same position, e.g., to
  160. * arrange a billboard above its corresponding 3D model.
  161. * </p>
  162. * Below, the billboard is positioned at the center of the Earth but an eye offset makes it always
  163. * appear on top of the Earth regardless of the viewer's or Earth's orientation.
  164. * <p>
  165. * <div align='center'>
  166. * <table border='0' cellpadding='5'><tr>
  167. * <td align='center'><img src='Images/Billboard.setEyeOffset.one.png' width='250' height='188' /></td>
  168. * <td align='center'><img src='Images/Billboard.setEyeOffset.two.png' width='250' height='188' /></td>
  169. * </tr></table>
  170. * <code>b.eyeOffset = new Cartesian3(0.0, 8000000.0, 0.0);</code>
  171. * </div>
  172. * </p>
  173. * @memberof BillboardGraphics.prototype
  174. * @type {Property|undefined}
  175. * @default Cartesian3.ZERO
  176. */
  177. eyeOffset: createPropertyDescriptor("eyeOffset"),
  178. /**
  179. * Gets or sets the Property specifying the {@link HorizontalOrigin}.
  180. * @memberof BillboardGraphics.prototype
  181. * @type {Property|undefined}
  182. * @default HorizontalOrigin.CENTER
  183. */
  184. horizontalOrigin: createPropertyDescriptor("horizontalOrigin"),
  185. /**
  186. * Gets or sets the Property specifying the {@link VerticalOrigin}.
  187. * @memberof BillboardGraphics.prototype
  188. * @type {Property|undefined}
  189. * @default VerticalOrigin.CENTER
  190. */
  191. verticalOrigin: createPropertyDescriptor("verticalOrigin"),
  192. /**
  193. * Gets or sets the Property specifying the {@link HeightReference}.
  194. * @memberof BillboardGraphics.prototype
  195. * @type {Property|undefined}
  196. * @default HeightReference.NONE
  197. */
  198. heightReference: createPropertyDescriptor("heightReference"),
  199. /**
  200. * Gets or sets the Property specifying the {@link Color} that is multiplied with the <code>image</code>.
  201. * This has two common use cases. First, the same white texture may be used by many different billboards,
  202. * each with a different color, to create colored billboards. Second, the color's alpha component can be
  203. * used to make the billboard translucent as shown below. An alpha of <code>0.0</code> makes the billboard
  204. * transparent, and <code>1.0</code> makes the billboard opaque.
  205. * <p>
  206. * <div align='center'>
  207. * <table border='0' cellpadding='5'><tr>
  208. * <td align='center'><code>default</code><br/><img src='Images/Billboard.setColor.Alpha255.png' width='250' height='188' /></td>
  209. * <td align='center'><code>alpha : 0.5</code><br/><img src='Images/Billboard.setColor.Alpha127.png' width='250' height='188' /></td>
  210. * </tr></table>
  211. * </div>
  212. * </p>
  213. * @memberof BillboardGraphics.prototype
  214. * @type {Property|undefined}
  215. * @default Color.WHITE
  216. */
  217. color: createPropertyDescriptor("color"),
  218. /**
  219. * Gets or sets the numeric Property specifying the rotation of the image
  220. * counter clockwise from the <code>alignedAxis</code>.
  221. * @memberof BillboardGraphics.prototype
  222. * @type {Property|undefined}
  223. * @default 0
  224. */
  225. rotation: createPropertyDescriptor("rotation"),
  226. /**
  227. * Gets or sets the {@link Cartesian3} Property specifying the unit vector axis of rotation
  228. * in the fixed frame. When set to Cartesian3.ZERO the rotation is from the top of the screen.
  229. * @memberof BillboardGraphics.prototype
  230. * @type {Property|undefined}
  231. * @default Cartesian3.ZERO
  232. */
  233. alignedAxis: createPropertyDescriptor("alignedAxis"),
  234. /**
  235. * Gets or sets the boolean Property specifying if this billboard's size will be measured in meters.
  236. * @memberof BillboardGraphics.prototype
  237. * @type {Property|undefined}
  238. * @default false
  239. */
  240. sizeInMeters: createPropertyDescriptor("sizeInMeters"),
  241. /**
  242. * Gets or sets the numeric Property specifying the width of the billboard in pixels.
  243. * When undefined, the native width is used.
  244. * @memberof BillboardGraphics.prototype
  245. * @type {Property|undefined}
  246. */
  247. width: createPropertyDescriptor("width"),
  248. /**
  249. * Gets or sets the numeric Property specifying the height of the billboard in pixels.
  250. * When undefined, the native height is used.
  251. * @memberof BillboardGraphics.prototype
  252. * @type {Property|undefined}
  253. */
  254. height: createPropertyDescriptor("height"),
  255. /**
  256. * Gets or sets {@link NearFarScalar} Property specifying the scale of the billboard based on the distance from the camera.
  257. * A billboard's scale will interpolate between the {@link NearFarScalar#nearValue} and
  258. * {@link NearFarScalar#farValue} while the camera distance falls within the lower and upper bounds
  259. * of the specified {@link NearFarScalar#near} and {@link NearFarScalar#far}.
  260. * Outside of these ranges the billboard's scale remains clamped to the nearest bound.
  261. * @memberof BillboardGraphics.prototype
  262. * @type {Property|undefined}
  263. */
  264. scaleByDistance: createPropertyDescriptor("scaleByDistance"),
  265. /**
  266. * Gets or sets {@link NearFarScalar} Property specifying the translucency of the billboard based on the distance from the camera.
  267. * A billboard's translucency will interpolate between the {@link NearFarScalar#nearValue} and
  268. * {@link NearFarScalar#farValue} while the camera distance falls within the lower and upper bounds
  269. * of the specified {@link NearFarScalar#near} and {@link NearFarScalar#far}.
  270. * Outside of these ranges the billboard's translucency remains clamped to the nearest bound.
  271. * @memberof BillboardGraphics.prototype
  272. * @type {Property|undefined}
  273. */
  274. translucencyByDistance: createPropertyDescriptor("translucencyByDistance"),
  275. /**
  276. * Gets or sets {@link NearFarScalar} Property specifying the pixel offset of the billboard based on the distance from the camera.
  277. * A billboard's pixel offset will interpolate between the {@link NearFarScalar#nearValue} and
  278. * {@link NearFarScalar#farValue} while the camera distance falls within the lower and upper bounds
  279. * of the specified {@link NearFarScalar#near} and {@link NearFarScalar#far}.
  280. * Outside of these ranges the billboard's pixel offset remains clamped to the nearest bound.
  281. * @memberof BillboardGraphics.prototype
  282. * @type {Property|undefined}
  283. */
  284. pixelOffsetScaleByDistance: createPropertyDescriptor(
  285. "pixelOffsetScaleByDistance",
  286. ),
  287. /**
  288. * Gets or sets the Property specifying a {@link BoundingRectangle} that defines a
  289. * sub-region of the <code>image</code> to use for the billboard, rather than the entire image,
  290. * measured in pixels from the bottom-left.
  291. * @memberof BillboardGraphics.prototype
  292. * @type {Property|undefined}
  293. */
  294. imageSubRegion: createPropertyDescriptor("imageSubRegion"),
  295. /**
  296. * Gets or sets the {@link DistanceDisplayCondition} Property specifying at what distance from the camera that this billboard will be displayed.
  297. * @memberof BillboardGraphics.prototype
  298. * @type {Property|undefined}
  299. */
  300. distanceDisplayCondition: createPropertyDescriptor(
  301. "distanceDisplayCondition",
  302. ),
  303. /**
  304. * Gets or sets the distance from the camera at which to disable the depth test to, for example, prevent clipping against terrain.
  305. * When set to zero, the depth test is always applied. When set to Number.POSITIVE_INFINITY, the depth test is never applied.
  306. * @memberof BillboardGraphics.prototype
  307. * @type {Property|undefined}
  308. */
  309. disableDepthTestDistance: createPropertyDescriptor(
  310. "disableDepthTestDistance",
  311. ),
  312. /**
  313. * Gets or sets the Property specifying the {@link SplitDirection} of this billboard.
  314. * @memberof BillboardGraphics.prototype
  315. * @type {Property|undefined}
  316. * @default SplitDirection.NONE
  317. */
  318. splitDirection: createPropertyDescriptor("splitDirection"),
  319. });
  320. /**
  321. * Duplicates this instance.
  322. *
  323. * @param {BillboardGraphics} [result] The object onto which to store the result.
  324. * @returns {BillboardGraphics} The modified result parameter or a new instance if one was not provided.
  325. */
  326. BillboardGraphics.prototype.clone = function (result) {
  327. if (!defined(result)) {
  328. return new BillboardGraphics(this);
  329. }
  330. result.show = this._show;
  331. result.image = this._image;
  332. result.scale = this._scale;
  333. result.pixelOffset = this._pixelOffset;
  334. result.eyeOffset = this._eyeOffset;
  335. result.horizontalOrigin = this._horizontalOrigin;
  336. result.verticalOrigin = this._verticalOrigin;
  337. result.heightReference = this._heightReference;
  338. result.color = this._color;
  339. result.rotation = this._rotation;
  340. result.alignedAxis = this._alignedAxis;
  341. result.sizeInMeters = this._sizeInMeters;
  342. result.width = this._width;
  343. result.height = this._height;
  344. result.scaleByDistance = this._scaleByDistance;
  345. result.translucencyByDistance = this._translucencyByDistance;
  346. result.pixelOffsetScaleByDistance = this._pixelOffsetScaleByDistance;
  347. result.imageSubRegion = this._imageSubRegion;
  348. result.distanceDisplayCondition = this._distanceDisplayCondition;
  349. result.disableDepthTestDistance = this._disableDepthTestDistance;
  350. result.splitDirection = this._splitDirection;
  351. return result;
  352. };
  353. /**
  354. * Assigns each unassigned property on this object to the value
  355. * of the same property on the provided source object.
  356. *
  357. * @param {BillboardGraphics} source The object to be merged into this object.
  358. */
  359. BillboardGraphics.prototype.merge = function (source) {
  360. //>>includeStart('debug', pragmas.debug);
  361. if (!defined(source)) {
  362. throw new DeveloperError("source is required.");
  363. }
  364. //>>includeEnd('debug');
  365. this.show = this._show ?? source.show;
  366. this.image = this._image ?? source.image;
  367. this.scale = this._scale ?? source.scale;
  368. this.pixelOffset = this._pixelOffset ?? source.pixelOffset;
  369. this.eyeOffset = this._eyeOffset ?? source.eyeOffset;
  370. this.horizontalOrigin = this._horizontalOrigin ?? source.horizontalOrigin;
  371. this.verticalOrigin = this._verticalOrigin ?? source.verticalOrigin;
  372. this.heightReference = this._heightReference ?? source.heightReference;
  373. this.color = this._color ?? source.color;
  374. this.rotation = this._rotation ?? source.rotation;
  375. this.alignedAxis = this._alignedAxis ?? source.alignedAxis;
  376. this.sizeInMeters = this._sizeInMeters ?? source.sizeInMeters;
  377. this.width = this._width ?? source.width;
  378. this.height = this._height ?? source.height;
  379. this.scaleByDistance = this._scaleByDistance ?? source.scaleByDistance;
  380. this.translucencyByDistance =
  381. this._translucencyByDistance ?? source.translucencyByDistance;
  382. this.pixelOffsetScaleByDistance =
  383. this._pixelOffsetScaleByDistance ?? source.pixelOffsetScaleByDistance;
  384. this.imageSubRegion = this._imageSubRegion ?? source.imageSubRegion;
  385. this.distanceDisplayCondition =
  386. this._distanceDisplayCondition ?? source.distanceDisplayCondition;
  387. this.disableDepthTestDistance =
  388. this._disableDepthTestDistance ?? source.disableDepthTestDistance;
  389. this.splitDirection = this.splitDirection ?? source.splitDirection;
  390. };
  391. export default BillboardGraphics;