Label.js 49 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588
  1. import BoundingRectangle from "../Core/BoundingRectangle.js";
  2. import Cartesian2 from "../Core/Cartesian2.js";
  3. import Cartesian3 from "../Core/Cartesian3.js";
  4. import Color from "../Core/Color.js";
  5. import defaultValue from "../Core/defaultValue.js";
  6. import defined from "../Core/defined.js";
  7. import DeveloperError from "../Core/DeveloperError.js";
  8. import DistanceDisplayCondition from "../Core/DistanceDisplayCondition.js";
  9. import NearFarScalar from "../Core/NearFarScalar.js";
  10. import Billboard from "./Billboard.js";
  11. import HeightReference from "./HeightReference.js";
  12. import HorizontalOrigin from "./HorizontalOrigin.js";
  13. import LabelStyle from "./LabelStyle.js";
  14. import SDFSettings from "./SDFSettings.js";
  15. import VerticalOrigin from "./VerticalOrigin.js";
  16. const fontInfoCache = {};
  17. let fontInfoCacheLength = 0;
  18. const fontInfoCacheMaxSize = 256;
  19. const defaultBackgroundColor = new Color(0.165, 0.165, 0.165, 0.8);
  20. const defaultBackgroundPadding = new Cartesian2(7, 5);
  21. const textTypes = Object.freeze({
  22. LTR: 0,
  23. RTL: 1,
  24. WEAK: 2,
  25. BRACKETS: 3,
  26. });
  27. function rebindAllGlyphs(label) {
  28. if (!label._rebindAllGlyphs && !label._repositionAllGlyphs) {
  29. // only push label if it's not already been marked dirty
  30. label._labelCollection._labelsToUpdate.push(label);
  31. }
  32. label._rebindAllGlyphs = true;
  33. }
  34. function repositionAllGlyphs(label) {
  35. if (!label._rebindAllGlyphs && !label._repositionAllGlyphs) {
  36. // only push label if it's not already been marked dirty
  37. label._labelCollection._labelsToUpdate.push(label);
  38. }
  39. label._repositionAllGlyphs = true;
  40. }
  41. function getCSSValue(element, property) {
  42. return document.defaultView
  43. .getComputedStyle(element, null)
  44. .getPropertyValue(property);
  45. }
  46. function parseFont(label) {
  47. let fontInfo = fontInfoCache[label._font];
  48. if (!defined(fontInfo)) {
  49. const div = document.createElement("div");
  50. div.style.position = "absolute";
  51. div.style.opacity = 0;
  52. div.style.font = label._font;
  53. document.body.appendChild(div);
  54. let lineHeight = parseFloat(getCSSValue(div, "line-height"));
  55. if (isNaN(lineHeight)) {
  56. // line-height isn't a number, i.e. 'normal'; apply default line-spacing
  57. lineHeight = undefined;
  58. }
  59. fontInfo = {
  60. family: getCSSValue(div, "font-family"),
  61. size: getCSSValue(div, "font-size").replace("px", ""),
  62. style: getCSSValue(div, "font-style"),
  63. weight: getCSSValue(div, "font-weight"),
  64. lineHeight: lineHeight,
  65. };
  66. document.body.removeChild(div);
  67. if (fontInfoCacheLength < fontInfoCacheMaxSize) {
  68. fontInfoCache[label._font] = fontInfo;
  69. fontInfoCacheLength++;
  70. }
  71. }
  72. label._fontFamily = fontInfo.family;
  73. label._fontSize = fontInfo.size;
  74. label._fontStyle = fontInfo.style;
  75. label._fontWeight = fontInfo.weight;
  76. label._lineHeight = fontInfo.lineHeight;
  77. }
  78. /**
  79. * <div class="notice">
  80. * Create labels by calling {@link LabelCollection#add}. Do not call the constructor directly.
  81. * </div>
  82. *
  83. * @alias Label
  84. * @internalConstructor
  85. * @class
  86. *
  87. * @exception {DeveloperError} translucencyByDistance.far must be greater than translucencyByDistance.near
  88. * @exception {DeveloperError} pixelOffsetScaleByDistance.far must be greater than pixelOffsetScaleByDistance.near
  89. * @exception {DeveloperError} distanceDisplayCondition.far must be greater than distanceDisplayCondition.near
  90. *
  91. * @see LabelCollection
  92. * @see LabelCollection#add
  93. *
  94. * @demo {@link https://sandcastle.cesium.com/index.html?src=Labels.html|Cesium Sandcastle Labels Demo}
  95. */
  96. function Label(options, labelCollection) {
  97. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  98. //>>includeStart('debug', pragmas.debug);
  99. if (
  100. defined(options.disableDepthTestDistance) &&
  101. options.disableDepthTestDistance < 0.0
  102. ) {
  103. throw new DeveloperError(
  104. "disableDepthTestDistance must be greater than 0.0."
  105. );
  106. }
  107. //>>includeEnd('debug');
  108. let translucencyByDistance = options.translucencyByDistance;
  109. let pixelOffsetScaleByDistance = options.pixelOffsetScaleByDistance;
  110. let scaleByDistance = options.scaleByDistance;
  111. let distanceDisplayCondition = options.distanceDisplayCondition;
  112. if (defined(translucencyByDistance)) {
  113. //>>includeStart('debug', pragmas.debug);
  114. if (translucencyByDistance.far <= translucencyByDistance.near) {
  115. throw new DeveloperError(
  116. "translucencyByDistance.far must be greater than translucencyByDistance.near."
  117. );
  118. }
  119. //>>includeEnd('debug');
  120. translucencyByDistance = NearFarScalar.clone(translucencyByDistance);
  121. }
  122. if (defined(pixelOffsetScaleByDistance)) {
  123. //>>includeStart('debug', pragmas.debug);
  124. if (pixelOffsetScaleByDistance.far <= pixelOffsetScaleByDistance.near) {
  125. throw new DeveloperError(
  126. "pixelOffsetScaleByDistance.far must be greater than pixelOffsetScaleByDistance.near."
  127. );
  128. }
  129. //>>includeEnd('debug');
  130. pixelOffsetScaleByDistance = NearFarScalar.clone(
  131. pixelOffsetScaleByDistance
  132. );
  133. }
  134. if (defined(scaleByDistance)) {
  135. //>>includeStart('debug', pragmas.debug);
  136. if (scaleByDistance.far <= scaleByDistance.near) {
  137. throw new DeveloperError(
  138. "scaleByDistance.far must be greater than scaleByDistance.near."
  139. );
  140. }
  141. //>>includeEnd('debug');
  142. scaleByDistance = NearFarScalar.clone(scaleByDistance);
  143. }
  144. if (defined(distanceDisplayCondition)) {
  145. //>>includeStart('debug', pragmas.debug);
  146. if (distanceDisplayCondition.far <= distanceDisplayCondition.near) {
  147. throw new DeveloperError(
  148. "distanceDisplayCondition.far must be greater than distanceDisplayCondition.near."
  149. );
  150. }
  151. //>>includeEnd('debug');
  152. distanceDisplayCondition = DistanceDisplayCondition.clone(
  153. distanceDisplayCondition
  154. );
  155. }
  156. this._renderedText = undefined;
  157. this._text = undefined;
  158. this._show = defaultValue(options.show, true);
  159. this._font = defaultValue(options.font, "30px sans-serif");
  160. this._fillColor = Color.clone(defaultValue(options.fillColor, Color.WHITE));
  161. this._outlineColor = Color.clone(
  162. defaultValue(options.outlineColor, Color.BLACK)
  163. );
  164. this._outlineWidth = defaultValue(options.outlineWidth, 1.0);
  165. this._showBackground = defaultValue(options.showBackground, false);
  166. this._backgroundColor = Color.clone(
  167. defaultValue(options.backgroundColor, defaultBackgroundColor)
  168. );
  169. this._backgroundPadding = Cartesian2.clone(
  170. defaultValue(options.backgroundPadding, defaultBackgroundPadding)
  171. );
  172. this._style = defaultValue(options.style, LabelStyle.FILL);
  173. this._verticalOrigin = defaultValue(
  174. options.verticalOrigin,
  175. VerticalOrigin.BASELINE
  176. );
  177. this._horizontalOrigin = defaultValue(
  178. options.horizontalOrigin,
  179. HorizontalOrigin.LEFT
  180. );
  181. this._pixelOffset = Cartesian2.clone(
  182. defaultValue(options.pixelOffset, Cartesian2.ZERO)
  183. );
  184. this._eyeOffset = Cartesian3.clone(
  185. defaultValue(options.eyeOffset, Cartesian3.ZERO)
  186. );
  187. this._position = Cartesian3.clone(
  188. defaultValue(options.position, Cartesian3.ZERO)
  189. );
  190. this._scale = defaultValue(options.scale, 1.0);
  191. this._id = options.id;
  192. this._translucencyByDistance = translucencyByDistance;
  193. this._pixelOffsetScaleByDistance = pixelOffsetScaleByDistance;
  194. this._scaleByDistance = scaleByDistance;
  195. this._heightReference = defaultValue(
  196. options.heightReference,
  197. HeightReference.NONE
  198. );
  199. this._distanceDisplayCondition = distanceDisplayCondition;
  200. this._disableDepthTestDistance = options.disableDepthTestDistance;
  201. this._labelCollection = labelCollection;
  202. this._glyphs = [];
  203. this._backgroundBillboard = undefined;
  204. this._batchIndex = undefined; // Used only by Vector3DTilePoints and BillboardCollection
  205. this._rebindAllGlyphs = true;
  206. this._repositionAllGlyphs = true;
  207. this._actualClampedPosition = undefined;
  208. this._removeCallbackFunc = undefined;
  209. this._mode = undefined;
  210. this._clusterShow = true;
  211. this.text = defaultValue(options.text, "");
  212. this._relativeSize = 1.0;
  213. parseFont(this);
  214. this._updateClamping();
  215. }
  216. Object.defineProperties(Label.prototype, {
  217. /**
  218. * Determines if this label will be shown. Use this to hide or show a label, instead
  219. * of removing it and re-adding it to the collection.
  220. * @memberof Label.prototype
  221. * @type {boolean}
  222. * @default true
  223. */
  224. show: {
  225. get: function () {
  226. return this._show;
  227. },
  228. set: function (value) {
  229. //>>includeStart('debug', pragmas.debug);
  230. if (!defined(value)) {
  231. throw new DeveloperError("value is required.");
  232. }
  233. //>>includeEnd('debug');
  234. if (this._show !== value) {
  235. this._show = value;
  236. const glyphs = this._glyphs;
  237. for (let i = 0, len = glyphs.length; i < len; i++) {
  238. const billboard = glyphs[i].billboard;
  239. if (defined(billboard)) {
  240. billboard.show = value;
  241. }
  242. }
  243. const backgroundBillboard = this._backgroundBillboard;
  244. if (defined(backgroundBillboard)) {
  245. backgroundBillboard.show = value;
  246. }
  247. }
  248. },
  249. },
  250. /**
  251. * Gets or sets the Cartesian position of this label.
  252. * @memberof Label.prototype
  253. * @type {Cartesian3}
  254. */
  255. position: {
  256. get: function () {
  257. return this._position;
  258. },
  259. set: function (value) {
  260. //>>includeStart('debug', pragmas.debug);
  261. if (!defined(value)) {
  262. throw new DeveloperError("value is required.");
  263. }
  264. //>>includeEnd('debug');
  265. const position = this._position;
  266. if (!Cartesian3.equals(position, value)) {
  267. Cartesian3.clone(value, position);
  268. const glyphs = this._glyphs;
  269. for (let i = 0, len = glyphs.length; i < len; i++) {
  270. const billboard = glyphs[i].billboard;
  271. if (defined(billboard)) {
  272. billboard.position = value;
  273. }
  274. }
  275. const backgroundBillboard = this._backgroundBillboard;
  276. if (defined(backgroundBillboard)) {
  277. backgroundBillboard.position = value;
  278. }
  279. this._updateClamping();
  280. }
  281. },
  282. },
  283. /**
  284. * Gets or sets the height reference of this billboard.
  285. * @memberof Label.prototype
  286. * @type {HeightReference}
  287. * @default HeightReference.NONE
  288. */
  289. heightReference: {
  290. get: function () {
  291. return this._heightReference;
  292. },
  293. set: function (value) {
  294. //>>includeStart('debug', pragmas.debug);
  295. if (!defined(value)) {
  296. throw new DeveloperError("value is required.");
  297. }
  298. //>>includeEnd('debug');
  299. if (value !== this._heightReference) {
  300. this._heightReference = value;
  301. const glyphs = this._glyphs;
  302. for (let i = 0, len = glyphs.length; i < len; i++) {
  303. const billboard = glyphs[i].billboard;
  304. if (defined(billboard)) {
  305. billboard.heightReference = value;
  306. }
  307. }
  308. const backgroundBillboard = this._backgroundBillboard;
  309. if (defined(backgroundBillboard)) {
  310. backgroundBillboard.heightReference = value;
  311. }
  312. repositionAllGlyphs(this);
  313. this._updateClamping();
  314. }
  315. },
  316. },
  317. /**
  318. * Gets or sets the text of this label.
  319. * @memberof Label.prototype
  320. * @type {string}
  321. */
  322. text: {
  323. get: function () {
  324. return this._text;
  325. },
  326. set: function (value) {
  327. //>>includeStart('debug', pragmas.debug);
  328. if (!defined(value)) {
  329. throw new DeveloperError("value is required.");
  330. }
  331. //>>includeEnd('debug');
  332. if (this._text !== value) {
  333. this._text = value;
  334. // Strip soft-hyphen (auto-wrap) characters from input string
  335. const renderedValue = value.replace(/\u00ad/g, "");
  336. this._renderedText = Label.enableRightToLeftDetection
  337. ? reverseRtl(renderedValue)
  338. : renderedValue;
  339. rebindAllGlyphs(this);
  340. }
  341. },
  342. },
  343. /**
  344. * Gets or sets the font used to draw this label. Fonts are specified using the same syntax as the CSS 'font' property.
  345. * @memberof Label.prototype
  346. * @type {string}
  347. * @default '30px sans-serif'
  348. * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text-styles|HTML canvas 2D context text styles}
  349. */
  350. font: {
  351. get: function () {
  352. return this._font;
  353. },
  354. set: function (value) {
  355. //>>includeStart('debug', pragmas.debug);
  356. if (!defined(value)) {
  357. throw new DeveloperError("value is required.");
  358. }
  359. //>>includeEnd('debug');
  360. if (this._font !== value) {
  361. this._font = value;
  362. rebindAllGlyphs(this);
  363. parseFont(this);
  364. }
  365. },
  366. },
  367. /**
  368. * Gets or sets the fill color of this label.
  369. * @memberof Label.prototype
  370. * @type {Color}
  371. * @default Color.WHITE
  372. * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#fill-and-stroke-styles|HTML canvas 2D context fill and stroke styles}
  373. */
  374. fillColor: {
  375. get: function () {
  376. return this._fillColor;
  377. },
  378. set: function (value) {
  379. //>>includeStart('debug', pragmas.debug);
  380. if (!defined(value)) {
  381. throw new DeveloperError("value is required.");
  382. }
  383. //>>includeEnd('debug');
  384. const fillColor = this._fillColor;
  385. if (!Color.equals(fillColor, value)) {
  386. Color.clone(value, fillColor);
  387. rebindAllGlyphs(this);
  388. }
  389. },
  390. },
  391. /**
  392. * Gets or sets the outline color of this label.
  393. * @memberof Label.prototype
  394. * @type {Color}
  395. * @default Color.BLACK
  396. * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#fill-and-stroke-styles|HTML canvas 2D context fill and stroke styles}
  397. */
  398. outlineColor: {
  399. get: function () {
  400. return this._outlineColor;
  401. },
  402. set: function (value) {
  403. //>>includeStart('debug', pragmas.debug);
  404. if (!defined(value)) {
  405. throw new DeveloperError("value is required.");
  406. }
  407. //>>includeEnd('debug');
  408. const outlineColor = this._outlineColor;
  409. if (!Color.equals(outlineColor, value)) {
  410. Color.clone(value, outlineColor);
  411. rebindAllGlyphs(this);
  412. }
  413. },
  414. },
  415. /**
  416. * Gets or sets the outline width of this label.
  417. * @memberof Label.prototype
  418. * @type {number}
  419. * @default 1.0
  420. * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#fill-and-stroke-styles|HTML canvas 2D context fill and stroke styles}
  421. */
  422. outlineWidth: {
  423. get: function () {
  424. return this._outlineWidth;
  425. },
  426. set: function (value) {
  427. //>>includeStart('debug', pragmas.debug);
  428. if (!defined(value)) {
  429. throw new DeveloperError("value is required.");
  430. }
  431. //>>includeEnd('debug');
  432. if (this._outlineWidth !== value) {
  433. this._outlineWidth = value;
  434. rebindAllGlyphs(this);
  435. }
  436. },
  437. },
  438. /**
  439. * Determines if a background behind this label will be shown.
  440. * @memberof Label.prototype
  441. * @default false
  442. * @type {boolean}
  443. */
  444. showBackground: {
  445. get: function () {
  446. return this._showBackground;
  447. },
  448. set: function (value) {
  449. //>>includeStart('debug', pragmas.debug);
  450. if (!defined(value)) {
  451. throw new DeveloperError("value is required.");
  452. }
  453. //>>includeEnd('debug');
  454. if (this._showBackground !== value) {
  455. this._showBackground = value;
  456. rebindAllGlyphs(this);
  457. }
  458. },
  459. },
  460. /**
  461. * Gets or sets the background color of this label.
  462. * @memberof Label.prototype
  463. * @type {Color}
  464. * @default new Color(0.165, 0.165, 0.165, 0.8)
  465. */
  466. backgroundColor: {
  467. get: function () {
  468. return this._backgroundColor;
  469. },
  470. set: function (value) {
  471. //>>includeStart('debug', pragmas.debug);
  472. if (!defined(value)) {
  473. throw new DeveloperError("value is required.");
  474. }
  475. //>>includeEnd('debug');
  476. const backgroundColor = this._backgroundColor;
  477. if (!Color.equals(backgroundColor, value)) {
  478. Color.clone(value, backgroundColor);
  479. const backgroundBillboard = this._backgroundBillboard;
  480. if (defined(backgroundBillboard)) {
  481. backgroundBillboard.color = backgroundColor;
  482. }
  483. }
  484. },
  485. },
  486. /**
  487. * Gets or sets the background padding, in pixels, of this label. The <code>x</code> value
  488. * controls horizontal padding, and the <code>y</code> value controls vertical padding.
  489. * @memberof Label.prototype
  490. * @type {Cartesian2}
  491. * @default new Cartesian2(7, 5)
  492. */
  493. backgroundPadding: {
  494. get: function () {
  495. return this._backgroundPadding;
  496. },
  497. set: function (value) {
  498. //>>includeStart('debug', pragmas.debug);
  499. if (!defined(value)) {
  500. throw new DeveloperError("value is required.");
  501. }
  502. //>>includeEnd('debug');
  503. const backgroundPadding = this._backgroundPadding;
  504. if (!Cartesian2.equals(backgroundPadding, value)) {
  505. Cartesian2.clone(value, backgroundPadding);
  506. repositionAllGlyphs(this);
  507. }
  508. },
  509. },
  510. /**
  511. * Gets or sets the style of this label.
  512. * @memberof Label.prototype
  513. * @type {LabelStyle}
  514. * @default LabelStyle.FILL
  515. */
  516. style: {
  517. get: function () {
  518. return this._style;
  519. },
  520. set: function (value) {
  521. //>>includeStart('debug', pragmas.debug);
  522. if (!defined(value)) {
  523. throw new DeveloperError("value is required.");
  524. }
  525. //>>includeEnd('debug');
  526. if (this._style !== value) {
  527. this._style = value;
  528. rebindAllGlyphs(this);
  529. }
  530. },
  531. },
  532. /**
  533. * Gets or sets the pixel offset in screen space from the origin of this label. This is commonly used
  534. * to align multiple labels and billboards at the same position, e.g., an image and text. The
  535. * screen space origin is the top, left corner of the canvas; <code>x</code> increases from
  536. * left to right, and <code>y</code> increases from top to bottom.
  537. * <br /><br />
  538. * <div align='center'>
  539. * <table border='0' cellpadding='5'><tr>
  540. * <td align='center'><code>default</code><br/><img src='Images/Label.setPixelOffset.default.png' width='250' height='188' /></td>
  541. * <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>
  542. * </tr></table>
  543. * The label's origin is indicated by the yellow point.
  544. * </div>
  545. * @memberof Label.prototype
  546. * @type {Cartesian2}
  547. * @default Cartesian2.ZERO
  548. */
  549. pixelOffset: {
  550. get: function () {
  551. return this._pixelOffset;
  552. },
  553. set: function (value) {
  554. //>>includeStart('debug', pragmas.debug);
  555. if (!defined(value)) {
  556. throw new DeveloperError("value is required.");
  557. }
  558. //>>includeEnd('debug');
  559. const pixelOffset = this._pixelOffset;
  560. if (!Cartesian2.equals(pixelOffset, value)) {
  561. Cartesian2.clone(value, pixelOffset);
  562. const glyphs = this._glyphs;
  563. for (let i = 0, len = glyphs.length; i < len; i++) {
  564. const glyph = glyphs[i];
  565. if (defined(glyph.billboard)) {
  566. glyph.billboard.pixelOffset = value;
  567. }
  568. }
  569. const backgroundBillboard = this._backgroundBillboard;
  570. if (defined(backgroundBillboard)) {
  571. backgroundBillboard.pixelOffset = value;
  572. }
  573. }
  574. },
  575. },
  576. /**
  577. * Gets or sets near and far translucency properties of a Label based on the Label's distance from the camera.
  578. * A label's translucency will interpolate between the {@link NearFarScalar#nearValue} and
  579. * {@link NearFarScalar#farValue} while the camera distance falls within the lower and upper bounds
  580. * of the specified {@link NearFarScalar#near} and {@link NearFarScalar#far}.
  581. * Outside of these ranges the label's translucency remains clamped to the nearest bound. If undefined,
  582. * translucencyByDistance will be disabled.
  583. * @memberof Label.prototype
  584. * @type {NearFarScalar}
  585. *
  586. * @example
  587. * // Example 1.
  588. * // Set a label's translucencyByDistance to 1.0 when the
  589. * // camera is 1500 meters from the label and disappear as
  590. * // the camera distance approaches 8.0e6 meters.
  591. * text.translucencyByDistance = new Cesium.NearFarScalar(1.5e2, 1.0, 8.0e6, 0.0);
  592. *
  593. * @example
  594. * // Example 2.
  595. * // disable translucency by distance
  596. * text.translucencyByDistance = undefined;
  597. */
  598. translucencyByDistance: {
  599. get: function () {
  600. return this._translucencyByDistance;
  601. },
  602. set: function (value) {
  603. //>>includeStart('debug', pragmas.debug);
  604. if (defined(value) && value.far <= value.near) {
  605. throw new DeveloperError(
  606. "far distance must be greater than near distance."
  607. );
  608. }
  609. //>>includeEnd('debug');
  610. const translucencyByDistance = this._translucencyByDistance;
  611. if (!NearFarScalar.equals(translucencyByDistance, value)) {
  612. this._translucencyByDistance = NearFarScalar.clone(
  613. value,
  614. translucencyByDistance
  615. );
  616. const glyphs = this._glyphs;
  617. for (let i = 0, len = glyphs.length; i < len; i++) {
  618. const glyph = glyphs[i];
  619. if (defined(glyph.billboard)) {
  620. glyph.billboard.translucencyByDistance = value;
  621. }
  622. }
  623. const backgroundBillboard = this._backgroundBillboard;
  624. if (defined(backgroundBillboard)) {
  625. backgroundBillboard.translucencyByDistance = value;
  626. }
  627. }
  628. },
  629. },
  630. /**
  631. * Gets or sets near and far pixel offset scaling properties of a Label based on the Label's distance from the camera.
  632. * A label's pixel offset will be scaled between the {@link NearFarScalar#nearValue} and
  633. * {@link NearFarScalar#farValue} while the camera distance falls within the lower and upper bounds
  634. * of the specified {@link NearFarScalar#near} and {@link NearFarScalar#far}.
  635. * Outside of these ranges the label's pixel offset scaling remains clamped to the nearest bound. If undefined,
  636. * pixelOffsetScaleByDistance will be disabled.
  637. * @memberof Label.prototype
  638. * @type {NearFarScalar}
  639. *
  640. * @example
  641. * // Example 1.
  642. * // Set a label's pixel offset scale to 0.0 when the
  643. * // camera is 1500 meters from the label and scale pixel offset to 10.0 pixels
  644. * // in the y direction the camera distance approaches 8.0e6 meters.
  645. * text.pixelOffset = new Cesium.Cartesian2(0.0, 1.0);
  646. * text.pixelOffsetScaleByDistance = new Cesium.NearFarScalar(1.5e2, 0.0, 8.0e6, 10.0);
  647. *
  648. * @example
  649. * // Example 2.
  650. * // disable pixel offset by distance
  651. * text.pixelOffsetScaleByDistance = undefined;
  652. */
  653. pixelOffsetScaleByDistance: {
  654. get: function () {
  655. return this._pixelOffsetScaleByDistance;
  656. },
  657. set: function (value) {
  658. //>>includeStart('debug', pragmas.debug);
  659. if (defined(value) && value.far <= value.near) {
  660. throw new DeveloperError(
  661. "far distance must be greater than near distance."
  662. );
  663. }
  664. //>>includeEnd('debug');
  665. const pixelOffsetScaleByDistance = this._pixelOffsetScaleByDistance;
  666. if (!NearFarScalar.equals(pixelOffsetScaleByDistance, value)) {
  667. this._pixelOffsetScaleByDistance = NearFarScalar.clone(
  668. value,
  669. pixelOffsetScaleByDistance
  670. );
  671. const glyphs = this._glyphs;
  672. for (let i = 0, len = glyphs.length; i < len; i++) {
  673. const glyph = glyphs[i];
  674. if (defined(glyph.billboard)) {
  675. glyph.billboard.pixelOffsetScaleByDistance = value;
  676. }
  677. }
  678. const backgroundBillboard = this._backgroundBillboard;
  679. if (defined(backgroundBillboard)) {
  680. backgroundBillboard.pixelOffsetScaleByDistance = value;
  681. }
  682. }
  683. },
  684. },
  685. /**
  686. * Gets or sets near and far scaling properties of a Label based on the label's distance from the camera.
  687. * A label's scale will interpolate between the {@link NearFarScalar#nearValue} and
  688. * {@link NearFarScalar#farValue} while the camera distance falls within the lower and upper bounds
  689. * of the specified {@link NearFarScalar#near} and {@link NearFarScalar#far}.
  690. * Outside of these ranges the label's scale remains clamped to the nearest bound. If undefined,
  691. * scaleByDistance will be disabled.
  692. * @memberof Label.prototype
  693. * @type {NearFarScalar}
  694. *
  695. * @example
  696. * // Example 1.
  697. * // Set a label's scaleByDistance to scale by 1.5 when the
  698. * // camera is 1500 meters from the label and disappear as
  699. * // the camera distance approaches 8.0e6 meters.
  700. * label.scaleByDistance = new Cesium.NearFarScalar(1.5e2, 1.5, 8.0e6, 0.0);
  701. *
  702. * @example
  703. * // Example 2.
  704. * // disable scaling by distance
  705. * label.scaleByDistance = undefined;
  706. */
  707. scaleByDistance: {
  708. get: function () {
  709. return this._scaleByDistance;
  710. },
  711. set: function (value) {
  712. //>>includeStart('debug', pragmas.debug);
  713. if (defined(value) && value.far <= value.near) {
  714. throw new DeveloperError(
  715. "far distance must be greater than near distance."
  716. );
  717. }
  718. //>>includeEnd('debug');
  719. const scaleByDistance = this._scaleByDistance;
  720. if (!NearFarScalar.equals(scaleByDistance, value)) {
  721. this._scaleByDistance = NearFarScalar.clone(value, scaleByDistance);
  722. const glyphs = this._glyphs;
  723. for (let i = 0, len = glyphs.length; i < len; i++) {
  724. const glyph = glyphs[i];
  725. if (defined(glyph.billboard)) {
  726. glyph.billboard.scaleByDistance = value;
  727. }
  728. }
  729. const backgroundBillboard = this._backgroundBillboard;
  730. if (defined(backgroundBillboard)) {
  731. backgroundBillboard.scaleByDistance = value;
  732. }
  733. }
  734. },
  735. },
  736. /**
  737. * Gets and sets the 3D Cartesian offset applied to this label in eye coordinates. Eye coordinates is a left-handed
  738. * coordinate system, where <code>x</code> points towards the viewer's right, <code>y</code> points up, and
  739. * <code>z</code> points into the screen. Eye coordinates use the same scale as world and model coordinates,
  740. * which is typically meters.
  741. * <br /><br />
  742. * An eye offset is commonly used to arrange multiple label or objects at the same position, e.g., to
  743. * arrange a label above its corresponding 3D model.
  744. * <br /><br />
  745. * Below, the label is positioned at the center of the Earth but an eye offset makes it always
  746. * appear on top of the Earth regardless of the viewer's or Earth's orientation.
  747. * <br /><br />
  748. * <div align='center'>
  749. * <table border='0' cellpadding='5'><tr>
  750. * <td align='center'><img src='Images/Billboard.setEyeOffset.one.png' width='250' height='188' /></td>
  751. * <td align='center'><img src='Images/Billboard.setEyeOffset.two.png' width='250' height='188' /></td>
  752. * </tr></table>
  753. * <code>l.eyeOffset = new Cartesian3(0.0, 8000000.0, 0.0);</code><br /><br />
  754. * </div>
  755. * @memberof Label.prototype
  756. * @type {Cartesian3}
  757. * @default Cartesian3.ZERO
  758. */
  759. eyeOffset: {
  760. get: function () {
  761. return this._eyeOffset;
  762. },
  763. set: function (value) {
  764. //>>includeStart('debug', pragmas.debug);
  765. if (!defined(value)) {
  766. throw new DeveloperError("value is required.");
  767. }
  768. //>>includeEnd('debug');
  769. const eyeOffset = this._eyeOffset;
  770. if (!Cartesian3.equals(eyeOffset, value)) {
  771. Cartesian3.clone(value, eyeOffset);
  772. const glyphs = this._glyphs;
  773. for (let i = 0, len = glyphs.length; i < len; i++) {
  774. const glyph = glyphs[i];
  775. if (defined(glyph.billboard)) {
  776. glyph.billboard.eyeOffset = value;
  777. }
  778. }
  779. const backgroundBillboard = this._backgroundBillboard;
  780. if (defined(backgroundBillboard)) {
  781. backgroundBillboard.eyeOffset = value;
  782. }
  783. }
  784. },
  785. },
  786. /**
  787. * Gets or sets the horizontal origin of this label, which determines if the label is drawn
  788. * to the left, center, or right of its anchor position.
  789. * <br /><br />
  790. * <div align='center'>
  791. * <img src='Images/Billboard.setHorizontalOrigin.png' width='648' height='196' /><br />
  792. * </div>
  793. * @memberof Label.prototype
  794. * @type {HorizontalOrigin}
  795. * @default HorizontalOrigin.LEFT
  796. * @example
  797. * // Use a top, right origin
  798. * l.horizontalOrigin = Cesium.HorizontalOrigin.RIGHT;
  799. * l.verticalOrigin = Cesium.VerticalOrigin.TOP;
  800. */
  801. horizontalOrigin: {
  802. get: function () {
  803. return this._horizontalOrigin;
  804. },
  805. set: function (value) {
  806. //>>includeStart('debug', pragmas.debug);
  807. if (!defined(value)) {
  808. throw new DeveloperError("value is required.");
  809. }
  810. //>>includeEnd('debug');
  811. if (this._horizontalOrigin !== value) {
  812. this._horizontalOrigin = value;
  813. repositionAllGlyphs(this);
  814. }
  815. },
  816. },
  817. /**
  818. * Gets or sets the vertical origin of this label, which determines if the label is
  819. * to the above, below, or at the center of its anchor position.
  820. * <br /><br />
  821. * <div align='center'>
  822. * <img src='Images/Billboard.setVerticalOrigin.png' width='695' height='175' /><br />
  823. * </div>
  824. * @memberof Label.prototype
  825. * @type {VerticalOrigin}
  826. * @default VerticalOrigin.BASELINE
  827. * @example
  828. * // Use a top, right origin
  829. * l.horizontalOrigin = Cesium.HorizontalOrigin.RIGHT;
  830. * l.verticalOrigin = Cesium.VerticalOrigin.TOP;
  831. */
  832. verticalOrigin: {
  833. get: function () {
  834. return this._verticalOrigin;
  835. },
  836. set: function (value) {
  837. //>>includeStart('debug', pragmas.debug);
  838. if (!defined(value)) {
  839. throw new DeveloperError("value is required.");
  840. }
  841. //>>includeEnd('debug');
  842. if (this._verticalOrigin !== value) {
  843. this._verticalOrigin = value;
  844. const glyphs = this._glyphs;
  845. for (let i = 0, len = glyphs.length; i < len; i++) {
  846. const glyph = glyphs[i];
  847. if (defined(glyph.billboard)) {
  848. glyph.billboard.verticalOrigin = value;
  849. }
  850. }
  851. const backgroundBillboard = this._backgroundBillboard;
  852. if (defined(backgroundBillboard)) {
  853. backgroundBillboard.verticalOrigin = value;
  854. }
  855. repositionAllGlyphs(this);
  856. }
  857. },
  858. },
  859. /**
  860. * Gets or sets the uniform scale that is multiplied with the label's size in pixels.
  861. * A scale of <code>1.0</code> does not change the size of the label; a scale greater than
  862. * <code>1.0</code> enlarges the label; a positive scale less than <code>1.0</code> shrinks
  863. * the label.
  864. * <br /><br />
  865. * Applying a large scale value may pixelate the label. To make text larger without pixelation,
  866. * use a larger font size when calling {@link Label#font} instead.
  867. * <br /><br />
  868. * <div align='center'>
  869. * <img src='Images/Label.setScale.png' width='400' height='300' /><br/>
  870. * From left to right in the above image, the scales are <code>0.5</code>, <code>1.0</code>,
  871. * and <code>2.0</code>.
  872. * </div>
  873. * @memberof Label.prototype
  874. * @type {number}
  875. * @default 1.0
  876. */
  877. scale: {
  878. get: function () {
  879. return this._scale;
  880. },
  881. set: function (value) {
  882. //>>includeStart('debug', pragmas.debug);
  883. if (!defined(value)) {
  884. throw new DeveloperError("value is required.");
  885. }
  886. //>>includeEnd('debug');
  887. if (this._scale !== value) {
  888. this._scale = value;
  889. const glyphs = this._glyphs;
  890. for (let i = 0, len = glyphs.length; i < len; i++) {
  891. const glyph = glyphs[i];
  892. if (defined(glyph.billboard)) {
  893. glyph.billboard.scale = value * this._relativeSize;
  894. }
  895. }
  896. const backgroundBillboard = this._backgroundBillboard;
  897. if (defined(backgroundBillboard)) {
  898. backgroundBillboard.scale = value * this._relativeSize;
  899. }
  900. repositionAllGlyphs(this);
  901. }
  902. },
  903. },
  904. /**
  905. * Gets the total scale of the label, which is the label's scale multiplied by the computed relative size
  906. * of the desired font compared to the generated glyph size.
  907. * @memberof Label.prototype
  908. * @type {number}
  909. * @default 1.0
  910. */
  911. totalScale: {
  912. get: function () {
  913. return this._scale * this._relativeSize;
  914. },
  915. },
  916. /**
  917. * Gets or sets the condition specifying at what distance from the camera that this label will be displayed.
  918. * @memberof Label.prototype
  919. * @type {DistanceDisplayCondition}
  920. * @default undefined
  921. */
  922. distanceDisplayCondition: {
  923. get: function () {
  924. return this._distanceDisplayCondition;
  925. },
  926. set: function (value) {
  927. //>>includeStart('debug', pragmas.debug);
  928. if (defined(value) && value.far <= value.near) {
  929. throw new DeveloperError("far must be greater than near");
  930. }
  931. //>>includeEnd('debug');
  932. if (
  933. !DistanceDisplayCondition.equals(value, this._distanceDisplayCondition)
  934. ) {
  935. this._distanceDisplayCondition = DistanceDisplayCondition.clone(
  936. value,
  937. this._distanceDisplayCondition
  938. );
  939. const glyphs = this._glyphs;
  940. for (let i = 0, len = glyphs.length; i < len; i++) {
  941. const glyph = glyphs[i];
  942. if (defined(glyph.billboard)) {
  943. glyph.billboard.distanceDisplayCondition = value;
  944. }
  945. }
  946. const backgroundBillboard = this._backgroundBillboard;
  947. if (defined(backgroundBillboard)) {
  948. backgroundBillboard.distanceDisplayCondition = value;
  949. }
  950. }
  951. },
  952. },
  953. /**
  954. * Gets or sets the distance from the camera at which to disable the depth test to, for example, prevent clipping against terrain.
  955. * When set to zero, the depth test is always applied. When set to Number.POSITIVE_INFINITY, the depth test is never applied.
  956. * @memberof Label.prototype
  957. * @type {number}
  958. */
  959. disableDepthTestDistance: {
  960. get: function () {
  961. return this._disableDepthTestDistance;
  962. },
  963. set: function (value) {
  964. if (this._disableDepthTestDistance !== value) {
  965. //>>includeStart('debug', pragmas.debug);
  966. if (defined(value) && value < 0.0) {
  967. throw new DeveloperError(
  968. "disableDepthTestDistance must be greater than 0.0."
  969. );
  970. }
  971. //>>includeEnd('debug');
  972. this._disableDepthTestDistance = value;
  973. const glyphs = this._glyphs;
  974. for (let i = 0, len = glyphs.length; i < len; i++) {
  975. const glyph = glyphs[i];
  976. if (defined(glyph.billboard)) {
  977. glyph.billboard.disableDepthTestDistance = value;
  978. }
  979. }
  980. const backgroundBillboard = this._backgroundBillboard;
  981. if (defined(backgroundBillboard)) {
  982. backgroundBillboard.disableDepthTestDistance = value;
  983. }
  984. }
  985. },
  986. },
  987. /**
  988. * Gets or sets the user-defined value returned when the label is picked.
  989. * @memberof Label.prototype
  990. * @type {*}
  991. */
  992. id: {
  993. get: function () {
  994. return this._id;
  995. },
  996. set: function (value) {
  997. if (this._id !== value) {
  998. this._id = value;
  999. const glyphs = this._glyphs;
  1000. for (let i = 0, len = glyphs.length; i < len; i++) {
  1001. const glyph = glyphs[i];
  1002. if (defined(glyph.billboard)) {
  1003. glyph.billboard.id = value;
  1004. }
  1005. }
  1006. const backgroundBillboard = this._backgroundBillboard;
  1007. if (defined(backgroundBillboard)) {
  1008. backgroundBillboard.id = value;
  1009. }
  1010. }
  1011. },
  1012. },
  1013. /**
  1014. * @private
  1015. */
  1016. pickId: {
  1017. get: function () {
  1018. if (this._glyphs.length === 0 || !defined(this._glyphs[0].billboard)) {
  1019. return undefined;
  1020. }
  1021. return this._glyphs[0].billboard.pickId;
  1022. },
  1023. },
  1024. /**
  1025. * Keeps track of the position of the label based on the height reference.
  1026. * @memberof Label.prototype
  1027. * @type {Cartesian3}
  1028. * @private
  1029. */
  1030. _clampedPosition: {
  1031. get: function () {
  1032. return this._actualClampedPosition;
  1033. },
  1034. set: function (value) {
  1035. this._actualClampedPosition = Cartesian3.clone(
  1036. value,
  1037. this._actualClampedPosition
  1038. );
  1039. const glyphs = this._glyphs;
  1040. for (let i = 0, len = glyphs.length; i < len; i++) {
  1041. const glyph = glyphs[i];
  1042. if (defined(glyph.billboard)) {
  1043. // Set all the private values here, because we already clamped to ground
  1044. // so we don't want to do it again for every glyph
  1045. glyph.billboard._clampedPosition = value;
  1046. }
  1047. }
  1048. const backgroundBillboard = this._backgroundBillboard;
  1049. if (defined(backgroundBillboard)) {
  1050. backgroundBillboard._clampedPosition = value;
  1051. }
  1052. },
  1053. },
  1054. /**
  1055. * Determines whether or not this label will be shown or hidden because it was clustered.
  1056. * @memberof Label.prototype
  1057. * @type {boolean}
  1058. * @default true
  1059. * @private
  1060. */
  1061. clusterShow: {
  1062. get: function () {
  1063. return this._clusterShow;
  1064. },
  1065. set: function (value) {
  1066. if (this._clusterShow !== value) {
  1067. this._clusterShow = value;
  1068. const glyphs = this._glyphs;
  1069. for (let i = 0, len = glyphs.length; i < len; i++) {
  1070. const glyph = glyphs[i];
  1071. if (defined(glyph.billboard)) {
  1072. glyph.billboard.clusterShow = value;
  1073. }
  1074. }
  1075. const backgroundBillboard = this._backgroundBillboard;
  1076. if (defined(backgroundBillboard)) {
  1077. backgroundBillboard.clusterShow = value;
  1078. }
  1079. }
  1080. },
  1081. },
  1082. });
  1083. Label.prototype._updateClamping = function () {
  1084. Billboard._updateClamping(this._labelCollection, this);
  1085. };
  1086. /**
  1087. * Computes the screen-space position of the label's origin, taking into account eye and pixel offsets.
  1088. * The screen space origin is the top, left corner of the canvas; <code>x</code> increases from
  1089. * left to right, and <code>y</code> increases from top to bottom.
  1090. *
  1091. * @param {Scene} scene The scene the label is in.
  1092. * @param {Cartesian2} [result] The object onto which to store the result.
  1093. * @returns {Cartesian2} The screen-space position of the label.
  1094. *
  1095. *
  1096. * @example
  1097. * console.log(l.computeScreenSpacePosition(scene).toString());
  1098. *
  1099. * @see Label#eyeOffset
  1100. * @see Label#pixelOffset
  1101. */
  1102. Label.prototype.computeScreenSpacePosition = function (scene, result) {
  1103. //>>includeStart('debug', pragmas.debug);
  1104. if (!defined(scene)) {
  1105. throw new DeveloperError("scene is required.");
  1106. }
  1107. //>>includeEnd('debug');
  1108. if (!defined(result)) {
  1109. result = new Cartesian2();
  1110. }
  1111. const labelCollection = this._labelCollection;
  1112. const modelMatrix = labelCollection.modelMatrix;
  1113. const actualPosition = defined(this._actualClampedPosition)
  1114. ? this._actualClampedPosition
  1115. : this._position;
  1116. const windowCoordinates = Billboard._computeScreenSpacePosition(
  1117. modelMatrix,
  1118. actualPosition,
  1119. this._eyeOffset,
  1120. this._pixelOffset,
  1121. scene,
  1122. result
  1123. );
  1124. return windowCoordinates;
  1125. };
  1126. /**
  1127. * Gets a label's screen space bounding box centered around screenSpacePosition.
  1128. * @param {Label} label The label to get the screen space bounding box for.
  1129. * @param {Cartesian2} screenSpacePosition The screen space center of the label.
  1130. * @param {BoundingRectangle} [result] The object onto which to store the result.
  1131. * @returns {BoundingRectangle} The screen space bounding box.
  1132. *
  1133. * @private
  1134. */
  1135. Label.getScreenSpaceBoundingBox = function (
  1136. label,
  1137. screenSpacePosition,
  1138. result
  1139. ) {
  1140. let x = 0;
  1141. let y = 0;
  1142. let width = 0;
  1143. let height = 0;
  1144. const scale = label.totalScale;
  1145. const backgroundBillboard = label._backgroundBillboard;
  1146. if (defined(backgroundBillboard)) {
  1147. x = screenSpacePosition.x + backgroundBillboard._translate.x;
  1148. y = screenSpacePosition.y - backgroundBillboard._translate.y;
  1149. width = backgroundBillboard.width * scale;
  1150. height = backgroundBillboard.height * scale;
  1151. if (
  1152. label.verticalOrigin === VerticalOrigin.BOTTOM ||
  1153. label.verticalOrigin === VerticalOrigin.BASELINE
  1154. ) {
  1155. y -= height;
  1156. } else if (label.verticalOrigin === VerticalOrigin.CENTER) {
  1157. y -= height * 0.5;
  1158. }
  1159. } else {
  1160. x = Number.POSITIVE_INFINITY;
  1161. y = Number.POSITIVE_INFINITY;
  1162. let maxX = 0;
  1163. let maxY = 0;
  1164. const glyphs = label._glyphs;
  1165. const length = glyphs.length;
  1166. for (let i = 0; i < length; ++i) {
  1167. const glyph = glyphs[i];
  1168. const billboard = glyph.billboard;
  1169. if (!defined(billboard)) {
  1170. continue;
  1171. }
  1172. const glyphX = screenSpacePosition.x + billboard._translate.x;
  1173. let glyphY = screenSpacePosition.y - billboard._translate.y;
  1174. const glyphWidth = glyph.dimensions.width * scale;
  1175. const glyphHeight = glyph.dimensions.height * scale;
  1176. if (
  1177. label.verticalOrigin === VerticalOrigin.BOTTOM ||
  1178. label.verticalOrigin === VerticalOrigin.BASELINE
  1179. ) {
  1180. glyphY -= glyphHeight;
  1181. } else if (label.verticalOrigin === VerticalOrigin.CENTER) {
  1182. glyphY -= glyphHeight * 0.5;
  1183. }
  1184. if (label._verticalOrigin === VerticalOrigin.TOP) {
  1185. glyphY += SDFSettings.PADDING * scale;
  1186. } else if (
  1187. label._verticalOrigin === VerticalOrigin.BOTTOM ||
  1188. label._verticalOrigin === VerticalOrigin.BASELINE
  1189. ) {
  1190. glyphY -= SDFSettings.PADDING * scale;
  1191. }
  1192. x = Math.min(x, glyphX);
  1193. y = Math.min(y, glyphY);
  1194. maxX = Math.max(maxX, glyphX + glyphWidth);
  1195. maxY = Math.max(maxY, glyphY + glyphHeight);
  1196. }
  1197. width = maxX - x;
  1198. height = maxY - y;
  1199. }
  1200. if (!defined(result)) {
  1201. result = new BoundingRectangle();
  1202. }
  1203. result.x = x;
  1204. result.y = y;
  1205. result.width = width;
  1206. result.height = height;
  1207. return result;
  1208. };
  1209. /**
  1210. * Determines if this label equals another label. Labels are equal if all their properties
  1211. * are equal. Labels in different collections can be equal.
  1212. *
  1213. * @param {Label} other The label to compare for equality.
  1214. * @returns {boolean} <code>true</code> if the labels are equal; otherwise, <code>false</code>.
  1215. */
  1216. Label.prototype.equals = function (other) {
  1217. return (
  1218. this === other ||
  1219. (defined(other) &&
  1220. this._show === other._show &&
  1221. this._scale === other._scale &&
  1222. this._outlineWidth === other._outlineWidth &&
  1223. this._showBackground === other._showBackground &&
  1224. this._style === other._style &&
  1225. this._verticalOrigin === other._verticalOrigin &&
  1226. this._horizontalOrigin === other._horizontalOrigin &&
  1227. this._heightReference === other._heightReference &&
  1228. this._renderedText === other._renderedText &&
  1229. this._font === other._font &&
  1230. Cartesian3.equals(this._position, other._position) &&
  1231. Color.equals(this._fillColor, other._fillColor) &&
  1232. Color.equals(this._outlineColor, other._outlineColor) &&
  1233. Color.equals(this._backgroundColor, other._backgroundColor) &&
  1234. Cartesian2.equals(this._backgroundPadding, other._backgroundPadding) &&
  1235. Cartesian2.equals(this._pixelOffset, other._pixelOffset) &&
  1236. Cartesian3.equals(this._eyeOffset, other._eyeOffset) &&
  1237. NearFarScalar.equals(
  1238. this._translucencyByDistance,
  1239. other._translucencyByDistance
  1240. ) &&
  1241. NearFarScalar.equals(
  1242. this._pixelOffsetScaleByDistance,
  1243. other._pixelOffsetScaleByDistance
  1244. ) &&
  1245. NearFarScalar.equals(this._scaleByDistance, other._scaleByDistance) &&
  1246. DistanceDisplayCondition.equals(
  1247. this._distanceDisplayCondition,
  1248. other._distanceDisplayCondition
  1249. ) &&
  1250. this._disableDepthTestDistance === other._disableDepthTestDistance &&
  1251. this._id === other._id)
  1252. );
  1253. };
  1254. /**
  1255. * Returns true if this object was destroyed; otherwise, false.
  1256. * <br /><br />
  1257. * If this object was destroyed, it should not be used; calling any function other than
  1258. * <code>isDestroyed</code> will result in a {@link DeveloperError} exception.
  1259. *
  1260. * @returns {boolean} True if this object was destroyed; otherwise, false.
  1261. */
  1262. Label.prototype.isDestroyed = function () {
  1263. return false;
  1264. };
  1265. /**
  1266. * Determines whether or not run the algorithm, that match the text of the label to right-to-left languages
  1267. * @memberof Label
  1268. * @type {boolean}
  1269. * @default false
  1270. *
  1271. * @example
  1272. * // Example 1.
  1273. * // Set a label's rightToLeft before init
  1274. * Cesium.Label.enableRightToLeftDetection = true;
  1275. * const myLabelEntity = viewer.entities.add({
  1276. * label: {
  1277. * id: 'my label',
  1278. * text: 'זה טקסט בעברית \n ועכשיו יורדים שורה',
  1279. * }
  1280. * });
  1281. *
  1282. * @example
  1283. * // Example 2.
  1284. * const myLabelEntity = viewer.entities.add({
  1285. * label: {
  1286. * id: 'my label',
  1287. * text: 'English text'
  1288. * }
  1289. * });
  1290. * // Set a label's rightToLeft after init
  1291. * Cesium.Label.enableRightToLeftDetection = true;
  1292. * myLabelEntity.text = 'טקסט חדש';
  1293. */
  1294. Label.enableRightToLeftDetection = false;
  1295. function convertTextToTypes(text, rtlChars) {
  1296. const ltrChars = /[a-zA-Z0-9]/;
  1297. const bracketsChars = /[()[\]{}<>]/;
  1298. const parsedText = [];
  1299. let word = "";
  1300. let lastType = textTypes.LTR;
  1301. let currentType = "";
  1302. const textLength = text.length;
  1303. for (let textIndex = 0; textIndex < textLength; ++textIndex) {
  1304. const character = text.charAt(textIndex);
  1305. if (rtlChars.test(character)) {
  1306. currentType = textTypes.RTL;
  1307. } else if (ltrChars.test(character)) {
  1308. currentType = textTypes.LTR;
  1309. } else if (bracketsChars.test(character)) {
  1310. currentType = textTypes.BRACKETS;
  1311. } else {
  1312. currentType = textTypes.WEAK;
  1313. }
  1314. if (textIndex === 0) {
  1315. lastType = currentType;
  1316. }
  1317. if (lastType === currentType && currentType !== textTypes.BRACKETS) {
  1318. word += character;
  1319. } else {
  1320. if (word !== "") {
  1321. parsedText.push({ Type: lastType, Word: word });
  1322. }
  1323. lastType = currentType;
  1324. word = character;
  1325. }
  1326. }
  1327. parsedText.push({ Type: currentType, Word: word });
  1328. return parsedText;
  1329. }
  1330. function reverseWord(word) {
  1331. return word.split("").reverse().join("");
  1332. }
  1333. function spliceWord(result, pointer, word) {
  1334. return result.slice(0, pointer) + word + result.slice(pointer);
  1335. }
  1336. function reverseBrackets(bracket) {
  1337. switch (bracket) {
  1338. case "(":
  1339. return ")";
  1340. case ")":
  1341. return "(";
  1342. case "[":
  1343. return "]";
  1344. case "]":
  1345. return "[";
  1346. case "{":
  1347. return "}";
  1348. case "}":
  1349. return "{";
  1350. case "<":
  1351. return ">";
  1352. case ">":
  1353. return "<";
  1354. }
  1355. }
  1356. //To add another language, simply add its Unicode block range(s) to the below regex.
  1357. const hebrew = "\u05D0-\u05EA";
  1358. const arabic = "\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF";
  1359. const rtlChars = new RegExp(`[${hebrew}${arabic}]`);
  1360. /**
  1361. *
  1362. * @param {string} value the text to parse and reorder
  1363. * @returns {string} the text as rightToLeft direction
  1364. * @private
  1365. */
  1366. function reverseRtl(value) {
  1367. const texts = value.split("\n");
  1368. let result = "";
  1369. for (let i = 0; i < texts.length; i++) {
  1370. const text = texts[i];
  1371. // first character of the line is a RTL character, so need to manage different cases
  1372. const rtlDir = rtlChars.test(text.charAt(0));
  1373. const parsedText = convertTextToTypes(text, rtlChars);
  1374. let splicePointer = 0;
  1375. let line = "";
  1376. for (let wordIndex = 0; wordIndex < parsedText.length; ++wordIndex) {
  1377. const subText = parsedText[wordIndex];
  1378. const reverse =
  1379. subText.Type === textTypes.BRACKETS
  1380. ? reverseBrackets(subText.Word)
  1381. : reverseWord(subText.Word);
  1382. if (rtlDir) {
  1383. if (subText.Type === textTypes.RTL) {
  1384. line = reverse + line;
  1385. splicePointer = 0;
  1386. } else if (subText.Type === textTypes.LTR) {
  1387. line = spliceWord(line, splicePointer, subText.Word);
  1388. splicePointer += subText.Word.length;
  1389. } else if (
  1390. subText.Type === textTypes.WEAK ||
  1391. subText.Type === textTypes.BRACKETS
  1392. ) {
  1393. // current word is weak, last one was bracket
  1394. if (
  1395. subText.Type === textTypes.WEAK &&
  1396. parsedText[wordIndex - 1].Type === textTypes.BRACKETS
  1397. ) {
  1398. line = reverse + line;
  1399. }
  1400. // current word is weak or bracket, last one was rtl
  1401. else if (parsedText[wordIndex - 1].Type === textTypes.RTL) {
  1402. line = reverse + line;
  1403. splicePointer = 0;
  1404. }
  1405. // current word is weak or bracket, there is at least one more word
  1406. else if (parsedText.length > wordIndex + 1) {
  1407. // next word is rtl
  1408. if (parsedText[wordIndex + 1].Type === textTypes.RTL) {
  1409. line = reverse + line;
  1410. splicePointer = 0;
  1411. } else {
  1412. line = spliceWord(line, splicePointer, subText.Word);
  1413. splicePointer += subText.Word.length;
  1414. }
  1415. }
  1416. // current word is weak or bracket, and it the last in this line
  1417. else {
  1418. line = spliceWord(line, 0, reverse);
  1419. }
  1420. }
  1421. }
  1422. // ltr line, rtl word
  1423. else if (subText.Type === textTypes.RTL) {
  1424. line = spliceWord(line, splicePointer, reverse);
  1425. }
  1426. // ltr line, ltr word
  1427. else if (subText.Type === textTypes.LTR) {
  1428. line += subText.Word;
  1429. splicePointer = line.length;
  1430. }
  1431. // ltr line, weak or bracket word
  1432. else if (
  1433. subText.Type === textTypes.WEAK ||
  1434. subText.Type === textTypes.BRACKETS
  1435. ) {
  1436. // not first word in line
  1437. if (wordIndex > 0) {
  1438. // last word was rtl
  1439. if (parsedText[wordIndex - 1].Type === textTypes.RTL) {
  1440. // there is at least one more word
  1441. if (parsedText.length > wordIndex + 1) {
  1442. // next word is rtl
  1443. if (parsedText[wordIndex + 1].Type === textTypes.RTL) {
  1444. line = spliceWord(line, splicePointer, reverse);
  1445. } else {
  1446. line += subText.Word;
  1447. splicePointer = line.length;
  1448. }
  1449. } else {
  1450. line += subText.Word;
  1451. }
  1452. } else {
  1453. line += subText.Word;
  1454. splicePointer = line.length;
  1455. }
  1456. } else {
  1457. line += subText.Word;
  1458. splicePointer = line.length;
  1459. }
  1460. }
  1461. }
  1462. result += line;
  1463. if (i < texts.length - 1) {
  1464. result += "\n";
  1465. }
  1466. }
  1467. return result;
  1468. }
  1469. export default Label;