智慧水务管理系统 - 精河县供水工程综合管理平台

GridImageryProvider.js 9.7KB

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