GridImageryProvider.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. /*global define*/
  2. define([
  3. '../Core/Color',
  4. '../Core/defaultValue',
  5. '../Core/defined',
  6. '../Core/defineProperties',
  7. '../Core/Event',
  8. '../Core/GeographicTilingScheme'
  9. ], function(
  10. Color,
  11. defaultValue,
  12. defined,
  13. defineProperties,
  14. Event,
  15. GeographicTilingScheme) {
  16. "use strict";
  17. var defaultColor = new Color(1.0, 1.0, 1.0, 0.4);
  18. var defaultGlowColor = new Color(0.0, 1.0, 0.0, 0.05);
  19. var defaultBackgroundColor = new Color(0.0, 0.5, 0.0, 0.2);
  20. /**
  21. * An {@link ImageryProvider} that draws a wireframe grid on every tile with controllable background and glow.
  22. * May be useful for custom rendering effects or debugging terrain.
  23. *
  24. * @alias GridImageryProvider
  25. * @constructor
  26. *
  27. * @param {Object} [options] Object with the following properties:
  28. * @param {TilingScheme} [options.tilingScheme=new GeographicTilingScheme()] The tiling scheme for which to draw tiles.
  29. * @param {Number} [options.cells=8] The number of grids cells.
  30. * @param {Color} [options.color=Color(1.0, 1.0, 1.0, 0.4)] The color to draw grid lines.
  31. * @param {Color} [options.glowColor=Color(0.0, 1.0, 0.0, 0.05)] The color to draw glow for grid lines.
  32. * @param {Number} [options.glowWidth=6] The width of lines used for rendering the line glow effect.
  33. * @param {Color} [backgroundColor=Color(0.0, 0.5, 0.0, 0.2)] Background fill color.
  34. * @param {Number} [options.tileWidth=256] The width of the tile for level-of-detail selection purposes.
  35. * @param {Number} [options.tileHeight=256] The height of the tile for level-of-detail selection purposes.
  36. * @param {Number} [options.canvasSize=256] The size of the canvas used for rendering.
  37. */
  38. var GridImageryProvider = function GridImageryProvider(options) {
  39. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  40. this._tilingScheme = defined(options.tilingScheme) ? options.tilingScheme : new GeographicTilingScheme();
  41. this._cells = defaultValue(options.cells, 8);
  42. this._color = defaultValue(options.color, defaultColor);
  43. this._glowColor = defaultValue(options.glowColor, defaultGlowColor);
  44. this._glowWidth = defaultValue(options.glowWidth, 6);
  45. this._backgroundColor = defaultValue(options.backgroundColor, defaultBackgroundColor);
  46. this._errorEvent = new Event();
  47. this._tileWidth = defaultValue(options.tileWidth, 256);
  48. this._tileHeight = defaultValue(options.tileHeight, 256);
  49. // A little larger than tile size so lines are sharper
  50. // Note: can't be too much difference otherwise texture blowout
  51. this._canvasSize = defaultValue(options.canvasSize, 256);
  52. // We only need a single canvas since all tiles will be the same
  53. this._canvas = this._createGridCanvas();
  54. };
  55. defineProperties(GridImageryProvider.prototype, {
  56. /**
  57. * Gets the proxy used by this provider.
  58. * @memberof GridImageryProvider.prototype
  59. * @type {Proxy}
  60. * @readonly
  61. */
  62. proxy : {
  63. get : function() {
  64. return undefined;
  65. }
  66. },
  67. /**
  68. * Gets the width of each tile, in pixels. This function should
  69. * not be called before {@link GridImageryProvider#ready} returns true.
  70. * @memberof GridImageryProvider.prototype
  71. * @type {Number}
  72. * @readonly
  73. */
  74. tileWidth : {
  75. get : function() {
  76. return this._tileWidth;
  77. }
  78. },
  79. /**
  80. * Gets the height of each tile, in pixels. This function should
  81. * not be called before {@link GridImageryProvider#ready} returns true.
  82. * @memberof GridImageryProvider.prototype
  83. * @type {Number}
  84. * @readonly
  85. */
  86. tileHeight : {
  87. get : function() {
  88. return this._tileHeight;
  89. }
  90. },
  91. /**
  92. * Gets the maximum level-of-detail that can be requested. This function should
  93. * not be called before {@link GridImageryProvider#ready} returns true.
  94. * @memberof GridImageryProvider.prototype
  95. * @type {Number}
  96. * @readonly
  97. */
  98. maximumLevel : {
  99. get : function() {
  100. return undefined;
  101. }
  102. },
  103. /**
  104. * Gets the minimum level-of-detail that can be requested. This function should
  105. * not be called before {@link GridImageryProvider#ready} returns true.
  106. * @memberof GridImageryProvider.prototype
  107. * @type {Number}
  108. * @readonly
  109. */
  110. minimumLevel : {
  111. get : function() {
  112. return undefined;
  113. }
  114. },
  115. /**
  116. * Gets the tiling scheme used by this provider. This function should
  117. * not be called before {@link GridImageryProvider#ready} returns true.
  118. * @memberof GridImageryProvider.prototype
  119. * @type {TilingScheme}
  120. * @readonly
  121. */
  122. tilingScheme : {
  123. get : function() {
  124. return this._tilingScheme;
  125. }
  126. },
  127. /**
  128. * Gets the rectangle, in radians, of the imagery provided by this instance. This function should
  129. * not be called before {@link GridImageryProvider#ready} returns true.
  130. * @memberof GridImageryProvider.prototype
  131. * @type {Rectangle}
  132. * @readonly
  133. */
  134. rectangle : {
  135. get : function() {
  136. return this._tilingScheme.rectangle;
  137. }
  138. },
  139. /**
  140. * Gets the tile discard policy. If not undefined, the discard policy is responsible
  141. * for filtering out "missing" tiles via its shouldDiscardImage function. If this function
  142. * returns undefined, no tiles are filtered. This function should
  143. * not be called before {@link GridImageryProvider#ready} returns true.
  144. * @memberof GridImageryProvider.prototype
  145. * @type {TileDiscardPolicy}
  146. * @readonly
  147. */
  148. tileDiscardPolicy : {
  149. get : function() {
  150. return undefined;
  151. }
  152. },
  153. /**
  154. * Gets an event that is raised when the imagery provider encounters an asynchronous error. By subscribing
  155. * to the event, you will be notified of the error and can potentially recover from it. Event listeners
  156. * are passed an instance of {@link TileProviderError}.
  157. * @memberof GridImageryProvider.prototype
  158. * @type {Event}
  159. * @readonly
  160. */
  161. errorEvent : {
  162. get : function() {
  163. return this._errorEvent;
  164. }
  165. },
  166. /**
  167. * Gets a value indicating whether or not the provider is ready for use.
  168. * @memberof GridImageryProvider.prototype
  169. * @type {Boolean}
  170. * @readonly
  171. */
  172. ready : {
  173. get : function() {
  174. return true;
  175. }
  176. },
  177. /**
  178. * Gets the credit to display when this imagery provider is active. Typically this is used to credit
  179. * the source of the imagery. This function should not be called before {@link GridImageryProvider#ready} returns true.
  180. * @memberof GridImageryProvider.prototype
  181. * @type {Credit}
  182. * @readonly
  183. */
  184. credit : {
  185. get : function() {
  186. return undefined;
  187. }
  188. },
  189. /**
  190. * Gets a value indicating whether or not the images provided by this imagery provider
  191. * include an alpha channel. If this property is false, an alpha channel, if present, will
  192. * be ignored. If this property is true, any images without an alpha channel will be treated
  193. * as if their alpha is 1.0 everywhere. When this property is false, memory usage
  194. * and texture upload time are reduced.
  195. * @memberof GridImageryProvider.prototype
  196. * @type {Boolean}
  197. * @readonly
  198. */
  199. hasAlphaChannel : {
  200. get : function() {
  201. return true;
  202. }
  203. }
  204. });
  205. /**
  206. * Draws a grid of lines into a canvas.
  207. */
  208. GridImageryProvider.prototype._drawGrid = function(context) {
  209. var minPixel = 0;
  210. var maxPixel = this._canvasSize;
  211. for (var x = 0; x <= this._cells; ++x) {
  212. var nx = x / this._cells;
  213. var val = 1 + nx * (maxPixel - 1);
  214. context.moveTo(val, minPixel);
  215. context.lineTo(val, maxPixel);
  216. context.moveTo(minPixel, val);
  217. context.lineTo(maxPixel, val);
  218. }
  219. context.stroke();
  220. };
  221. /**
  222. * Render a grid into a canvas with background and glow
  223. */
  224. GridImageryProvider.prototype._createGridCanvas = function() {
  225. var canvas = document.createElement('canvas');
  226. canvas.width = this._canvasSize;
  227. canvas.height = this._canvasSize;
  228. var minPixel = 0;
  229. var maxPixel = this._canvasSize;
  230. var context = canvas.getContext('2d');
  231. // Fill the background
  232. var cssBackgroundColor = this._backgroundColor.toCssColorString();
  233. context.fillStyle = cssBackgroundColor;
  234. context.fillRect(minPixel, minPixel, maxPixel, maxPixel);
  235. // Glow for grid lines
  236. var cssGlowColor = this._glowColor.toCssColorString();
  237. context.strokeStyle = cssGlowColor;
  238. // Wide
  239. context.lineWidth = this._glowWidth;
  240. context.strokeRect(minPixel, minPixel, maxPixel, maxPixel);
  241. this._drawGrid(context);
  242. // Narrow
  243. context.lineWidth = this._glowWidth * 0.5;
  244. context.strokeRect(minPixel, minPixel, maxPixel, maxPixel);
  245. this._drawGrid(context);
  246. // Grid lines
  247. var cssColor = this._color.toCssColorString();
  248. // Border
  249. context.strokeStyle = cssColor;
  250. context.lineWidth = 2;
  251. context.strokeRect(minPixel, minPixel, maxPixel, maxPixel);
  252. // Inner
  253. context.lineWidth = 1;
  254. this._drawGrid(context);
  255. return canvas;
  256. };
  257. /**
  258. * Gets the credits to be displayed when a given tile is displayed.
  259. *
  260. * @param {Number} x The tile X coordinate.
  261. * @param {Number} y The tile Y coordinate.
  262. * @param {Number} level The tile level;
  263. * @returns {Credit[]} The credits to be displayed when the tile is displayed.
  264. *
  265. * @exception {DeveloperError} <code>getTileCredits</code> must not be called before the imagery provider is ready.
  266. */
  267. GridImageryProvider.prototype.getTileCredits = function(x, y, level) {
  268. return undefined;
  269. };
  270. /**
  271. * Requests the image for a given tile. This function should
  272. * not be called before {@link GridImageryProvider#ready} returns true.
  273. *
  274. * @param {Number} x The tile X coordinate.
  275. * @param {Number} y The tile Y coordinate.
  276. * @param {Number} level The tile level.
  277. * @returns {Promise} A promise for the image that will resolve when the image is available, or
  278. * undefined if there are too many active requests to the server, and the request
  279. * should be retried later. The resolved image may be either an
  280. * Image or a Canvas DOM object.
  281. */
  282. GridImageryProvider.prototype.requestImage = function(x, y, level) {
  283. return this._canvas;
  284. };
  285. /**
  286. * Picking features is not currently supported by this imagery provider, so this function simply returns
  287. * undefined.
  288. *
  289. * @param {Number} x The tile X coordinate.
  290. * @param {Number} y The tile Y coordinate.
  291. * @param {Number} level The tile level.
  292. * @param {Number} longitude The longitude at which to pick features.
  293. * @param {Number} latitude The latitude at which to pick features.
  294. * @return {Promise} A promise for the picked features that will resolve when the asynchronous
  295. * picking completes. The resolved value is an array of {@link ImageryLayerFeatureInfo}
  296. * instances. The array may be empty if no features are found at the given location.
  297. * It may also be undefined if picking is not supported.
  298. */
  299. GridImageryProvider.prototype.pickFeatures = function() {
  300. return undefined;
  301. };
  302. return GridImageryProvider;
  303. });