MapboxImageryProvider.js 14 KB

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