LabelGraphics.js 19 KB

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