0
# Data Sources
1

2
Comprehensive data source system supporting multiple formats, tile services, and vector data with optimized loading strategies.
3

4
## Capabilities
5

6
### Base Source Classes
7

8
Foundation classes providing common source functionality.
9

10
```typescript { .api }
11
/**
12
 * Base class for all data sources
13
 */
14
abstract class Source {
15
  constructor(options: SourceOptions);
16
  
17
  /** Get source attributions */
18
  getAttributions(): Attribution[] | null;
19
  /** Set source attributions */
20
  setAttributions(attributions: Attribution[] | null): void;
21
  
22
  /** Get source projection */
23
  getProjection(): Projection | null;
24
  
25
  /** Get source state */
26
  getState(): SourceState;
27
  
28
  /** Refresh the source */
29
  refresh(): void;
30
  
31
  /** Get custom properties */
32
  get(key: string): any;
33
  /** Set custom properties */
34
  set(key: string, value: any): void;
35
}
36

37
interface SourceOptions {
38
  /** Attribution information */
39
  attributions?: Attribution[] | null;
40
  /** Interpolate linearly between pixels */
41
  interpolate?: boolean;
42
  /** Source projection */
43
  projection?: ProjectionLike;
44
  /** Source state */
45
  state?: SourceState;
46
  /** Wrap the world horizontally */
47
  wrapX?: boolean;
48
}
49

50
type SourceState = 'undefined' | 'loading' | 'ready' | 'error';
51
```
52

53
### Tile Sources
54

55
Sources providing tiled data for efficient map rendering.
56

57
```typescript { .api }
58
/**
59
 * Base class for tile sources
60
 */
61
abstract class TileSource extends Source {
62
  constructor(options: TileSourceOptions);
63
  
64
  /** Get the tile grid */
65
  getTileGrid(): TileGrid | null;
66
  /** Set the tile grid */
67
  setTileGrid(tileGrid: TileGrid): void;
68
  
69
  /** Get tile loading function */
70
  getTileLoadFunction(): TileLoadFunction;
71
  /** Set tile loading function */
72
  setTileLoadFunction(tileLoadFunction: TileLoadFunction): void;
73
  
74
  /** Get tile URL function */
75
  getTileUrlFunction(): TileUrlFunction | null;
76
  /** Set tile URL function */
77
  setTileUrlFunction(tileUrlFunction: TileUrlFunction): void;
78
  
79
  /** Get tile at coordinates */
80
  getTile(z: number, x: number, y: number, pixelRatio: number, projection: Projection): Tile;
81
  
82
  /** Refresh tiles */
83
  refresh(): void;
84
}
85

86
interface TileSourceOptions extends SourceOptions {
87
  /** Cache size for tiles */
88
  cacheSize?: number;
89
  /** Transition duration for tile opacity */
90
  transition?: number;
91
  /** Tile grid defining the tile coordinate system */
92
  tileGrid?: TileGrid;
93
  /** Tile loading function */
94
  tileLoadFunction?: TileLoadFunction;
95
  /** Tile URL function */
96
  tileUrlFunction?: TileUrlFunction;
97
  /** Key for tile cache */
98
  key?: string;
99
}
100

101
/**
102
 * XYZ tile source for standard tiled web maps
103
 */
104
class XYZ extends TileImage {
105
  constructor(options?: XYZOptions);
106
  
107
  /** Get tile URLs */
108
  getUrls(): string[] | null;
109
  /** Set tile URLs */
110
  setUrls(urls: string[]): void;
111
  
112
  /** Set single tile URL */
113
  setUrl(url: string): void;
114
}
115

116
interface XYZOptions extends TileImageOptions {
117
  /** Tile URL template or array of templates */
118
  url?: string;
119
  urls?: string[];
120
  /** Maximum zoom level */
121
  maxZoom?: number;
122
  /** Minimum zoom level */
123
  minZoom?: number;
124
  /** Maximum allowed resolution */
125
  maxResolution?: number;
126
  /** Tile size */
127
  tileSize?: number | Size;
128
  /** Reprojection error threshold */
129
  reprojectionErrorThreshold?: number;
130
}
131

132
/**
133
 * OpenStreetMap tile source
134
 */
135
class OSM extends XYZ {
136
  constructor(options?: OSMOptions);
137
}
138

139
interface OSMOptions extends XYZOptions {
140
  /** Use retina/high DPI tiles */
141
  hidpi?: boolean;
142
  /** OpenStreetMap layer type */
143
  layer?: 'osm' | 'cycle' | 'transport';
144
  /** Custom OpenStreetMap server URL */
145
  url?: string;
146
}
147
```
148

149
**Usage Examples:**
150

151
```typescript
152
import XYZ from 'ol/source/XYZ';
153
import OSM from 'ol/source/OSM';
154
import TileLayer from 'ol/layer/Tile';
155

156
// Create a custom XYZ tile source
157
const xyzSource = new XYZ({
158
  url: 'https://tile.stamen.com/toner/{z}/{x}/{y}.png',
159
  maxZoom: 18,
160
  attributions: ['Map tiles by Stamen Design']
161
});
162

163
// Create an OpenStreetMap source
164
const osmSource = new OSM({
165
  layer: 'osm',
166
  hidpi: true
167
});
168

169
// Use in a tile layer
170
const layer = new TileLayer({
171
  source: osmSource
172
});
173
```
174

175
### Map Service Sources
176

177
Sources for accessing standardized map services.
178

179
```typescript { .api }
180
/**
181
 * Web Map Service (WMS) image source
182
 */
183
class ImageWMS extends ImageSource {
184
  constructor(options: ImageWMSOptions);
185
  
186
  /** Get WMS parameters */
187
  getParams(): {[key: string]: any};
188
  /** Update WMS parameters */
189
  updateParams(params: {[key: string]: any}): void;
190
  
191
  /** Set WMS server URL */
192
  setUrl(url: string): void;
193
  /** Get WMS server URL */
194
  getUrl(): string | undefined;
195
  
196
  /** Get feature info URL */
197
  getFeatureInfoUrl(coordinate: Coordinate, resolution: number, projection: ProjectionLike, params: {[key: string]: any}): string | undefined;
198
}
199

200
interface ImageWMSOptions extends ImageSourceOptions {
201
  /** WMS server URL */
202
  url?: string;
203
  /** WMS parameters */
204
  params?: {[key: string]: any};
205
  /** Server type for vendor-specific parameters */
206
  serverType?: ServerType;
207
  /** Hide layers in legend */
208
  hidpi?: boolean;
209
  /** Ratio for image requests */
210
  ratio?: number;
211
  /** Cross-origin setting */
212
  crossOrigin?: string | null;
213
}
214

215
/**
216
 * Web Map Tile Service (WMTS) source
217
 */
218
class WMTS extends TileImage {
219
  constructor(options: WMTSOptions);
220
  
221
  /** Get WMTS dimensions */
222
  getDimensions(): {[key: string]: string};
223
  /** Update WMTS dimensions */
224
  updateDimensions(dimensions: {[key: string]: string}): void;
225
}
226

227
interface WMTSOptions extends TileImageOptions {
228
  /** WMTS capabilities or configuration */
229
  source?: any;
230
  /** Layer name */
231
  layer: string;
232
  /** Style name */
233
  style: string;
234
  /** Tile matrix set */
235
  matrixSet: string;
236
  /** Image format */
237
  format?: string;
238
  /** Request encoding */
239
  requestEncoding?: WMTSRequestEncoding;
240
  /** Dimensions */
241
  dimensions?: {[key: string]: string};
242
}
243

244
type ServerType = 'carmentaserver' | 'geoserver' | 'mapserver' | 'qgis';
245
type WMTSRequestEncoding = 'KVP' | 'REST';
246
```
247

248
### Vector Sources
249

250
Sources for vector feature data.
251

252
```typescript { .api }
253
/**
254
 * Vector source for features
255
 */
256
class VectorSource extends Source {
257
  constructor(options?: VectorSourceOptions);
258
  
259
  /** Add a single feature */
260
  addFeature(feature: Feature): void;
261
  /** Add multiple features */
262
  addFeatures(features: Feature[]): void;
263
  
264
  /** Remove a feature */
265
  removeFeature(feature: Feature): void;
266
  /** Clear all features */
267
  clear(): void;
268
  
269
  /** Get all features */
270
  getFeatures(): Feature[];
271
  /** Get features in extent */
272
  getFeaturesInExtent(extent: Extent): Feature[];
273
  /** Get closest feature to coordinate */
274
  getClosestFeatureToCoordinate(coordinate: Coordinate, filter?: (feature: Feature) => boolean): Feature | null;
275
  
276
  /** Get feature by ID */
277
  getFeatureById(id: string | number): Feature | null;
278
  
279
  /** Force feature re-rendering */
280
  changed(): void;
281
  
282
  /** Get source extent */
283
  getExtent(): Extent;
284
  
285
  /** Set loader function for remote data */
286
  setLoader(loader: FeatureLoader): void;
287
  /** Get loader function */
288
  getLoader(): FeatureLoader;
289
}
290

291
interface VectorSourceOptions extends SourceOptions {
292
  /** Initial features */
293
  features?: Feature[] | Collection<Feature>;
294
  /** Feature format for parsing */
295
  format?: FeatureFormat;
296
  /** Data URL */
297
  url?: string | FeatureUrlFunction;
298
  /** Feature loader function */
299
  loader?: FeatureLoader;
300
  /** Loading strategy */
301
  strategy?: LoadingStrategy;
302
  /** Use spatial index for fast queries */
303
  useSpatialIndex?: boolean;
304
  /** Wrap features horizontally */
305
  wrapX?: boolean;
306
}
307

308
/**
309
 * Cluster source for grouping nearby features
310
 */
311
class Cluster extends VectorSource {
312
  constructor(options: ClusterOptions);
313
  
314
  /** Get clustering distance */
315
  getDistance(): number;
316
  /** Set clustering distance */
317
  setDistance(distance: number): void;
318
  
319
  /** Get minimum distance between clusters */
320
  getMinDistance(): number;
321
  /** Set minimum distance between clusters */
322
  setMinDistance(minDistance: number): void;
323
}
324

325
interface ClusterOptions extends VectorSourceOptions {
326
  /** Distance for clustering features */
327
  distance?: number;
328
  /** Minimum distance between clusters */
329
  minDistance?: number;
330
  /** Geometry function for clustering point */
331
  geometryFunction?: (feature: Feature) => Point;
332
  /** Create cluster function */
333
  createCluster?: (extent: Extent, features: Feature[]) => Feature;
334
}
335
```
336

337
**Usage Examples:**
338

339
```typescript
340
import VectorSource from 'ol/source/Vector';
341
import Cluster from 'ol/source/Cluster';
342
import Feature from 'ol/Feature';
343
import Point from 'ol/geom/Point';
344
import GeoJSON from 'ol/format/GeoJSON';
345

346
// Create a vector source with features
347
const vectorSource = new VectorSource({
348
  features: [
349
    new Feature({
350
      geometry: new Point([0, 0]),
351
      name: 'Point 1'
352
    })
353
  ]
354
});
355

356
// Load GeoJSON data
357
const geoJsonSource = new VectorSource({
358
  url: 'data/features.geojson',
359
  format: new GeoJSON()
360
});
361

362
// Create a clustering source
363
const clusterSource = new Cluster({
364
  source: vectorSource,
365
  distance: 40,
366
  minDistance: 20
367
});
368
```
369

370
### Vector Tile Sources
371

372
Sources for vector tile data.
373

374
```typescript { .api }
375
/**
376
 * Vector tile source
377
 */
378
class VectorTile extends UrlTile {
379
  constructor(options?: VectorTileOptions);
380
  
381
  /** Get tile format */
382
  getFormat(): FeatureFormat | null;
383
  
384
  /** Clear tile cache */
385
  clear(): void;
386
}
387

388
interface VectorTileOptions extends UrlTileOptions {
389
  /** Vector tile format */
390
  format?: FeatureFormat;
391
  /** Tile class */
392
  tileClass?: typeof VectorTile;
393
  /** Tile loading function */
394
  tileLoadFunction?: TileLoadFunction;
395
}
396

397
/**
398
 * Mapbox Vector Tiles (MVT) source
399
 */
400
class MVTSource extends VectorTile {
401
  constructor(options?: MVTOptions);
402
}
403
```
404

405
### Specialized Sources
406

407
Additional sources for specific data types and services.
408

409
```typescript { .api }
410
/**
411
 * Bing Maps tile source
412
 */
413
class BingMaps extends TileImage {
414
  constructor(options: BingMapsOptions);
415
  
416
  /** Get Bing Maps API key */
417
  getApiKey(): string;
418
  /** Set Bing Maps API key */
419
  setApiKey(apiKey: string): void;
420
}
421

422
interface BingMapsOptions extends TileImageOptions {
423
  /** Bing Maps API key */
424
  apiKey: string;
425
  /** Imagery set (Road, Aerial, etc.) */
426
  imagerySet: string;
427
  /** Culture code */
428
  culture?: string;
429
  /** Maximum zoom level */
430
  maxZoom?: number;
431
}
432

433
/**
434
 * Static image source
435
 */
436
class ImageStatic extends ImageSource {
437
  constructor(options: ImageStaticOptions);
438
  
439
  /** Get image URL */
440
  getUrl(): string;
441
  /** Set image URL */
442
  setUrl(url: string): void;
443
}
444

445
interface ImageStaticOptions extends ImageSourceOptions {
446
  /** Image URL */
447
  url: string;
448
  /** Image extent in map coordinates */
449
  imageExtent: Extent;
450
  /** Image size in pixels */
451
  imageSize?: Size;
452
  /** Cross-origin setting */
453
  crossOrigin?: string | null;
454
}
455

456
/**
457
 * Raster operation source for image processing
458
 */
459
class RasterSource extends ImageSource {
460
  constructor(options: RasterOptions);
461
  
462
  /** Set raster operation */
463
  setOperation(operation: RasterOperation, lib?: {[key: string]: any}): void;
464
}
465

466
interface RasterOptions extends ImageSourceOptions {
467
  /** Input sources for raster operation */
468
  sources: Source[];
469
  /** Raster operation function */
470
  operation?: RasterOperation;
471
  /** External library for operation */
472
  lib?: {[key: string]: any};
473
  /** Number of worker threads */
474
  threads?: number;
475
  /** Operation type */
476
  operationType?: RasterOperationType;
477
}
478

479
type RasterOperation = (inputs: ImageData[], data: {[key: string]: any}) => ImageData;
480
type RasterOperationType = 'pixel' | 'image';
481
```
482

483
## Types
484

485
```typescript { .api }
486
type Attribution = string | {
487
  html: string;
488
  collapsible?: boolean;
489
};
490

491
type FeatureLoader = (extent: Extent, resolution: number, projection: Projection) => void;
492
type FeatureUrlFunction = (extent: Extent, resolution: number, projection: Projection) => string;
493
type LoadingStrategy = (extent: Extent, resolution: number) => Extent[];
494
type TileLoadFunction = (tile: Tile, src: string) => void;
495
type TileUrlFunction = (tileCoord: [number, number, number], pixelRatio: number, projection: Projection) => string;
496
```