Class TiledImageSource

An image source powered by OpenLayers to load tiled images. Supports all subclasses of the OpenLayers TileSource.

If the tiles of the source are in a format that is not supported directly by the browser, i.e not JPG/PNG/WebP, then you must pass a decoder with the format constructor option.

To filter out no-data pixels, you may pass the noDataValue option in the constructor.

Example

// To create a source based on the Stamen OpenLayers source, with the 'toner' style.
const source = new TiledImageSource({
     source: new Stamen({ layer: 'toner' })
});

// To create a WMS source that downloads TIFF images, eliminating all pixels that have the
// value -9999 and replacing them with transparent pixels.
const source = new TiledImageSource({
     source: new TileWMS({
         url: 'http://example.com/wms',
         params: {
             LAYERS: 'theLayer',
             FORMAT: 'image/tiff',
         },
         projection: 'EPSG:3946',
         crossOrigin: 'anonymous',
         version: '1.3.0',
     }),
     format: new GeoTIFFFormat(),
     noDataValue: -9999,
});

Hierarchy

ImageSource
- TiledImageSource
  - WmtsSource
  - WmsSource

Constructors

constructor

new TiledImageSource(options): TiledImageSource
Parameters
- options: TiledImageSourceOptions
  
  The options.
Returns TiledImageSource
Overrides ImageSource.constructor
- Defined in sources/TiledImageSource.ts:105

Properties

`Private` `Readonly` _downloader

_downloader: default

`Private` `Readonly` _getTileUrl

_getTileUrl: ((coord, _, proj) => string)

Type declaration

- (coord, _, proj): string
- Parameters
  - coord: TileCoord
  - _: number
  - proj: Projection
  Returns string

`Private` `Readonly` _sourceExtent

_sourceExtent: Extent

`Private` `Readonly` _tileGrid

_tileGrid: TileGrid

`Readonly` containsFn

containsFn: CustomContainsFn

datatype

datatype: TextureDataType

Gets the datatype of images generated by this source.

`Readonly` flipY

flipY: boolean

Gets whether images generated from this source should be flipped vertically.

`Readonly` format

format: ImageFormat

`Readonly` isImageSource

isImageSource: boolean = true

`Readonly` isTiledImageSource

isTiledImageSource: boolean = true

`Readonly` noDataValue

noDataValue: number

`Readonly` olprojection

olprojection: Projection

`Readonly` source

source: UrlTile

type

type: string

version

version: number

Accessors

colorSpace

get colorSpace(): ColorSpace
Gets the color space of the textures generated by this source.

Returns ColorSpace
Inherited from ImageSource.colorSpace
- Defined in sources/ImageSource.ts:147

Methods

addEventListener

addEventListener<T>(type, listener): void
Adds a listener to an event type.
Type Parameters
- T extends "updated"
Parameters
- type: T
  
  The type of event to listen to.
- listener: EventListener<ImageSourceEvents[T], T, TiledImageSource>
  
  The function that gets called when the event is fired.
Returns void
Inherited from ImageSource.addEventListener
- Defined in ../node_modules/@types/three/src/core/EventDispatcher.d.ts:52
addEventListener<T>(type, listener): void
Type Parameters
- T extends string
Parameters
- type: T
- listener: EventListener<{}, T, TiledImageSource>
Returns void
Inherited from ImageSource.addEventListener
- Defined in ../node_modules/@types/three/src/core/EventDispatcher.d.ts:56

adjustExtentAndPixelSize

adjustExtentAndPixelSize(requestExtent, requestWidth, requestHeight, margin?): {
    extent: Extent;
    height: number;
    width: number;
}
Returns an adjusted extent, width and height so that request pixels are aligned with source pixels, and requests do not oversample the source.
Parameters
- requestExtent: Extent
  
  The request extent.
- requestWidth: number
  
  The width, in pixels, of the request extent.
- requestHeight: number
  
  The height, in pixels, of the request extent.
- margin: number = 0
  
  The margin, in pixels, around the initial extent.
Returns {
    extent: Extent;
    height: number;
    width: number;
}
The adjusted parameters.
- extent: Extent
- height: number
- width: number
Inherited from ImageSource.adjustExtentAndPixelSize
- Defined in sources/ImageSource.ts:169

contains

contains(extent): boolean
Gets whether this source contains the specified extent. If a custom contains function is provided, it will be used. Otherwise, intersects is used.

This method is mainly used to discard non-relevant requests (i.e don't process regions that are not relevant to this source).
Parameters
- extent: Extent
  
  The extent to test.
Returns boolean
Inherited from ImageSource.contains
- Defined in sources/ImageSource.ts:214

dispatchEvent

dispatchEvent<T>(event): void
Fire an event type.
Type Parameters
- T extends "updated"
Parameters
- event: BaseEvent<T> & ImageSourceEvents[T]
  
  The event that gets fired.
Returns void
Inherited from ImageSource.dispatchEvent
- Defined in ../node_modules/@types/three/src/core/EventDispatcher.d.ts:84

dispose

dispose(): void
Disposes unmanaged resources of this source.

Returns void
Inherited from ImageSource.dispose
- Defined in sources/ImageSource.ts:269

`Private` fetchData

fetchData(url, signal): Promise<Blob>
Parameters
- url: string
- signal: AbortSignal
Returns Promise<Blob>
- Defined in sources/TiledImageSource.ts:221

getCrs

getCrs(): string
Returns the CRS of this source.

Returns string
The CRS.
Overrides ImageSource.getCrs
- Defined in sources/TiledImageSource.ts:138

getExtent

getExtent(): Extent
Returns the extent of this source expressed in the CRS of the source.

Returns Extent
The extent of the source.
Overrides ImageSource.getExtent
- Defined in sources/TiledImageSource.ts:134

getImages

getImages(options): {
id: string;
request: (() => Promise<ImageResult>);
}[]
Gets the images for the specified extent and pixel size.
Parameters
- options: GetImageOptions
  
  The options.
Returns {
id: string;
request: (() => Promise<ImageResult>);
}[]
An array containing the functions to generate the images asynchronously.
Overrides ImageSource.getImages
- Defined in sources/TiledImageSource.ts:192

`Private` getZoomLevel

getZoomLevel(extent, size): number
Selects the best zoom level given the provided image size and extent.
Parameters
- extent: Extent
  
  The target extent.
- size: number
  
  The size in pixels of the target extent.
Returns number
The ideal zoom level for this particular extent.
- Defined in sources/TiledImageSource.ts:149

hasEventListener

hasEventListener<T>(type, listener): boolean
Checks if listener is added to an event type.
Type Parameters
- T extends "updated"
Parameters
- type: T
  
  The type of event to listen to.
- listener: EventListener<ImageSourceEvents[T], T, TiledImageSource>
  
  The function that gets called when the event is fired.
Returns boolean
Inherited from ImageSource.hasEventListener
- Defined in ../node_modules/@types/three/src/core/EventDispatcher.d.ts:63
hasEventListener<T>(type, listener): boolean
Type Parameters
- T extends string
Parameters
- type: T
- listener: EventListener<{}, T, TiledImageSource>
Returns boolean
Inherited from ImageSource.hasEventListener
- Defined in ../node_modules/@types/three/src/core/EventDispatcher.d.ts:67

initialize

initialize(options): Promise<void>
Initializes the source.
Parameters
- options: {
  targetProjection: string;
  }
  
  Options.
  - targetProjection: string
    
    The target projection. Only useful for sources that are able to reproject their data on the fly (typically vector sources).
Returns Promise<void>
A promise that resolves when the source is initialized.
Inherited from ImageSource.initialize
- Defined in sources/ImageSource.ts:248

intersects

intersects(extent): boolean
Test the intersection between the specified extent and this source's extent. This method may be overriden to perform special logic.
Parameters
- extent: Extent
  
  The extent to test.
Returns boolean
true if the extent and this source extent intersects, false otherwise.
Inherited from ImageSource.intersects
- Defined in sources/ImageSource.ts:231

`Private` loadTile

loadTile(id, url, extent, createDataTexture, signal): Promise<ImageResult>
Loads the tile once and returns a reusable promise containing the tile texture.
Parameters
- id: string
  
  The id of the tile.
- url: string
  
  The URL of the tile.
- extent: Extent
  
  The extent of the tile.
- createDataTexture: boolean
  
  Create readable textures.
- signal: AbortSignal
Returns Promise<ImageResult>
The tile texture, or null if there is no data.
- Defined in sources/TiledImageSource.ts:253

`Private` loadTiles

loadTiles(tileRange, crs, zoom, createDataTexture, signal): {
id: string;
request: (() => Promise<ImageResult>);
}[]
Loads all tiles in the specified tile range.
Parameters
- tileRange: TileRange
  
  The tile range.
- crs: string
  
  The CRS of the extent.
- zoom: number
  
  The zoom level.
- createDataTexture: boolean
  
  Creates readable textures.
- signal: AbortSignal
Returns {
id: string;
request: (() => Promise<ImageResult>);
}[]
- Defined in sources/TiledImageSource.ts:337

removeEventListener

removeEventListener<T>(type, listener): void
Removes a listener from an event type.
Type Parameters
- T extends "updated"
Parameters
- type: T
  
  The type of the listener that gets removed.
- listener: EventListener<ImageSourceEvents[T], T, TiledImageSource>
  
  The listener function that gets removed.
Returns void
Inherited from ImageSource.removeEventListener
- Defined in ../node_modules/@types/three/src/core/EventDispatcher.d.ts:74
removeEventListener<T>(type, listener): void
Type Parameters
- T extends string
Parameters
- type: T
- listener: EventListener<{}, T, TiledImageSource>
Returns void
Inherited from ImageSource.removeEventListener
- Defined in ../node_modules/@types/three/src/core/EventDispatcher.d.ts:78

`Private` shouldLoad

shouldLoad(extent): boolean
Check if the tile actually intersect with the extent.
Parameters
- extent: Extent
  
  The extent to test.
Returns boolean
true if the tile must be processed, false otherwise.
- Defined in sources/TiledImageSource.ts:318

update

update(): void
Raises an event to reload the source.

Returns void
Inherited from ImageSource.update
- Defined in sources/ImageSource.ts:200

Class TiledImageSource

Example

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

options: TiledImageSourceOptions

Returns TiledImageSource

Properties

Private Readonly _downloader

Private Readonly _getTileUrl

Type declaration

Parameters

coord: TileCoord

_: number

proj: Projection

Returns string

Private Readonly _sourceExtent

Private Readonly _tileGrid

Readonly containsFn

datatype

Readonly flipY

Readonly format

Readonly isImageSource

Readonly isTiledImageSource

Readonly noDataValue

Readonly olprojection

Readonly source

type

version

Accessors

colorSpace

Returns ColorSpace

Methods

addEventListener

Type Parameters

T extends "updated"

Parameters

type: T

listener: EventListener<ImageSourceEvents[T], T, TiledImageSource>

Returns void

Type Parameters

T extends string

Parameters

type: T

listener: EventListener<{}, T, TiledImageSource>

Returns void

adjustExtentAndPixelSize

Parameters

requestExtent: Extent

requestWidth: number

requestHeight: number

margin: number = 0

Returns { extent: Extent; height: number; width: number; }

extent: Extent

height: number

width: number

contains

Parameters

extent: Extent

Returns boolean

dispatchEvent

Type Parameters

T extends "updated"

Parameters

event: BaseEvent<T> & ImageSourceEvents[T]

Returns void

dispose

Returns void

Private fetchData

Parameters

url: string

signal: AbortSignal

Returns Promise<Blob>

getCrs

`Private` `Readonly` _downloader

`Private` `Readonly` _getTileUrl

`Private` `Readonly` _sourceExtent

`Private` `Readonly` _tileGrid

`Readonly` containsFn

`Readonly` flipY

`Readonly` format

`Readonly` isImageSource

`Readonly` isTiledImageSource

`Readonly` noDataValue

`Readonly` olprojection

`Readonly` source

Returns {
extent: Extent;
height: number;
width: number;
}

`Private` fetchData

Returns {
id: string;
request: (() => Promise<ImageResult>);
}[]

`Private` getZoomLevel

options: {
targetProjection: string;
}

`Private` loadTile

`Private` loadTiles

Returns {
id: string;
request: (() => Promise<ImageResult>);
}[]

`Private` shouldLoad