MapboxImageryProvider.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. import Credit from "../Core/Credit.js";
  2. import defaultValue from "../Core/defaultValue.js";
  3. import defined from "../Core/defined.js";
  4. import DeveloperError from "../Core/DeveloperError.js";
  5. import Resource from "../Core/Resource.js";
  6. import UrlTemplateImageryProvider from "./UrlTemplateImageryProvider.js";
  7. const trailingSlashRegex = /\/$/;
  8. const defaultCredit = new Credit(
  9. '&copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/">Improve this map</a></strong>'
  10. );
  11. /**
  12. * @typedef {Object} MapboxImageryProvider.ConstructorOptions
  13. *
  14. * Initialization options for the MapboxImageryProvider constructor
  15. *
  16. * @property {String} [url='https://api.mapbox.com/v4/'] The Mapbox server url.
  17. * @property {String} mapId The Mapbox Map ID.
  18. * @property {String} accessToken The public access token for the imagery.
  19. * @property {String} [format='png'] The format of the image request.
  20. * @property {Ellipsoid} [ellipsoid] The ellipsoid. If not specified, the WGS84 ellipsoid is used.
  21. * @property {Number} [minimumLevel=0] The minimum level-of-detail supported by the imagery provider. Take care when specifying
  22. * this that the number of tiles at the minimum level is small, such as four or less. A larger number is likely
  23. * to result in rendering problems.
  24. * @property {Number} [maximumLevel] The maximum level-of-detail supported by the imagery provider, or undefined if there is no limit.
  25. * @property {Rectangle} [rectangle=Rectangle.MAX_VALUE] The rectangle, in radians, covered by the image.
  26. * @property {Credit|String} [credit] A credit for the data source, which is displayed on the canvas.
  27. */
  28. /**
  29. * Provides tiled imagery hosted by Mapbox.
  30. *
  31. * @alias MapboxImageryProvider
  32. * @constructor
  33. *
  34. * @param {MapboxImageryProvider.ConstructorOptions} options Object describing initialization options
  35. *
  36. * @example
  37. * // Mapbox tile provider
  38. * const mapbox = new Cesium.MapboxImageryProvider({
  39. * mapId: 'mapbox.streets',
  40. * accessToken: 'thisIsMyAccessToken'
  41. * });
  42. *
  43. * @see {@link https://www.mapbox.com/developers/api/maps/#tiles}
  44. * @see {@link https://www.mapbox.com/developers/api/#access-tokens}
  45. */
  46. function MapboxImageryProvider(options) {
  47. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  48. const mapId = options.mapId;
  49. //>>includeStart('debug', pragmas.debug);
  50. if (!defined(mapId)) {
  51. throw new DeveloperError("options.mapId is required.");
  52. }
  53. //>>includeEnd('debug');
  54. const accessToken = options.accessToken;
  55. //>>includeStart('debug', pragmas.debug);
  56. if (!defined(accessToken)) {
  57. throw new DeveloperError("options.accessToken is required.");
  58. }
  59. //>>includeEnd('debug');
  60. /**
  61. * The default alpha blending value of this provider, with 0.0 representing fully transparent and
  62. * 1.0 representing fully opaque.
  63. *
  64. * @type {Number|undefined}
  65. * @default undefined
  66. */
  67. this.defaultAlpha = undefined;
  68. /**
  69. * The default alpha blending value on the night side of the globe of this provider, with 0.0 representing fully transparent and
  70. * 1.0 representing fully opaque.
  71. *
  72. * @type {Number|undefined}
  73. * @default undefined
  74. */
  75. this.defaultNightAlpha = undefined;
  76. /**
  77. * The default alpha blending value on the day side of the globe of this provider, with 0.0 representing fully transparent and
  78. * 1.0 representing fully opaque.
  79. *
  80. * @type {Number|undefined}
  81. * @default undefined
  82. */
  83. this.defaultDayAlpha = undefined;
  84. /**
  85. * The default brightness of this provider. 1.0 uses the unmodified imagery color. Less than 1.0
  86. * makes the imagery darker while greater than 1.0 makes it brighter.
  87. *
  88. * @type {Number|undefined}
  89. * @default undefined
  90. */
  91. this.defaultBrightness = undefined;
  92. /**
  93. * The default contrast of this provider. 1.0 uses the unmodified imagery color. Less than 1.0 reduces
  94. * the contrast while greater than 1.0 increases it.
  95. *
  96. * @type {Number|undefined}
  97. * @default undefined
  98. */
  99. this.defaultContrast = undefined;
  100. /**
  101. * The default hue of this provider in radians. 0.0 uses the unmodified imagery color.
  102. *
  103. * @type {Number|undefined}
  104. * @default undefined
  105. */
  106. this.defaultHue = undefined;
  107. /**
  108. * The default saturation of this provider. 1.0 uses the unmodified imagery color. Less than 1.0 reduces the
  109. * saturation while greater than 1.0 increases it.
  110. *
  111. * @type {Number|undefined}
  112. * @default undefined
  113. */
  114. this.defaultSaturation = undefined;
  115. /**
  116. * The default gamma correction to apply to this provider. 1.0 uses the unmodified imagery color.
  117. *
  118. * @type {Number|undefined}
  119. * @default undefined
  120. */
  121. this.defaultGamma = undefined;
  122. /**
  123. * The default texture minification filter to apply to this provider.
  124. *
  125. * @type {TextureMinificationFilter}
  126. * @default undefined
  127. */
  128. this.defaultMinificationFilter = undefined;
  129. /**
  130. * The default texture magnification filter to apply to this provider.
  131. *
  132. * @type {TextureMagnificationFilter}
  133. * @default undefined
  134. */
  135. this.defaultMagnificationFilter = undefined;
  136. const resource = Resource.createIfNeeded(
  137. defaultValue(options.url, "https://{s}.tiles.mapbox.com/v4/")
  138. );
  139. this._mapId = mapId;
  140. this._accessToken = accessToken;
  141. let format = defaultValue(options.format, "png");
  142. if (!/\./.test(format)) {
  143. format = `.${format}`;
  144. }
  145. this._format = format;
  146. let templateUrl = resource.getUrlComponent();
  147. if (!trailingSlashRegex.test(templateUrl)) {
  148. templateUrl += "/";
  149. }
  150. templateUrl += `${mapId}/{z}/{x}/{y}${this._format}`;
  151. resource.url = templateUrl;
  152. resource.setQueryParameters({
  153. access_token: accessToken,
  154. });
  155. let credit;
  156. if (defined(options.credit)) {
  157. credit = options.credit;
  158. if (typeof credit === "string") {
  159. credit = new Credit(credit);
  160. }
  161. } else {
  162. credit = defaultCredit;
  163. }
  164. this._resource = resource;
  165. this._imageryProvider = new UrlTemplateImageryProvider({
  166. url: resource,
  167. credit: credit,
  168. ellipsoid: options.ellipsoid,
  169. minimumLevel: options.minimumLevel,
  170. maximumLevel: options.maximumLevel,
  171. rectangle: options.rectangle,
  172. });
  173. }
  174. Object.defineProperties(MapboxImageryProvider.prototype, {
  175. /**
  176. * Gets the URL of the Mapbox server.
  177. * @memberof MapboxImageryProvider.prototype
  178. * @type {String}
  179. * @readonly
  180. */
  181. url: {
  182. get: function () {
  183. return this._imageryProvider.url;
  184. },
  185. },
  186. /**
  187. * Gets a value indicating whether or not the provider is ready for use.
  188. * @memberof MapboxImageryProvider.prototype
  189. * @type {Boolean}
  190. * @readonly
  191. */
  192. ready: {
  193. get: function () {
  194. return this._imageryProvider.ready;
  195. },
  196. },
  197. /**
  198. * Gets a promise that resolves to true when the provider is ready for use.
  199. * @memberof MapboxImageryProvider.prototype
  200. * @type {Promise.<Boolean>}
  201. * @readonly
  202. */
  203. readyPromise: {
  204. get: function () {
  205. return this._imageryProvider.readyPromise;
  206. },
  207. },
  208. /**
  209. * Gets the rectangle, in radians, of the imagery provided by the instance. This function should
  210. * not be called before {@link MapboxImageryProvider#ready} returns true.
  211. * @memberof MapboxImageryProvider.prototype
  212. * @type {Rectangle}
  213. * @readonly
  214. */
  215. rectangle: {
  216. get: function () {
  217. return this._imageryProvider.rectangle;
  218. },
  219. },
  220. /**
  221. * Gets the width of each tile, in pixels. This function should
  222. * not be called before {@link MapboxImageryProvider#ready} returns true.
  223. * @memberof MapboxImageryProvider.prototype
  224. * @type {Number}
  225. * @readonly
  226. */
  227. tileWidth: {
  228. get: function () {
  229. return this._imageryProvider.tileWidth;
  230. },
  231. },
  232. /**
  233. * Gets the height of each tile, in pixels. This function should
  234. * not be called before {@link MapboxImageryProvider#ready} returns true.
  235. * @memberof MapboxImageryProvider.prototype
  236. * @type {Number}
  237. * @readonly
  238. */
  239. tileHeight: {
  240. get: function () {
  241. return this._imageryProvider.tileHeight;
  242. },
  243. },
  244. /**
  245. * Gets the maximum level-of-detail that can be requested. This function should
  246. * not be called before {@link MapboxImageryProvider#ready} returns true.
  247. * @memberof MapboxImageryProvider.prototype
  248. * @type {Number|undefined}
  249. * @readonly
  250. */
  251. maximumLevel: {
  252. get: function () {
  253. return this._imageryProvider.maximumLevel;
  254. },
  255. },
  256. /**
  257. * Gets the minimum level-of-detail that can be requested. This function should
  258. * not be called before {@link MapboxImageryProvider#ready} returns true. Generally,
  259. * a minimum level should only be used when the rectangle of the imagery is small
  260. * enough that the number of tiles at the minimum level is small. An imagery
  261. * provider with more than a few tiles at the minimum level will lead to
  262. * rendering problems.
  263. * @memberof MapboxImageryProvider.prototype
  264. * @type {Number}
  265. * @readonly
  266. */
  267. minimumLevel: {
  268. get: function () {
  269. return this._imageryProvider.minimumLevel;
  270. },
  271. },
  272. /**
  273. * Gets the tiling scheme used by the provider. This function should
  274. * not be called before {@link MapboxImageryProvider#ready} returns true.
  275. * @memberof MapboxImageryProvider.prototype
  276. * @type {TilingScheme}
  277. * @readonly
  278. */
  279. tilingScheme: {
  280. get: function () {
  281. return this._imageryProvider.tilingScheme;
  282. },
  283. },
  284. /**
  285. * Gets the tile discard policy. If not undefined, the discard policy is responsible
  286. * for filtering out "missing" tiles via its shouldDiscardImage function. If this function
  287. * returns undefined, no tiles are filtered. This function should
  288. * not be called before {@link MapboxImageryProvider#ready} returns true.
  289. * @memberof MapboxImageryProvider.prototype
  290. * @type {TileDiscardPolicy}
  291. * @readonly
  292. */
  293. tileDiscardPolicy: {
  294. get: function () {
  295. return this._imageryProvider.tileDiscardPolicy;
  296. },
  297. },
  298. /**
  299. * Gets an event that is raised when the imagery provider encounters an asynchronous error.. By subscribing
  300. * to the event, you will be notified of the error and can potentially recover from it. Event listeners
  301. * are passed an instance of {@link TileProviderError}.
  302. * @memberof MapboxImageryProvider.prototype
  303. * @type {Event}
  304. * @readonly
  305. */
  306. errorEvent: {
  307. get: function () {
  308. return this._imageryProvider.errorEvent;
  309. },
  310. },
  311. /**
  312. * Gets the credit to display when this imagery provider is active. Typically this is used to credit
  313. * the source of the imagery. This function should
  314. * not be called before {@link MapboxImageryProvider#ready} returns true.
  315. * @memberof MapboxImageryProvider.prototype
  316. * @type {Credit}
  317. * @readonly
  318. */
  319. credit: {
  320. get: function () {
  321. return this._imageryProvider.credit;
  322. },
  323. },
  324. /**
  325. * Gets the proxy used by this provider.
  326. * @memberof MapboxImageryProvider.prototype
  327. * @type {Proxy}
  328. * @readonly
  329. */
  330. proxy: {
  331. get: function () {
  332. return this._imageryProvider.proxy;
  333. },
  334. },
  335. /**
  336. * Gets a value indicating whether or not the images provided by this imagery provider
  337. * include an alpha channel. If this property is false, an alpha channel, if present, will
  338. * be ignored. If this property is true, any images without an alpha channel will be treated
  339. * as if their alpha is 1.0 everywhere. When this property is false, memory usage
  340. * and texture upload time are reduced.
  341. * @memberof MapboxImageryProvider.prototype
  342. * @type {Boolean}
  343. * @readonly
  344. */
  345. hasAlphaChannel: {
  346. get: function () {
  347. return this._imageryProvider.hasAlphaChannel;
  348. },
  349. },
  350. });
  351. /**
  352. * Gets the credits to be displayed when a given tile is displayed.
  353. *
  354. * @param {Number} x The tile X coordinate.
  355. * @param {Number} y The tile Y coordinate.
  356. * @param {Number} level The tile level;
  357. * @returns {Credit[]} The credits to be displayed when the tile is displayed.
  358. *
  359. * @exception {DeveloperError} <code>getTileCredits</code> must not be called before the imagery provider is ready.
  360. */
  361. MapboxImageryProvider.prototype.getTileCredits = function (x, y, level) {
  362. return undefined;
  363. };
  364. /**
  365. * Requests the image for a given tile. This function should
  366. * not be called before {@link MapboxImageryProvider#ready} returns true.
  367. *
  368. * @param {Number} x The tile X coordinate.
  369. * @param {Number} y The tile Y coordinate.
  370. * @param {Number} level The tile level.
  371. * @param {Request} [request] The request object. Intended for internal use only.
  372. * @returns {Promise.<ImageryTypes>|undefined} A promise for the image that will resolve when the image is available, or
  373. * undefined if there are too many active requests to the server, and the request should be retried later.
  374. *
  375. * @exception {DeveloperError} <code>requestImage</code> must not be called before the imagery provider is ready.
  376. */
  377. MapboxImageryProvider.prototype.requestImage = function (x, y, level, request) {
  378. return this._imageryProvider.requestImage(x, y, level, request);
  379. };
  380. /**
  381. * Asynchronously determines what features, if any, are located at a given longitude and latitude within
  382. * a tile. This function should not be called before {@link MapboxImageryProvider#ready} returns true.
  383. * This function is optional, so it may not exist on all ImageryProviders.
  384. *
  385. *
  386. * @param {Number} x The tile X coordinate.
  387. * @param {Number} y The tile Y coordinate.
  388. * @param {Number} level The tile level.
  389. * @param {Number} longitude The longitude at which to pick features.
  390. * @param {Number} latitude The latitude at which to pick features.
  391. * @return {Promise.<ImageryLayerFeatureInfo[]>|undefined} A promise for the picked features that will resolve when the asynchronous
  392. * picking completes. The resolved value is an array of {@link ImageryLayerFeatureInfo}
  393. * instances. The array may be empty if no features are found at the given location.
  394. * It may also be undefined if picking is not supported.
  395. *
  396. * @exception {DeveloperError} <code>pickFeatures</code> must not be called before the imagery provider is ready.
  397. */
  398. MapboxImageryProvider.prototype.pickFeatures = function (
  399. x,
  400. y,
  401. level,
  402. longitude,
  403. latitude
  404. ) {
  405. return this._imageryProvider.pickFeatures(x, y, level, longitude, latitude);
  406. };
  407. // Exposed for tests
  408. MapboxImageryProvider._defaultCredit = defaultCredit;
  409. export default MapboxImageryProvider;