UNPKG

@cesium/engine

Version:

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin.

343 lines (312 loc) 11.1 kB
import Credit from "../Core/Credit.js"; import Frozen from "../Core/Frozen.js"; import defined from "../Core/defined.js"; import DeveloperError from "../Core/DeveloperError.js"; import Resource from "../Core/Resource.js"; import UrlTemplateImageryProvider from "./UrlTemplateImageryProvider.js"; const trailingSlashRegex = /\/$/; const defaultCredit = new Credit( '&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>', ); /** * @typedef {object} MapboxStyleImageryProvider.ConstructorOptions * * Initialization options for the MapboxStyleImageryProvider constructor * * @property {Resource|string} [url='https://api.mapbox.com/styles/v1/'] The Mapbox server url. * @property {string} [username='mapbox'] The username of the map account. * @property {string} styleId The Mapbox Style ID. * @property {string} accessToken The public access token for the imagery. * @property {number} [tilesize=512] The size of the image tiles. * @property {boolean} [scaleFactor] Determines if tiles are rendered at a @2x scale factor. * @property {Ellipsoid} [ellipsoid=Ellipsoid.default] The ellipsoid. If not specified, the default ellipsoid is used. * @property {number} [minimumLevel=0] The minimum level-of-detail supported by the imagery provider. Take care when specifying * this that the number of tiles at the minimum level is small, such as four or less. A larger number is likely * to result in rendering problems. * @property {number} [maximumLevel] The maximum level-of-detail supported by the imagery provider, or undefined if there is no limit. * @property {Rectangle} [rectangle=Rectangle.MAX_VALUE] The rectangle, in radians, covered by the image. * @property {Credit|string} [credit] A credit for the data source, which is displayed on the canvas. */ /** * Provides tiled imagery hosted by Mapbox. * * @alias MapboxStyleImageryProvider * @constructor * * @param {MapboxStyleImageryProvider.ConstructorOptions} options Object describing initialization options * * @example * // Mapbox style provider * const mapbox = new Cesium.MapboxStyleImageryProvider({ * styleId: 'streets-v11', * accessToken: 'thisIsMyAccessToken' * }); * * @see {@link https://docs.mapbox.com/api/maps/#styles} * @see {@link https://docs.mapbox.com/api/#access-tokens-and-token-scopes} */ function MapboxStyleImageryProvider(options) { options = options ?? Frozen.EMPTY_OBJECT; const styleId = options.styleId; //>>includeStart('debug', pragmas.debug); if (!defined(styleId)) { throw new DeveloperError("options.styleId is required."); } //>>includeEnd('debug'); const accessToken = options.accessToken; //>>includeStart('debug', pragmas.debug); if (!defined(accessToken)) { throw new DeveloperError("options.accessToken is required."); } //>>includeEnd('debug'); this._defaultAlpha = undefined; this._defaultNightAlpha = undefined; this._defaultDayAlpha = undefined; this._defaultBrightness = undefined; this._defaultContrast = undefined; this._defaultHue = undefined; this._defaultSaturation = undefined; this._defaultGamma = undefined; this._defaultMinificationFilter = undefined; this._defaultMagnificationFilter = undefined; const resource = Resource.createIfNeeded( options.url ?? "https://api.mapbox.com/styles/v1/", ); this._styleId = styleId; this._accessToken = accessToken; const tilesize = options.tilesize ?? 512; this._tilesize = tilesize; const username = options.username ?? "mapbox"; this._username = username; const scaleFactor = defined(options.scaleFactor) ? "@2x" : ""; let templateUrl = resource.getUrlComponent(); if (!trailingSlashRegex.test(templateUrl)) { templateUrl += "/"; } templateUrl += `${this._username}/${styleId}/tiles/${this._tilesize}/{z}/{x}/{y}${scaleFactor}`; resource.url = templateUrl; resource.setQueryParameters({ access_token: accessToken, }); let credit; if (defined(options.credit)) { credit = options.credit; if (typeof credit === "string") { credit = new Credit(credit); } } else { credit = defaultCredit; } this._resource = resource; this._imageryProvider = new UrlTemplateImageryProvider({ url: resource, credit: credit, ellipsoid: options.ellipsoid, minimumLevel: options.minimumLevel, maximumLevel: options.maximumLevel, rectangle: options.rectangle, }); } Object.defineProperties(MapboxStyleImageryProvider.prototype, { /** * Gets the URL of the Mapbox server. * @memberof MapboxStyleImageryProvider.prototype * @type {string} * @readonly */ url: { get: function () { return this._imageryProvider.url; }, }, /** * Gets the rectangle, in radians, of the imagery provided by the instance. * @memberof MapboxStyleImageryProvider.prototype * @type {Rectangle} * @readonly */ rectangle: { get: function () { return this._imageryProvider.rectangle; }, }, /** * Gets the width of each tile, in pixels. * @memberof MapboxStyleImageryProvider.prototype * @type {number} * @readonly */ tileWidth: { get: function () { return this._imageryProvider.tileWidth; }, }, /** * Gets the height of each tile, in pixels. * @memberof MapboxStyleImageryProvider.prototype * @type {number} * @readonly */ tileHeight: { get: function () { return this._imageryProvider.tileHeight; }, }, /** * Gets the maximum level-of-detail that can be requested. * @memberof MapboxStyleImageryProvider.prototype * @type {number|undefined} * @readonly */ maximumLevel: { get: function () { return this._imageryProvider.maximumLevel; }, }, /** * Gets the minimum level-of-detail that can be requested. Generally, * a minimum level should only be used when the rectangle of the imagery is small * enough that the number of tiles at the minimum level is small. An imagery * provider with more than a few tiles at the minimum level will lead to * rendering problems. * @memberof MapboxStyleImageryProvider.prototype * @type {number} * @readonly */ minimumLevel: { get: function () { return this._imageryProvider.minimumLevel; }, }, /** * Gets the tiling scheme used by the provider. * @memberof MapboxStyleImageryProvider.prototype * @type {TilingScheme} * @readonly */ tilingScheme: { get: function () { return this._imageryProvider.tilingScheme; }, }, /** * Gets the tile discard policy. If not undefined, the discard policy is responsible * for filtering out "missing" tiles via its shouldDiscardImage function. If this function * returns undefined, no tiles are filtered. * @memberof MapboxStyleImageryProvider.prototype * @type {TileDiscardPolicy} * @readonly */ tileDiscardPolicy: { get: function () { return this._imageryProvider.tileDiscardPolicy; }, }, /** * Gets an event that is raised when the imagery provider encounters an asynchronous error.. By subscribing * to the event, you will be notified of the error and can potentially recover from it. Event listeners * are passed an instance of {@link TileProviderError}. * @memberof MapboxStyleImageryProvider.prototype * @type {Event} * @readonly */ errorEvent: { get: function () { return this._imageryProvider.errorEvent; }, }, /** * Gets the credit to display when this imagery provider is active. Typically this is used to credit * the source of the imagery. * @memberof MapboxStyleImageryProvider.prototype * @type {Credit} * @readonly */ credit: { get: function () { return this._imageryProvider.credit; }, }, /** * Gets the proxy used by this provider. * @memberof MapboxStyleImageryProvider.prototype * @type {Proxy} * @readonly */ proxy: { get: function () { return this._imageryProvider.proxy; }, }, /** * Gets a value indicating whether or not the images provided by this imagery provider * include an alpha channel. If this property is false, an alpha channel, if present, will * be ignored. If this property is true, any images without an alpha channel will be treated * as if their alpha is 1.0 everywhere. When this property is false, memory usage * and texture upload time are reduced. * @memberof MapboxStyleImageryProvider.prototype * @type {boolean} * @readonly */ hasAlphaChannel: { get: function () { return this._imageryProvider.hasAlphaChannel; }, }, }); /** * Gets the credits to be displayed when a given tile is displayed. * * @param {number} x The tile X coordinate. * @param {number} y The tile Y coordinate. * @param {number} level The tile level; * @returns {Credit[]} The credits to be displayed when the tile is displayed. */ MapboxStyleImageryProvider.prototype.getTileCredits = function (x, y, level) { return undefined; }; /** * Requests the image for a given tile. * * @param {number} x The tile X coordinate. * @param {number} y The tile Y coordinate. * @param {number} level The tile level. * @param {Request} [request] The request object. Intended for internal use only. * @returns {Promise<ImageryTypes>|undefined} A promise for the image that will resolve when the image is available, or * undefined if there are too many active requests to the server, and the request should be retried later. */ MapboxStyleImageryProvider.prototype.requestImage = function ( x, y, level, request, ) { return this._imageryProvider.requestImage(x, y, level, request); }; /** * Asynchronously determines what features, if any, are located at a given longitude and latitude within * a tile. This function is optional, so it may not exist on all ImageryProviders. * * * @param {number} x The tile X coordinate. * @param {number} y The tile Y coordinate. * @param {number} level The tile level. * @param {number} longitude The longitude at which to pick features. * @param {number} latitude The latitude at which to pick features. * @return {Promise<ImageryLayerFeatureInfo[]>|undefined} A promise for the picked features that will resolve when the asynchronous * picking completes. The resolved value is an array of {@link ImageryLayerFeatureInfo} * instances. The array may be empty if no features are found at the given location. * It may also be undefined if picking is not supported. */ MapboxStyleImageryProvider.prototype.pickFeatures = function ( x, y, level, longitude, latitude, ) { return this._imageryProvider.pickFeatures(x, y, level, longitude, latitude); }; // Exposed for tests MapboxStyleImageryProvider._defaultCredit = defaultCredit; export default MapboxStyleImageryProvider;