GridImageryProvider.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599
  1. import Color from "../Core/Color.js";
  2. import defaultValue from "../Core/defaultValue.js";
  3. import defined from "../Core/defined.js";
  4. import deprecationWarning from "../Core/deprecationWarning.js";
  5. import Event from "../Core/Event.js";
  6. import GeographicTilingScheme from "../Core/GeographicTilingScheme.js";
  7. const defaultColor = new Color(1.0, 1.0, 1.0, 0.4);
  8. const defaultGlowColor = new Color(0.0, 1.0, 0.0, 0.05);
  9. const defaultBackgroundColor = new Color(0.0, 0.5, 0.0, 0.2);
  10. /**
  11. * @typedef {object} GridImageryProvider.ConstructorOptions
  12. *
  13. * Initialization options for the GridImageryProvider constructor
  14. *
  15. * @property {TilingScheme} [tilingScheme=new GeographicTilingScheme()] The tiling scheme for which to draw tiles.
  16. * @property {Ellipsoid} [ellipsoid] The ellipsoid. If the tilingScheme is specified,
  17. * this parameter is ignored and the tiling scheme's ellipsoid is used instead. If neither
  18. * parameter is specified, the WGS84 ellipsoid is used.
  19. * @property {number} [cells=8] The number of grids cells.
  20. * @property {Color} [color=Color(1.0, 1.0, 1.0, 0.4)] The color to draw grid lines.
  21. * @property {Color} [glowColor=Color(0.0, 1.0, 0.0, 0.05)] The color to draw glow for grid lines.
  22. * @property {number} [glowWidth=6] The width of lines used for rendering the line glow effect.
  23. * @property {Color} [backgroundColor=Color(0.0, 0.5, 0.0, 0.2)] Background fill color.
  24. * @property {number} [tileWidth=256] The width of the tile for level-of-detail selection purposes.
  25. * @property {number} [tileHeight=256] The height of the tile for level-of-detail selection purposes.
  26. * @property {number} [canvasSize=256] The size of the canvas used for rendering.
  27. */
  28. /**
  29. * An {@link ImageryProvider} that draws a wireframe grid on every tile with controllable background and glow.
  30. * May be useful for custom rendering effects or debugging terrain.
  31. *
  32. * @alias GridImageryProvider
  33. * @constructor
  34. * @param {GridImageryProvider.ConstructorOptions} options Object describing initialization options
  35. *
  36. */
  37. function GridImageryProvider(options) {
  38. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  39. this._defaultAlpha = undefined;
  40. this._defaultNightAlpha = undefined;
  41. this._defaultDayAlpha = undefined;
  42. this._defaultBrightness = undefined;
  43. this._defaultContrast = undefined;
  44. this._defaultHue = undefined;
  45. this._defaultSaturation = undefined;
  46. this._defaultGamma = undefined;
  47. this._defaultMinificationFilter = undefined;
  48. this._defaultMagnificationFilter = undefined;
  49. this._tilingScheme = defined(options.tilingScheme)
  50. ? options.tilingScheme
  51. : new GeographicTilingScheme({ ellipsoid: options.ellipsoid });
  52. this._cells = defaultValue(options.cells, 8);
  53. this._color = defaultValue(options.color, defaultColor);
  54. this._glowColor = defaultValue(options.glowColor, defaultGlowColor);
  55. this._glowWidth = defaultValue(options.glowWidth, 6);
  56. this._backgroundColor = defaultValue(
  57. options.backgroundColor,
  58. defaultBackgroundColor
  59. );
  60. this._errorEvent = new Event();
  61. this._tileWidth = defaultValue(options.tileWidth, 256);
  62. this._tileHeight = defaultValue(options.tileHeight, 256);
  63. // A little larger than tile size so lines are sharper
  64. // Note: can't be too much difference otherwise texture blowout
  65. this._canvasSize = defaultValue(options.canvasSize, 256);
  66. // We only need a single canvas since all tiles will be the same
  67. this._canvas = this._createGridCanvas();
  68. this._ready = true;
  69. this._readyPromise = Promise.resolve(true);
  70. }
  71. Object.defineProperties(GridImageryProvider.prototype, {
  72. /**
  73. * Gets the proxy used by this provider.
  74. * @memberof GridImageryProvider.prototype
  75. * @type {Proxy}
  76. * @readonly
  77. */
  78. proxy: {
  79. get: function () {
  80. return undefined;
  81. },
  82. },
  83. /**
  84. * Gets the width of each tile, in pixels.
  85. * @memberof GridImageryProvider.prototype
  86. * @type {number}
  87. * @readonly
  88. */
  89. tileWidth: {
  90. get: function () {
  91. return this._tileWidth;
  92. },
  93. },
  94. /**
  95. * Gets the height of each tile, in pixels.
  96. * @memberof GridImageryProvider.prototype
  97. * @type {number}
  98. * @readonly
  99. */
  100. tileHeight: {
  101. get: function () {
  102. return this._tileHeight;
  103. },
  104. },
  105. /**
  106. * Gets the maximum level-of-detail that can be requested.
  107. * @memberof GridImageryProvider.prototype
  108. * @type {number|undefined}
  109. * @readonly
  110. */
  111. maximumLevel: {
  112. get: function () {
  113. return undefined;
  114. },
  115. },
  116. /**
  117. * Gets the minimum level-of-detail that can be requested.
  118. * @memberof GridImageryProvider.prototype
  119. * @type {number}
  120. * @readonly
  121. */
  122. minimumLevel: {
  123. get: function () {
  124. return undefined;
  125. },
  126. },
  127. /**
  128. * Gets the tiling scheme used by this provider.
  129. * @memberof GridImageryProvider.prototype
  130. * @type {TilingScheme}
  131. * @readonly
  132. */
  133. tilingScheme: {
  134. get: function () {
  135. return this._tilingScheme;
  136. },
  137. },
  138. /**
  139. * Gets the rectangle, in radians, of the imagery provided by this instance.
  140. * @memberof GridImageryProvider.prototype
  141. * @type {Rectangle}
  142. * @readonly
  143. */
  144. rectangle: {
  145. get: function () {
  146. return this._tilingScheme.rectangle;
  147. },
  148. },
  149. /**
  150. * Gets the tile discard policy. If not undefined, the discard policy is responsible
  151. * for filtering out "missing" tiles via its shouldDiscardImage function. If this function
  152. * returns undefined, no tiles are filtered.
  153. * @memberof GridImageryProvider.prototype
  154. * @type {TileDiscardPolicy}
  155. * @readonly
  156. */
  157. tileDiscardPolicy: {
  158. get: function () {
  159. return undefined;
  160. },
  161. },
  162. /**
  163. * Gets an event that is raised when the imagery provider encounters an asynchronous error. By subscribing
  164. * to the event, you will be notified of the error and can potentially recover from it. Event listeners
  165. * are passed an instance of {@link TileProviderError}.
  166. * @memberof GridImageryProvider.prototype
  167. * @type {Event}
  168. * @readonly
  169. */
  170. errorEvent: {
  171. get: function () {
  172. return this._errorEvent;
  173. },
  174. },
  175. /**
  176. * Gets a value indicating whether or not the provider is ready for use.
  177. * @memberof GridImageryProvider.prototype
  178. * @type {boolean}
  179. * @readonly
  180. * @deprecated
  181. */
  182. ready: {
  183. get: function () {
  184. deprecationWarning(
  185. "GridImageryProvider.ready",
  186. "GridImageryProvider.ready was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107."
  187. );
  188. return true;
  189. },
  190. },
  191. /**
  192. * Gets a promise that resolves to true when the provider is ready for use.
  193. * @memberof GridImageryProvider.prototype
  194. * @type {Promise<boolean>}
  195. * @readonly
  196. * @deprecated
  197. */
  198. readyPromise: {
  199. get: function () {
  200. deprecationWarning(
  201. "GridImageryProvider.readyPromise",
  202. "GridImageryProvider.readyPromise was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107."
  203. );
  204. return this._readyPromise;
  205. },
  206. },
  207. /**
  208. * Gets the credit to display when this imagery provider is active. Typically this is used to credit
  209. * the source of the imagery.
  210. * @memberof GridImageryProvider.prototype
  211. * @type {Credit}
  212. * @readonly
  213. */
  214. credit: {
  215. get: function () {
  216. return undefined;
  217. },
  218. },
  219. /**
  220. * Gets a value indicating whether or not the images provided by this imagery provider
  221. * include an alpha channel. If this property is false, an alpha channel, if present, will
  222. * be ignored. If this property is true, any images without an alpha channel will be treated
  223. * as if their alpha is 1.0 everywhere. When this property is false, memory usage
  224. * and texture upload time are reduced.
  225. * @memberof GridImageryProvider.prototype
  226. * @type {boolean}
  227. * @readonly
  228. */
  229. hasAlphaChannel: {
  230. get: function () {
  231. return true;
  232. },
  233. },
  234. /**
  235. * The default alpha blending value of this provider, with 0.0 representing fully transparent and
  236. * 1.0 representing fully opaque.
  237. * @memberof GridImageryProvider.prototype
  238. * @type {Number|undefined}
  239. * @deprecated
  240. */
  241. defaultAlpha: {
  242. get: function () {
  243. deprecationWarning(
  244. "GridImageryProvider.defaultAlpha",
  245. "GridImageryProvider.defaultAlpha was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.alpha instead."
  246. );
  247. return this._defaultAlpha;
  248. },
  249. set: function (value) {
  250. deprecationWarning(
  251. "GridImageryProvider.defaultAlpha",
  252. "GridImageryProvider.defaultAlpha was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.alpha instead."
  253. );
  254. this._defaultAlpha = value;
  255. },
  256. },
  257. /**
  258. * The default alpha blending value on the night side of the globe of this provider, with 0.0 representing fully transparent and
  259. * 1.0 representing fully opaque.
  260. * @memberof GridImageryProvider.prototype
  261. * @type {Number|undefined}
  262. * @deprecated
  263. */
  264. defaultNightAlpha: {
  265. get: function () {
  266. deprecationWarning(
  267. "GridImageryProvider.defaultNightAlpha",
  268. "GridImageryProvider.defaultNightAlpha was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.nightAlpha instead."
  269. );
  270. return this.defaultNightAlpha;
  271. },
  272. set: function (value) {
  273. deprecationWarning(
  274. "GridImageryProvider.defaultNightAlpha",
  275. "GridImageryProvider.defaultNightAlpha was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.nightAlpha instead."
  276. );
  277. this.defaultNightAlpha = value;
  278. },
  279. },
  280. /**
  281. * The default alpha blending value on the day side of the globe of this provider, with 0.0 representing fully transparent and
  282. * 1.0 representing fully opaque.
  283. * @memberof GridImageryProvider.prototype
  284. * @type {Number|undefined}
  285. * @deprecated
  286. */
  287. defaultDayAlpha: {
  288. get: function () {
  289. deprecationWarning(
  290. "GridImageryProvider.defaultDayAlpha",
  291. "GridImageryProvider.defaultDayAlpha was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.dayAlpha instead."
  292. );
  293. return this._defaultDayAlpha;
  294. },
  295. set: function (value) {
  296. deprecationWarning(
  297. "GridImageryProvider.defaultDayAlpha",
  298. "GridImageryProvider.defaultDayAlpha was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.dayAlpha instead."
  299. );
  300. this._defaultDayAlpha = value;
  301. },
  302. },
  303. /**
  304. * The default brightness of this provider. 1.0 uses the unmodified imagery color. Less than 1.0
  305. * makes the imagery darker while greater than 1.0 makes it brighter.
  306. * @memberof GridImageryProvider.prototype
  307. * @type {Number|undefined}
  308. * @deprecated
  309. */
  310. defaultBrightness: {
  311. get: function () {
  312. deprecationWarning(
  313. "GridImageryProvider.defaultBrightness",
  314. "GridImageryProvider.defaultBrightness was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.brightness instead."
  315. );
  316. return this._defaultBrightness;
  317. },
  318. set: function (value) {
  319. deprecationWarning(
  320. "GridImageryProvider.defaultBrightness",
  321. "GridImageryProvider.defaultBrightness was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.brightness instead."
  322. );
  323. this._defaultBrightness = value;
  324. },
  325. },
  326. /**
  327. * The default contrast of this provider. 1.0 uses the unmodified imagery color. Less than 1.0 reduces
  328. * the contrast while greater than 1.0 increases it.
  329. * @memberof GridImageryProvider.prototype
  330. * @type {Number|undefined}
  331. * @deprecated
  332. */
  333. defaultContrast: {
  334. get: function () {
  335. deprecationWarning(
  336. "GridImageryProvider.defaultContrast",
  337. "GridImageryProvider.defaultContrast was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.contrast instead."
  338. );
  339. return this._defaultContrast;
  340. },
  341. set: function (value) {
  342. deprecationWarning(
  343. "GridImageryProvider.defaultContrast",
  344. "GridImageryProvider.defaultContrast was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.contrast instead."
  345. );
  346. this._defaultContrast = value;
  347. },
  348. },
  349. /**
  350. * The default hue of this provider in radians. 0.0 uses the unmodified imagery color.
  351. * @memberof GridImageryProvider.prototype
  352. * @type {Number|undefined}
  353. * @deprecated
  354. */
  355. defaultHue: {
  356. get: function () {
  357. deprecationWarning(
  358. "GridImageryProvider.defaultHue",
  359. "GridImageryProvider.defaultHue was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.hue instead."
  360. );
  361. return this._defaultHue;
  362. },
  363. set: function (value) {
  364. deprecationWarning(
  365. "GridImageryProvider.defaultHue",
  366. "GridImageryProvider.defaultHue was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.hue instead."
  367. );
  368. this._defaultHue = value;
  369. },
  370. },
  371. /**
  372. * The default saturation of this provider. 1.0 uses the unmodified imagery color. Less than 1.0 reduces the
  373. * saturation while greater than 1.0 increases it.
  374. * @memberof GridImageryProvider.prototype
  375. * @type {Number|undefined}
  376. * @deprecated
  377. */
  378. defaultSaturation: {
  379. get: function () {
  380. deprecationWarning(
  381. "GridImageryProvider.defaultSaturation",
  382. "GridImageryProvider.defaultSaturation was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.saturation instead."
  383. );
  384. return this._defaultSaturation;
  385. },
  386. set: function (value) {
  387. deprecationWarning(
  388. "GridImageryProvider.defaultSaturation",
  389. "GridImageryProvider.defaultSaturation was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.saturation instead."
  390. );
  391. this._defaultSaturation = value;
  392. },
  393. },
  394. /**
  395. * The default gamma correction to apply to this provider. 1.0 uses the unmodified imagery color.
  396. * @memberof GridImageryProvider.prototype
  397. * @type {Number|undefined}
  398. * @deprecated
  399. */
  400. defaultGamma: {
  401. get: function () {
  402. deprecationWarning(
  403. "GridImageryProvider.defaultGamma",
  404. "GridImageryProvider.defaultGamma was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.gamma instead."
  405. );
  406. return this._defaultGamma;
  407. },
  408. set: function (value) {
  409. deprecationWarning(
  410. "GridImageryProvider.defaultGamma",
  411. "GridImageryProvider.defaultGamma was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.gamma instead."
  412. );
  413. this._defaultGamma = value;
  414. },
  415. },
  416. /**
  417. * The default texture minification filter to apply to this provider.
  418. * @memberof GridImageryProvider.prototype
  419. * @type {TextureMinificationFilter}
  420. * @deprecated
  421. */
  422. defaultMinificationFilter: {
  423. get: function () {
  424. deprecationWarning(
  425. "GridImageryProvider.defaultMinificationFilter",
  426. "GridImageryProvider.defaultMinificationFilter was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.minificationFilter instead."
  427. );
  428. return this._defaultMinificationFilter;
  429. },
  430. set: function (value) {
  431. deprecationWarning(
  432. "GridImageryProvider.defaultMinificationFilter",
  433. "GridImageryProvider.defaultMinificationFilter was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.minificationFilter instead."
  434. );
  435. this._defaultMinificationFilter = value;
  436. },
  437. },
  438. /**
  439. * The default texture magnification filter to apply to this provider.
  440. * @memberof GridImageryProvider.prototype
  441. * @type {TextureMagnificationFilter}
  442. * @deprecated
  443. */
  444. defaultMagnificationFilter: {
  445. get: function () {
  446. deprecationWarning(
  447. "GridImageryProvider.defaultMagnificationFilter",
  448. "GridImageryProvider.defaultMagnificationFilter was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.magnificationFilter instead."
  449. );
  450. return this._defaultMagnificationFilter;
  451. },
  452. set: function (value) {
  453. deprecationWarning(
  454. "GridImageryProvider.defaultMagnificationFilter",
  455. "GridImageryProvider.defaultMagnificationFilter was deprecated in CesiumJS 1.104. It will be in CesiumJS 1.107. Use ImageryLayer.magnificationFilter instead."
  456. );
  457. this._defaultMagnificationFilter = value;
  458. },
  459. },
  460. });
  461. /**
  462. * Draws a grid of lines into a canvas.
  463. */
  464. GridImageryProvider.prototype._drawGrid = function (context) {
  465. const minPixel = 0;
  466. const maxPixel = this._canvasSize;
  467. for (let x = 0; x <= this._cells; ++x) {
  468. const nx = x / this._cells;
  469. const val = 1 + nx * (maxPixel - 1);
  470. context.moveTo(val, minPixel);
  471. context.lineTo(val, maxPixel);
  472. context.moveTo(minPixel, val);
  473. context.lineTo(maxPixel, val);
  474. }
  475. context.stroke();
  476. };
  477. /**
  478. * Render a grid into a canvas with background and glow
  479. */
  480. GridImageryProvider.prototype._createGridCanvas = function () {
  481. const canvas = document.createElement("canvas");
  482. canvas.width = this._canvasSize;
  483. canvas.height = this._canvasSize;
  484. const minPixel = 0;
  485. const maxPixel = this._canvasSize;
  486. const context = canvas.getContext("2d");
  487. // Fill the background
  488. const cssBackgroundColor = this._backgroundColor.toCssColorString();
  489. context.fillStyle = cssBackgroundColor;
  490. context.fillRect(minPixel, minPixel, maxPixel, maxPixel);
  491. // Glow for grid lines
  492. const cssGlowColor = this._glowColor.toCssColorString();
  493. context.strokeStyle = cssGlowColor;
  494. // Wide
  495. context.lineWidth = this._glowWidth;
  496. context.strokeRect(minPixel, minPixel, maxPixel, maxPixel);
  497. this._drawGrid(context);
  498. // Narrow
  499. context.lineWidth = this._glowWidth * 0.5;
  500. context.strokeRect(minPixel, minPixel, maxPixel, maxPixel);
  501. this._drawGrid(context);
  502. // Grid lines
  503. const cssColor = this._color.toCssColorString();
  504. // Border
  505. context.strokeStyle = cssColor;
  506. context.lineWidth = 2;
  507. context.strokeRect(minPixel, minPixel, maxPixel, maxPixel);
  508. // Inner
  509. context.lineWidth = 1;
  510. this._drawGrid(context);
  511. return canvas;
  512. };
  513. /**
  514. * Gets the credits to be displayed when a given tile is displayed.
  515. *
  516. * @param {number} x The tile X coordinate.
  517. * @param {number} y The tile Y coordinate.
  518. * @param {number} level The tile level;
  519. * @returns {Credit[]} The credits to be displayed when the tile is displayed.
  520. */
  521. GridImageryProvider.prototype.getTileCredits = function (x, y, level) {
  522. return undefined;
  523. };
  524. /**
  525. * Requests the image for a given tile.
  526. *
  527. * @param {number} x The tile X coordinate.
  528. * @param {number} y The tile Y coordinate.
  529. * @param {number} level The tile level.
  530. * @param {Request} [request] The request object. Intended for internal use only.
  531. * @returns {Promise<HTMLCanvasElement>} The resolved image as a Canvas DOM object.
  532. */
  533. GridImageryProvider.prototype.requestImage = function (x, y, level, request) {
  534. return Promise.resolve(this._canvas);
  535. };
  536. /**
  537. * Picking features is not currently supported by this imagery provider, so this function simply returns
  538. * undefined.
  539. *
  540. * @param {number} x The tile X coordinate.
  541. * @param {number} y The tile Y coordinate.
  542. * @param {number} level The tile level.
  543. * @param {number} longitude The longitude at which to pick features.
  544. * @param {number} latitude The latitude at which to pick features.
  545. * @return {undefined} Undefined since picking is not supported.
  546. */
  547. GridImageryProvider.prototype.pickFeatures = function (
  548. x,
  549. y,
  550. level,
  551. longitude,
  552. latitude
  553. ) {
  554. return undefined;
  555. };
  556. export default GridImageryProvider;