MapboxStyleImageryProvider.js 15 KB

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