GridImageryProvider.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  1. import Color from "../Core/Color.js";
  2. import defaultValue from "../Core/defaultValue.js";
  3. import defined from "../Core/defined.js";
  4. import Event from "../Core/Event.js";
  5. import GeographicTilingScheme from "../Core/GeographicTilingScheme.js";
  6. import when from "../ThirdParty/when.js";
  7. var defaultColor = new Color(1.0, 1.0, 1.0, 0.4);
  8. var defaultGlowColor = new Color(0.0, 1.0, 0.0, 0.05);
  9. var 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. * @param {TilingScheme} [tilingScheme=new GeographicTilingScheme()] The tiling scheme for which to draw tiles.
  16. * @param {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. * @param {Number} [cells=8] The number of grids cells.
  20. * @param {Color} [color=Color(1.0, 1.0, 1.0, 0.4)] The color to draw grid lines.
  21. * @param {Color} [glowColor=Color(0.0, 1.0, 0.0, 0.05)] The color to draw glow for grid lines.
  22. * @param {Number} [glowWidth=6] The width of lines used for rendering the line glow effect.
  23. * @param {Color} [backgroundColor=Color(0.0, 0.5, 0.0, 0.2)] Background fill color.
  24. * @param {Number} [tileWidth=256] The width of the tile for level-of-detail selection purposes.
  25. * @param {Number} [tileHeight=256] The height of the tile for level-of-detail selection purposes.
  26. * @param {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. /**
  40. * The default alpha blending value of this provider, with 0.0 representing fully transparent and
  41. * 1.0 representing fully opaque.
  42. *
  43. * @type {Number|undefined}
  44. * @default undefined
  45. */
  46. this.defaultAlpha = undefined;
  47. /**
  48. * The default alpha blending value on the night side of the globe of this provider, with 0.0 representing fully transparent and
  49. * 1.0 representing fully opaque.
  50. *
  51. * @type {Number|undefined}
  52. * @default undefined
  53. */
  54. this.defaultNightAlpha = undefined;
  55. /**
  56. * The default alpha blending value on the day side of the globe of this provider, with 0.0 representing fully transparent and
  57. * 1.0 representing fully opaque.
  58. *
  59. * @type {Number|undefined}
  60. * @default undefined
  61. */
  62. this.defaultDayAlpha = undefined;
  63. /**
  64. * The default brightness of this provider. 1.0 uses the unmodified imagery color. Less than 1.0
  65. * makes the imagery darker while greater than 1.0 makes it brighter.
  66. *
  67. * @type {Number|undefined}
  68. * @default undefined
  69. */
  70. this.defaultBrightness = undefined;
  71. /**
  72. * The default contrast of this provider. 1.0 uses the unmodified imagery color. Less than 1.0 reduces
  73. * the contrast while greater than 1.0 increases it.
  74. *
  75. * @type {Number|undefined}
  76. * @default undefined
  77. */
  78. this.defaultContrast = undefined;
  79. /**
  80. * The default hue of this provider in radians. 0.0 uses the unmodified imagery color.
  81. *
  82. * @type {Number|undefined}
  83. * @default undefined
  84. */
  85. this.defaultHue = undefined;
  86. /**
  87. * The default saturation of this provider. 1.0 uses the unmodified imagery color. Less than 1.0 reduces the
  88. * saturation while greater than 1.0 increases it.
  89. *
  90. * @type {Number|undefined}
  91. * @default undefined
  92. */
  93. this.defaultSaturation = undefined;
  94. /**
  95. * The default gamma correction to apply to this provider. 1.0 uses the unmodified imagery color.
  96. *
  97. * @type {Number|undefined}
  98. * @default undefined
  99. */
  100. this.defaultGamma = undefined;
  101. /**
  102. * The default texture minification filter to apply to this provider.
  103. *
  104. * @type {TextureMinificationFilter}
  105. * @default undefined
  106. */
  107. this.defaultMinificationFilter = undefined;
  108. /**
  109. * The default texture magnification filter to apply to this provider.
  110. *
  111. * @type {TextureMagnificationFilter}
  112. * @default undefined
  113. */
  114. this.defaultMagnificationFilter = undefined;
  115. this._tilingScheme = defined(options.tilingScheme)
  116. ? options.tilingScheme
  117. : new GeographicTilingScheme({ ellipsoid: options.ellipsoid });
  118. this._cells = defaultValue(options.cells, 8);
  119. this._color = defaultValue(options.color, defaultColor);
  120. this._glowColor = defaultValue(options.glowColor, defaultGlowColor);
  121. this._glowWidth = defaultValue(options.glowWidth, 6);
  122. this._backgroundColor = defaultValue(
  123. options.backgroundColor,
  124. defaultBackgroundColor
  125. );
  126. this._errorEvent = new Event();
  127. this._tileWidth = defaultValue(options.tileWidth, 256);
  128. this._tileHeight = defaultValue(options.tileHeight, 256);
  129. // A little larger than tile size so lines are sharper
  130. // Note: can't be too much difference otherwise texture blowout
  131. this._canvasSize = defaultValue(options.canvasSize, 256);
  132. // We only need a single canvas since all tiles will be the same
  133. this._canvas = this._createGridCanvas();
  134. this._readyPromise = when.resolve(true);
  135. }
  136. Object.defineProperties(GridImageryProvider.prototype, {
  137. /**
  138. * Gets the proxy used by this provider.
  139. * @memberof GridImageryProvider.prototype
  140. * @type {Proxy}
  141. * @readonly
  142. */
  143. proxy: {
  144. get: function () {
  145. return undefined;
  146. },
  147. },
  148. /**
  149. * Gets the width of each tile, in pixels. This function should
  150. * not be called before {@link GridImageryProvider#ready} returns true.
  151. * @memberof GridImageryProvider.prototype
  152. * @type {Number}
  153. * @readonly
  154. */
  155. tileWidth: {
  156. get: function () {
  157. return this._tileWidth;
  158. },
  159. },
  160. /**
  161. * Gets the height of each tile, in pixels. This function should
  162. * not be called before {@link GridImageryProvider#ready} returns true.
  163. * @memberof GridImageryProvider.prototype
  164. * @type {Number}
  165. * @readonly
  166. */
  167. tileHeight: {
  168. get: function () {
  169. return this._tileHeight;
  170. },
  171. },
  172. /**
  173. * Gets the maximum level-of-detail that can be requested. This function should
  174. * not be called before {@link GridImageryProvider#ready} returns true.
  175. * @memberof GridImageryProvider.prototype
  176. * @type {Number|undefined}
  177. * @readonly
  178. */
  179. maximumLevel: {
  180. get: function () {
  181. return undefined;
  182. },
  183. },
  184. /**
  185. * Gets the minimum level-of-detail that can be requested. This function should
  186. * not be called before {@link GridImageryProvider#ready} returns true.
  187. * @memberof GridImageryProvider.prototype
  188. * @type {Number}
  189. * @readonly
  190. */
  191. minimumLevel: {
  192. get: function () {
  193. return undefined;
  194. },
  195. },
  196. /**
  197. * Gets the tiling scheme used by this provider. This function should
  198. * not be called before {@link GridImageryProvider#ready} returns true.
  199. * @memberof GridImageryProvider.prototype
  200. * @type {TilingScheme}
  201. * @readonly
  202. */
  203. tilingScheme: {
  204. get: function () {
  205. return this._tilingScheme;
  206. },
  207. },
  208. /**
  209. * Gets the rectangle, in radians, of the imagery provided by this instance. This function should
  210. * not be called before {@link GridImageryProvider#ready} returns true.
  211. * @memberof GridImageryProvider.prototype
  212. * @type {Rectangle}
  213. * @readonly
  214. */
  215. rectangle: {
  216. get: function () {
  217. return this._tilingScheme.rectangle;
  218. },
  219. },
  220. /**
  221. * Gets the tile discard policy. If not undefined, the discard policy is responsible
  222. * for filtering out "missing" tiles via its shouldDiscardImage function. If this function
  223. * returns undefined, no tiles are filtered. This function should
  224. * not be called before {@link GridImageryProvider#ready} returns true.
  225. * @memberof GridImageryProvider.prototype
  226. * @type {TileDiscardPolicy}
  227. * @readonly
  228. */
  229. tileDiscardPolicy: {
  230. get: function () {
  231. return undefined;
  232. },
  233. },
  234. /**
  235. * Gets an event that is raised when the imagery provider encounters an asynchronous error. By subscribing
  236. * to the event, you will be notified of the error and can potentially recover from it. Event listeners
  237. * are passed an instance of {@link TileProviderError}.
  238. * @memberof GridImageryProvider.prototype
  239. * @type {Event}
  240. * @readonly
  241. */
  242. errorEvent: {
  243. get: function () {
  244. return this._errorEvent;
  245. },
  246. },
  247. /**
  248. * Gets a value indicating whether or not the provider is ready for use.
  249. * @memberof GridImageryProvider.prototype
  250. * @type {Boolean}
  251. * @readonly
  252. */
  253. ready: {
  254. get: function () {
  255. return true;
  256. },
  257. },
  258. /**
  259. * Gets a promise that resolves to true when the provider is ready for use.
  260. * @memberof GridImageryProvider.prototype
  261. * @type {Promise.<Boolean>}
  262. * @readonly
  263. */
  264. readyPromise: {
  265. get: function () {
  266. return this._readyPromise;
  267. },
  268. },
  269. /**
  270. * Gets the credit to display when this imagery provider is active. Typically this is used to credit
  271. * the source of the imagery. This function should not be called before {@link GridImageryProvider#ready} returns true.
  272. * @memberof GridImageryProvider.prototype
  273. * @type {Credit}
  274. * @readonly
  275. */
  276. credit: {
  277. get: function () {
  278. return undefined;
  279. },
  280. },
  281. /**
  282. * Gets a value indicating whether or not the images provided by this imagery provider
  283. * include an alpha channel. If this property is false, an alpha channel, if present, will
  284. * be ignored. If this property is true, any images without an alpha channel will be treated
  285. * as if their alpha is 1.0 everywhere. When this property is false, memory usage
  286. * and texture upload time are reduced.
  287. * @memberof GridImageryProvider.prototype
  288. * @type {Boolean}
  289. * @readonly
  290. */
  291. hasAlphaChannel: {
  292. get: function () {
  293. return true;
  294. },
  295. },
  296. });
  297. /**
  298. * Draws a grid of lines into a canvas.
  299. */
  300. GridImageryProvider.prototype._drawGrid = function (context) {
  301. var minPixel = 0;
  302. var maxPixel = this._canvasSize;
  303. for (var x = 0; x <= this._cells; ++x) {
  304. var nx = x / this._cells;
  305. var val = 1 + nx * (maxPixel - 1);
  306. context.moveTo(val, minPixel);
  307. context.lineTo(val, maxPixel);
  308. context.moveTo(minPixel, val);
  309. context.lineTo(maxPixel, val);
  310. }
  311. context.stroke();
  312. };
  313. /**
  314. * Render a grid into a canvas with background and glow
  315. */
  316. GridImageryProvider.prototype._createGridCanvas = function () {
  317. var canvas = document.createElement("canvas");
  318. canvas.width = this._canvasSize;
  319. canvas.height = this._canvasSize;
  320. var minPixel = 0;
  321. var maxPixel = this._canvasSize;
  322. var context = canvas.getContext("2d");
  323. // Fill the background
  324. var cssBackgroundColor = this._backgroundColor.toCssColorString();
  325. context.fillStyle = cssBackgroundColor;
  326. context.fillRect(minPixel, minPixel, maxPixel, maxPixel);
  327. // Glow for grid lines
  328. var cssGlowColor = this._glowColor.toCssColorString();
  329. context.strokeStyle = cssGlowColor;
  330. // Wide
  331. context.lineWidth = this._glowWidth;
  332. context.strokeRect(minPixel, minPixel, maxPixel, maxPixel);
  333. this._drawGrid(context);
  334. // Narrow
  335. context.lineWidth = this._glowWidth * 0.5;
  336. context.strokeRect(minPixel, minPixel, maxPixel, maxPixel);
  337. this._drawGrid(context);
  338. // Grid lines
  339. var cssColor = this._color.toCssColorString();
  340. // Border
  341. context.strokeStyle = cssColor;
  342. context.lineWidth = 2;
  343. context.strokeRect(minPixel, minPixel, maxPixel, maxPixel);
  344. // Inner
  345. context.lineWidth = 1;
  346. this._drawGrid(context);
  347. return canvas;
  348. };
  349. /**
  350. * Gets the credits to be displayed when a given tile is displayed.
  351. *
  352. * @param {Number} x The tile X coordinate.
  353. * @param {Number} y The tile Y coordinate.
  354. * @param {Number} level The tile level;
  355. * @returns {Credit[]} The credits to be displayed when the tile is displayed.
  356. *
  357. * @exception {DeveloperError} <code>getTileCredits</code> must not be called before the imagery provider is ready.
  358. */
  359. GridImageryProvider.prototype.getTileCredits = function (x, y, level) {
  360. return undefined;
  361. };
  362. /**
  363. * Requests the image for a given tile. This function should
  364. * not be called before {@link GridImageryProvider#ready} returns true.
  365. *
  366. * @param {Number} x The tile X coordinate.
  367. * @param {Number} y The tile Y coordinate.
  368. * @param {Number} level The tile level.
  369. * @param {Request} [request] The request object. Intended for internal use only.
  370. * @returns {Promise.<HTMLImageElement|HTMLCanvasElement>|undefined} A promise for the image that will resolve when the image is available, or
  371. * undefined if there are too many active requests to the server, and the request
  372. * should be retried later. The resolved image may be either an
  373. * Image or a Canvas DOM object.
  374. */
  375. GridImageryProvider.prototype.requestImage = function (x, y, level, request) {
  376. return this._canvas;
  377. };
  378. /**
  379. * Picking features is not currently supported by this imagery provider, so this function simply returns
  380. * undefined.
  381. *
  382. * @param {Number} x The tile X coordinate.
  383. * @param {Number} y The tile Y coordinate.
  384. * @param {Number} level The tile level.
  385. * @param {Number} longitude The longitude at which to pick features.
  386. * @param {Number} latitude The latitude at which to pick features.
  387. * @return {Promise.<ImageryLayerFeatureInfo[]>|undefined} A promise for the picked features that will resolve when the asynchronous
  388. * picking completes. The resolved value is an array of {@link ImageryLayerFeatureInfo}
  389. * instances. The array may be empty if no features are found at the given location.
  390. * It may also be undefined if picking is not supported.
  391. */
  392. GridImageryProvider.prototype.pickFeatures = function (
  393. x,
  394. y,
  395. level,
  396. longitude,
  397. latitude
  398. ) {
  399. return undefined;
  400. };
  401. export default GridImageryProvider;