TypeScript TileLayer.include方法代碼示例

L.TileLayer.include({

	// Overwrites L.TileLayer.prototype.createTile
	createTile(this: CachedTileLayer, coords: TileCoords, done: () => void) {
		const tile = document.createElement('img');

		tile.onerror = L.Util.bind((this._tileOnError as any), this, done, tile);

		if (this.options.crossOrigin) {
			tile.crossOrigin = '';
		}

		/*
			Alt tag is *set to empty string to keep screen readers from reading URL and for compliance reasons
			http://www.w3.org/TR/WCAG20-TECHS/H67
			*/
		tile.alt = '';

		const tileUrl = this.getTileUrl(coords);

		if (this.options.useCache && this._canvas) {
			// TODO - can I remove: revs_info: true here?
			this._db.get(tileUrl, {revs_info: true}, this._onCacheLookup(tile, tileUrl, done));
		} else {
			// Fall back to standard behaviour
			tile.onload = L.Util.bind((this._tileOnLoad as any), this, done, tile);
		}

		tile.src = tileUrl;
		return tile;
	},

	// Returns a callback (closure over tile/key/originalSrc) to be run when the DB
	//   backend is finished with a fetch operation.
	_onCacheLookup(this: CachedTileLayer, tile: HTMLImageElement, tileUrl: string, done: () => void) {
		return (_err: any, data: any) => {
			if (data) {
				this.fire('tilecachehit', {
					tile,
					url: tileUrl
				});
				if (Date.now() > data.timestamp + this.options.cacheMaxAge && !this.options.useOnlyCache) {
					// Tile is too old, try to refresh it
					console.log('Tile is too old: ', tileUrl);

					if (this.options.saveToCache) {
						tile.onload = L.Util.bind((this._saveTile as any), this, tile, tileUrl, false, done);
					}
					tile.crossOrigin = 'Anonymous';
					tile.src = tileUrl;
					tile.onerror = function(_ev: any) {
						// If the tile is too old but couldn't be fetched from the network,
						//   serve the one still in cache.
						(this as HTMLImageElement).src = data.dataUrl;
					};
				} else {
					// Serve tile from cached data
					// console.log('Tile is cached: ', tileUrl);
					tile.onload = L.Util.bind((this._tileOnLoad as any), this, done, tile);
					tile.src = data.dataUrl;    // data.dataUrl is already a base64-encoded PNG image.
				}
			} else {
				this.fire('tilecachemiss', {
					tile,
					url: tileUrl
				});
				if (this.options.useOnlyCache) {
					// Offline, not cached
					// console.log('Tile not in cache', tileUrl);
					tile.onload = L.Util.falseFn;
					tile.src = L.Util.emptyImageUrl;
				} else {
					//Online, not cached, request the tile normally
					// console.log('Requesting tile normally', tileUrl);
					if (this.options.saveToCache) {
						tile.onload = L.Util.bind((this._saveTile as any), this, tile, tileUrl, null, done);
					} else {
						tile.onload = L.Util.bind((this._tileOnLoad as any), this, done, tile);
					}
					tile.crossOrigin = 'Anonymous';
					tile.src = tileUrl;
				}
			}
		};
	},

	// Returns an event handler (closure over DB key), which runs
	//   when the tile (which is an <img>) is ready.
	// The handler will delete the document from pouchDB if an existing revision is passed.
	//   This will keep just the latest valid copy of the image in the cache.
	_saveTile(this: CachedTileLayer, tile: any, tileUrl: string, _existingRevision: any, done: () => void) {
		if (this._canvas === null) {
			return;
		}
		this._canvas.width  = tile.naturalWidth  || tile.width;
		this._canvas.height = tile.naturalHeight || tile.height;

		const context = this._canvas.getContext('2d');
		context.drawImage(tile, 0, 0);

//.........這裏部分代碼省略.........