BillboardGraphics.js 19 KB

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