LabelGraphics.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  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} LabelGraphics.ConstructorOptions
  8. *
  9. * Initialization options for the LabelGraphics constructor
  10. *
  11. * @property {Property | boolean} [show=true] A boolean Property specifying the visibility of the label.
  12. * @property {Property | string} [text] A Property specifying the text. Explicit newlines '\n' are supported.
  13. * @property {Property | string} [font='30px sans-serif'] A Property specifying the CSS font.
  14. * @property {Property | LabelStyle} [style=LabelStyle.FILL] A Property specifying the {@link LabelStyle}.
  15. * @property {Property | number} [scale=1.0] A numeric Property specifying the scale to apply to the text.
  16. * @property {Property | boolean} [showBackground=false] A boolean Property specifying the visibility of the background behind the label.
  17. * @property {Property | Color} [backgroundColor=new Color(0.165, 0.165, 0.165, 0.8)] A Property specifying the background {@link Color}.
  18. * @property {Property | Cartesian2} [backgroundPadding=new Cartesian2(7, 5)] A {@link Cartesian2} Property specifying the horizontal and vertical background padding in pixels.
  19. * @property {Property | Cartesian2} [pixelOffset=Cartesian2.ZERO] A {@link Cartesian2} Property specifying the pixel offset.
  20. * @property {Property | Cartesian3} [eyeOffset=Cartesian3.ZERO] A {@link Cartesian3} Property specifying the eye offset.
  21. * @property {Property | HorizontalOrigin} [horizontalOrigin=HorizontalOrigin.CENTER] A Property specifying the {@link HorizontalOrigin}.
  22. * @property {Property | VerticalOrigin} [verticalOrigin=VerticalOrigin.CENTER] A Property specifying the {@link VerticalOrigin}.
  23. * @property {Property | HeightReference} [heightReference=HeightReference.NONE] A Property specifying what the height is relative to.
  24. * @property {Property | Color} [fillColor=Color.WHITE] A Property specifying the fill {@link Color}.
  25. * @property {Property | Color} [outlineColor=Color.BLACK] A Property specifying the outline {@link Color}.
  26. * @property {Property | number} [outlineWidth=1.0] A numeric Property specifying the outline width.
  27. * @property {Property | NearFarScalar} [translucencyByDistance] A {@link NearFarScalar} Property used to set translucency based on distance from the camera.
  28. * @property {Property | NearFarScalar} [pixelOffsetScaleByDistance] A {@link NearFarScalar} Property used to set pixelOffset based on distance from the camera.
  29. * @property {Property | NearFarScalar} [scaleByDistance] A {@link NearFarScalar} Property used to set scale based on distance from the camera.
  30. * @property {Property | DistanceDisplayCondition} [distanceDisplayCondition] A Property specifying at what distance from the camera that this label will be displayed.
  31. * @property {Property | number} [disableDepthTestDistance] A Property specifying the distance from the camera at which to disable the depth test to.
  32. */
  33. /**
  34. * Describes a two dimensional label located at the position of the containing {@link Entity}.
  35. * <p>
  36. * <div align='center'>
  37. * <img src='Images/Label.png' width='400' height='300' /><br />
  38. * Example labels
  39. * </div>
  40. * </p>
  41. *
  42. * @alias LabelGraphics
  43. * @constructor
  44. *
  45. * @param {LabelGraphics.ConstructorOptions} [options] Object describing initialization options
  46. *
  47. * @demo {@link https://sandcastle.cesium.com/index.html?src=Labels.html|Cesium Sandcastle Labels Demo}
  48. */
  49. function LabelGraphics(options) {
  50. this._definitionChanged = new Event();
  51. this._show = undefined;
  52. this._showSubscription = undefined;
  53. this._text = undefined;
  54. this._textSubscription = undefined;
  55. this._font = undefined;
  56. this._fontSubscription = undefined;
  57. this._style = undefined;
  58. this._styleSubscription = undefined;
  59. this._scale = undefined;
  60. this._scaleSubscription = undefined;
  61. this._showBackground = undefined;
  62. this._showBackgroundSubscription = undefined;
  63. this._backgroundColor = undefined;
  64. this._backgroundColorSubscription = undefined;
  65. this._backgroundPadding = undefined;
  66. this._backgroundPaddingSubscription = undefined;
  67. this._pixelOffset = undefined;
  68. this._pixelOffsetSubscription = undefined;
  69. this._eyeOffset = undefined;
  70. this._eyeOffsetSubscription = undefined;
  71. this._horizontalOrigin = undefined;
  72. this._horizontalOriginSubscription = undefined;
  73. this._verticalOrigin = undefined;
  74. this._verticalOriginSubscription = undefined;
  75. this._heightReference = undefined;
  76. this._heightReferenceSubscription = undefined;
  77. this._fillColor = undefined;
  78. this._fillColorSubscription = undefined;
  79. this._outlineColor = undefined;
  80. this._outlineColorSubscription = undefined;
  81. this._outlineWidth = undefined;
  82. this._outlineWidthSubscription = undefined;
  83. this._translucencyByDistance = undefined;
  84. this._translucencyByDistanceSubscription = undefined;
  85. this._pixelOffsetScaleByDistance = undefined;
  86. this._pixelOffsetScaleByDistanceSubscription = undefined;
  87. this._scaleByDistance = undefined;
  88. this._scaleByDistanceSubscription = undefined;
  89. this._distanceDisplayCondition = undefined;
  90. this._distanceDisplayConditionSubscription = undefined;
  91. this._disableDepthTestDistance = undefined;
  92. this._disableDepthTestDistanceSubscription = undefined;
  93. this.merge(defaultValue(options, defaultValue.EMPTY_OBJECT));
  94. }
  95. Object.defineProperties(LabelGraphics.prototype, {
  96. /**
  97. * Gets the event that is raised whenever a property or sub-property is changed or modified.
  98. * @memberof LabelGraphics.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 label.
  110. * @memberof LabelGraphics.prototype
  111. * @type {Property|undefined}
  112. */
  113. show: createPropertyDescriptor("show"),
  114. /**
  115. * Gets or sets the string Property specifying the text of the label.
  116. * Explicit newlines '\n' are supported.
  117. * @memberof LabelGraphics.prototype
  118. * @type {Property|undefined}
  119. */
  120. text: createPropertyDescriptor("text"),
  121. /**
  122. * Gets or sets the string Property specifying the font in CSS syntax.
  123. * @memberof LabelGraphics.prototype
  124. * @type {Property|undefined}
  125. * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font|CSS font on MDN}
  126. */
  127. font: createPropertyDescriptor("font"),
  128. /**
  129. * Gets or sets the Property specifying the {@link LabelStyle}.
  130. * @memberof LabelGraphics.prototype
  131. * @type {Property|undefined}
  132. */
  133. style: createPropertyDescriptor("style"),
  134. /**
  135. * Gets or sets the numeric Property specifying the uniform scale to apply to the image.
  136. * A scale greater than <code>1.0</code> enlarges the label while a scale less than <code>1.0</code> shrinks it.
  137. * <p>
  138. * <div align='center'>
  139. * <img src='Images/Label.setScale.png' width='400' height='300' /><br/>
  140. * From left to right in the above image, the scales are <code>0.5</code>, <code>1.0</code>,
  141. * and <code>2.0</code>.
  142. * </div>
  143. * </p>
  144. * @memberof LabelGraphics.prototype
  145. * @type {Property|undefined}
  146. * @default 1.0
  147. */
  148. scale: createPropertyDescriptor("scale"),
  149. /**
  150. * Gets or sets the boolean Property specifying the visibility of the background behind the label.
  151. * @memberof LabelGraphics.prototype
  152. * @type {Property|undefined}
  153. * @default false
  154. */
  155. showBackground: createPropertyDescriptor("showBackground"),
  156. /**
  157. * Gets or sets the Property specifying the background {@link Color}.
  158. * @memberof LabelGraphics.prototype
  159. * @type {Property|undefined}
  160. * @default new Color(0.165, 0.165, 0.165, 0.8)
  161. */
  162. backgroundColor: createPropertyDescriptor("backgroundColor"),
  163. /**
  164. * Gets or sets the {@link Cartesian2} Property specifying the label's horizontal and vertical
  165. * background padding in pixels.
  166. * @memberof LabelGraphics.prototype
  167. * @type {Property|undefined}
  168. * @default new Cartesian2(7, 5)
  169. */
  170. backgroundPadding: createPropertyDescriptor("backgroundPadding"),
  171. /**
  172. * Gets or sets the {@link Cartesian2} Property specifying the label's pixel offset in screen space
  173. * from the origin of this label. This is commonly used to align multiple labels and labels at
  174. * the same position, e.g., an image and text. The screen space origin is the top, left corner of the
  175. * canvas; <code>x</code> increases from left to right, and <code>y</code> increases from top to bottom.
  176. * <p>
  177. * <div align='center'>
  178. * <table border='0' cellpadding='5'><tr>
  179. * <td align='center'><code>default</code><br/><img src='Images/Label.setPixelOffset.default.png' width='250' height='188' /></td>
  180. * <td align='center'><code>l.pixeloffset = new Cartesian2(25, 75);</code><br/><img src='Images/Label.setPixelOffset.x50y-25.png' width='250' height='188' /></td>
  181. * </tr></table>
  182. * The label's origin is indicated by the yellow point.
  183. * </div>
  184. * </p>
  185. * @memberof LabelGraphics.prototype
  186. * @type {Property|undefined}
  187. * @default Cartesian2.ZERO
  188. */
  189. pixelOffset: createPropertyDescriptor("pixelOffset"),
  190. /**
  191. * Gets or sets the {@link Cartesian3} Property specifying the label's offset in eye coordinates.
  192. * Eye coordinates is a left-handed coordinate system, where <code>x</code> points towards the viewer's
  193. * right, <code>y</code> points up, and <code>z</code> points into the screen.
  194. * <p>
  195. * An eye offset is commonly used to arrange multiple labels or objects at the same position, e.g., to
  196. * arrange a label above its corresponding 3D model.
  197. * </p>
  198. * Below, the label is positioned at the center of the Earth but an eye offset makes it always
  199. * appear on top of the Earth regardless of the viewer's or Earth's orientation.
  200. * <p>
  201. * <div align='center'>
  202. * <table border='0' cellpadding='5'><tr>
  203. * <td align='center'><img src='Images/Billboard.setEyeOffset.one.png' width='250' height='188' /></td>
  204. * <td align='center'><img src='Images/Billboard.setEyeOffset.two.png' width='250' height='188' /></td>
  205. * </tr></table>
  206. * <code>l.eyeOffset = new Cartesian3(0.0, 8000000.0, 0.0);</code><br /><br />
  207. * </div>
  208. * </p>
  209. * @memberof LabelGraphics.prototype
  210. * @type {Property|undefined}
  211. * @default Cartesian3.ZERO
  212. */
  213. eyeOffset: createPropertyDescriptor("eyeOffset"),
  214. /**
  215. * Gets or sets the Property specifying the {@link HorizontalOrigin}.
  216. * @memberof LabelGraphics.prototype
  217. * @type {Property|undefined}
  218. */
  219. horizontalOrigin: createPropertyDescriptor("horizontalOrigin"),
  220. /**
  221. * Gets or sets the Property specifying the {@link VerticalOrigin}.
  222. * @memberof LabelGraphics.prototype
  223. * @type {Property|undefined}
  224. */
  225. verticalOrigin: createPropertyDescriptor("verticalOrigin"),
  226. /**
  227. * Gets or sets the Property specifying the {@link HeightReference}.
  228. * @memberof LabelGraphics.prototype
  229. * @type {Property|undefined}
  230. * @default HeightReference.NONE
  231. */
  232. heightReference: createPropertyDescriptor("heightReference"),
  233. /**
  234. * Gets or sets the Property specifying the fill {@link Color}.
  235. * @memberof LabelGraphics.prototype
  236. * @type {Property|undefined}
  237. */
  238. fillColor: createPropertyDescriptor("fillColor"),
  239. /**
  240. * Gets or sets the Property specifying the outline {@link Color}.
  241. * @memberof LabelGraphics.prototype
  242. * @type {Property|undefined}
  243. */
  244. outlineColor: createPropertyDescriptor("outlineColor"),
  245. /**
  246. * Gets or sets the numeric Property specifying the outline width.
  247. * @memberof LabelGraphics.prototype
  248. * @type {Property|undefined}
  249. */
  250. outlineWidth: createPropertyDescriptor("outlineWidth"),
  251. /**
  252. * Gets or sets {@link NearFarScalar} Property specifying the translucency of the label based on the distance from the camera.
  253. * A label's translucency will interpolate between the {@link NearFarScalar#nearValue} and
  254. * {@link NearFarScalar#farValue} while the camera distance falls within the lower and upper bounds
  255. * of the specified {@link NearFarScalar#near} and {@link NearFarScalar#far}.
  256. * Outside of these ranges the label's translucency remains clamped to the nearest bound.
  257. * @memberof LabelGraphics.prototype
  258. * @type {Property|undefined}
  259. */
  260. translucencyByDistance: createPropertyDescriptor("translucencyByDistance"),
  261. /**
  262. * Gets or sets {@link NearFarScalar} Property specifying the pixel offset of the label based on the distance from the camera.
  263. * A label's pixel offset will interpolate between the {@link NearFarScalar#nearValue} and
  264. * {@link NearFarScalar#farValue} while the camera distance falls within the lower and upper bounds
  265. * of the specified {@link NearFarScalar#near} and {@link NearFarScalar#far}.
  266. * Outside of these ranges the label's pixel offset remains clamped to the nearest bound.
  267. * @memberof LabelGraphics.prototype
  268. * @type {Property|undefined}
  269. */
  270. pixelOffsetScaleByDistance: createPropertyDescriptor(
  271. "pixelOffsetScaleByDistance"
  272. ),
  273. /**
  274. * Gets or sets near and far scaling properties of a Label based on the label's distance from the camera.
  275. * A label's scale will interpolate between the {@link NearFarScalar#nearValue} and
  276. * {@link NearFarScalar#farValue} while the camera distance falls within the lower and upper bounds
  277. * of the specified {@link NearFarScalar#near} and {@link NearFarScalar#far}.
  278. * Outside of these ranges the label's scale remains clamped to the nearest bound. If undefined,
  279. * scaleByDistance will be disabled.
  280. * @memberof LabelGraphics.prototype
  281. * @type {Property|undefined}
  282. */
  283. scaleByDistance: createPropertyDescriptor("scaleByDistance"),
  284. /**
  285. * Gets or sets the {@link DistanceDisplayCondition} Property specifying at what distance from the camera that this label will be displayed.
  286. * @memberof LabelGraphics.prototype
  287. * @type {Property|undefined}
  288. */
  289. distanceDisplayCondition: createPropertyDescriptor(
  290. "distanceDisplayCondition"
  291. ),
  292. /**
  293. * Gets or sets the distance from the camera at which to disable the depth test to, for example, prevent clipping against terrain.
  294. * When set to zero, the depth test is always applied. When set to Number.POSITIVE_INFINITY, the depth test is never applied.
  295. * @memberof LabelGraphics.prototype
  296. * @type {Property|undefined}
  297. */
  298. disableDepthTestDistance: createPropertyDescriptor(
  299. "disableDepthTestDistance"
  300. ),
  301. });
  302. /**
  303. * Duplicates this instance.
  304. *
  305. * @param {LabelGraphics} [result] The object onto which to store the result.
  306. * @returns {LabelGraphics} The modified result parameter or a new instance if one was not provided.
  307. */
  308. LabelGraphics.prototype.clone = function (result) {
  309. if (!defined(result)) {
  310. return new LabelGraphics(this);
  311. }
  312. result.show = this.show;
  313. result.text = this.text;
  314. result.font = this.font;
  315. result.style = this.style;
  316. result.scale = this.scale;
  317. result.showBackground = this.showBackground;
  318. result.backgroundColor = this.backgroundColor;
  319. result.backgroundPadding = this.backgroundPadding;
  320. result.pixelOffset = this.pixelOffset;
  321. result.eyeOffset = this.eyeOffset;
  322. result.horizontalOrigin = this.horizontalOrigin;
  323. result.verticalOrigin = this.verticalOrigin;
  324. result.heightReference = this.heightReference;
  325. result.fillColor = this.fillColor;
  326. result.outlineColor = this.outlineColor;
  327. result.outlineWidth = this.outlineWidth;
  328. result.translucencyByDistance = this.translucencyByDistance;
  329. result.pixelOffsetScaleByDistance = this.pixelOffsetScaleByDistance;
  330. result.scaleByDistance = this.scaleByDistance;
  331. result.distanceDisplayCondition = this.distanceDisplayCondition;
  332. result.disableDepthTestDistance = this.disableDepthTestDistance;
  333. return result;
  334. };
  335. /**
  336. * Assigns each unassigned property on this object to the value
  337. * of the same property on the provided source object.
  338. *
  339. * @param {LabelGraphics} source The object to be merged into this object.
  340. */
  341. LabelGraphics.prototype.merge = function (source) {
  342. //>>includeStart('debug', pragmas.debug);
  343. if (!defined(source)) {
  344. throw new DeveloperError("source is required.");
  345. }
  346. //>>includeEnd('debug');
  347. this.show = defaultValue(this.show, source.show);
  348. this.text = defaultValue(this.text, source.text);
  349. this.font = defaultValue(this.font, source.font);
  350. this.style = defaultValue(this.style, source.style);
  351. this.scale = defaultValue(this.scale, source.scale);
  352. this.showBackground = defaultValue(
  353. this.showBackground,
  354. source.showBackground
  355. );
  356. this.backgroundColor = defaultValue(
  357. this.backgroundColor,
  358. source.backgroundColor
  359. );
  360. this.backgroundPadding = defaultValue(
  361. this.backgroundPadding,
  362. source.backgroundPadding
  363. );
  364. this.pixelOffset = defaultValue(this.pixelOffset, source.pixelOffset);
  365. this.eyeOffset = defaultValue(this.eyeOffset, source.eyeOffset);
  366. this.horizontalOrigin = defaultValue(
  367. this.horizontalOrigin,
  368. source.horizontalOrigin
  369. );
  370. this.verticalOrigin = defaultValue(
  371. this.verticalOrigin,
  372. source.verticalOrigin
  373. );
  374. this.heightReference = defaultValue(
  375. this.heightReference,
  376. source.heightReference
  377. );
  378. this.fillColor = defaultValue(this.fillColor, source.fillColor);
  379. this.outlineColor = defaultValue(this.outlineColor, source.outlineColor);
  380. this.outlineWidth = defaultValue(this.outlineWidth, source.outlineWidth);
  381. this.translucencyByDistance = defaultValue(
  382. this.translucencyByDistance,
  383. source.translucencyByDistance
  384. );
  385. this.pixelOffsetScaleByDistance = defaultValue(
  386. this.pixelOffsetScaleByDistance,
  387. source.pixelOffsetScaleByDistance
  388. );
  389. this.scaleByDistance = defaultValue(
  390. this.scaleByDistance,
  391. source.scaleByDistance
  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 LabelGraphics;