0
# Layer Management
1

2
Layer system supporting tiles, vectors, images, and WebGL rendering with hierarchical organization and dynamic styling.
3

4
## Capabilities
5

6
### Base Layer Classes
7

8
Foundation classes providing common layer functionality.
9

10
```typescript { .api }
11
/**
12
 * Base class for all layers
13
 */
14
abstract class BaseLayer {
15
  constructor(options: BaseLayerOptions);
16
  
17
  /** Set layer opacity (0-1) */
18
  setOpacity(opacity: number): void;
19
  /** Get layer opacity */
20
  getOpacity(): number;
21
  
22
  /** Set layer visibility */
23
  setVisible(visible: boolean): void;
24
  /** Get layer visibility */
25
  getVisible(): boolean;
26
  
27
  /** Set layer z-index for rendering order */
28
  setZIndex(zindex: number): void;
29
  /** Get layer z-index */
30
  getZIndex(): number;
31
  
32
  /** Set layer extent */
33
  setExtent(extent: Extent | undefined): void;
34
  /** Get layer extent */
35
  getExtent(): Extent | undefined;
36
  
37
  /** Set minimum resolution for layer visibility */
38
  setMinResolution(minResolution: number): void;
39
  /** Get minimum resolution */
40
  getMinResolution(): number;
41
  
42
  /** Set maximum resolution for layer visibility */
43
  setMaxResolution(maxResolution: number): void;
44
  /** Get maximum resolution */
45
  getMaxResolution(): number;
46
  
47
  /** Get layer properties */
48
  getProperties(): {[key: string]: any};
49
  /** Set a property value */
50
  set(key: string, value: any): void;
51
  /** Get a property value */
52
  get(key: string): any;
53
}
54

55
interface BaseLayerOptions {
56
  /** Layer opacity (0-1) */
57
  opacity?: number;
58
  /** Layer visibility */
59
  visible?: boolean;
60
  /** Layer extent */
61
  extent?: Extent;
62
  /** Z-index for rendering order */
63
  zIndex?: number;
64
  /** Minimum resolution for visibility */
65
  minResolution?: number;
66
  /** Maximum resolution for visibility */
67
  maxResolution?: number;
68
  /** Minimum zoom for visibility */
69
  minZoom?: number;
70
  /** Maximum zoom for visibility */
71
  maxZoom?: number;
72
  /** Custom properties */
73
  properties?: {[key: string]: any};
74
  /** Class name for CSS styling */
75
  className?: string;
76
}
77

78
/**
79
 * Base class for layers with sources
80
 */
81
abstract class Layer<SourceType extends Source> extends BaseLayer {
82
  constructor(options: LayerOptions<SourceType>);
83
  
84
  /** Get the layer source */
85
  getSource(): SourceType | null;
86
  /** Set the layer source */
87
  setSource(source: SourceType | null): void;
88
}
89

90
interface LayerOptions<SourceType extends Source> extends BaseLayerOptions {
91
  /** Data source for the layer */
92
  source?: SourceType;
93
}
94
```
95

96
### Tile Layers
97

98
Layers for displaying tiled data from various sources.
99

100
```typescript { .api }
101
/**
102
 * Base class for tile layers
103
 */
104
abstract class BaseTile extends Layer<TileSource> {
105
  constructor(options?: BaseTileOptions);
106
  
107
  /** Get tile loading strategy */
108
  getPreload(): number;
109
  /** Set number of low resolution tiles to preload */
110
  setPreload(preload: number): void;
111
  
112
  /** Use interim tiles while loading */
113
  getUseInterimTilesOnError(): boolean;
114
  setUseInterimTilesOnError(useInterimTilesOnError: boolean): void;
115
}
116

117
/**
118
 * Standard tile layer for raster tiles
119
 */
120
class TileLayer extends BaseTile {
121
  constructor(options?: TileLayerOptions);
122
  
123
  /** Get the tile source */
124
  getSource(): TileSource | null;
125
  /** Set the tile source */
126
  setSource(source: TileSource | null): void;
127
}
128

129
interface TileLayerOptions extends BaseTileOptions {
130
  /** Tile source */
131
  source?: TileSource;
132
}
133

134
/**
135
 * Layer for displaying WebGL-accelerated tiles
136
 */
137
class WebGLTile extends BaseTile {
138
  constructor(options?: WebGLTileOptions);
139
  
140
  /** Update WebGL shaders */
141
  updateStyleVariables(styleVariables: {[key: string]: number}): void;
142
}
143

144
interface WebGLTileOptions extends BaseTileOptions {
145
  /** WebGL style configuration */
146
  style?: Object;
147
  /** Style variables for dynamic styling */
148
  styleVariables?: {[key: string]: number};
149
  /** Sources for multi-source rendering */
150
  sources?: {[key: string]: Source};
151
}
152
```
153

154
**Usage Examples:**
155

156
```typescript
157
import TileLayer from 'ol/layer/Tile';
158
import OSM from 'ol/source/OSM';
159
import XYZ from 'ol/source/XYZ';
160

161
// Create an OpenStreetMap tile layer
162
const osmLayer = new TileLayer({
163
  source: new OSM(),
164
  opacity: 0.8,
165
  visible: true
166
});
167

168
// Create a custom XYZ tile layer
169
const customLayer = new TileLayer({
170
  source: new XYZ({
171
    url: 'https://tile.stamen.com/toner/{z}/{x}/{y}.png'
172
  }),
173
  minZoom: 5,
174
  maxZoom: 15
175
});
176
```
177

178
### Vector Layers
179

180
Layers for displaying vector features with customizable styling.
181

182
```typescript { .api }
183
/**
184
 * Base class for vector layers
185
 */
186
abstract class BaseVector<SourceType extends VectorSource> extends Layer<SourceType> {
187
  constructor(options?: BaseVectorOptions<SourceType>);
188
  
189
  /** Set feature style */
190
  setStyle(style: StyleLike): void;
191
  /** Get feature style */
192
  getStyle(): StyleLike | undefined;
193
  
194
  /** Get features at pixel coordinate */
195
  getFeaturesAtPixel(pixel: Pixel): Feature[];
196
  
197
  /** Get layer rendering mode */
198
  getRenderMode(): VectorRenderType;
199
  
200
  /** Update while animating */
201
  getUpdateWhileAnimating(): boolean;
202
  setUpdateWhileAnimating(updateWhileAnimating: boolean): void;
203
  
204
  /** Update while interacting */
205
  getUpdateWhileInteracting(): boolean;
206
  setUpdateWhileInteracting(updateWhileInteracting: boolean): void;
207
}
208

209
/**
210
 * Standard vector layer for rendering features
211
 */
212
class VectorLayer extends BaseVector<VectorSource> {
213
  constructor(options?: VectorLayerOptions);
214
  
215
  /** Get the vector source */
216
  getSource(): VectorSource | null;
217
  /** Set the vector source */
218
  setSource(source: VectorSource | null): void;
219
}
220

221
interface VectorLayerOptions extends BaseVectorOptions<VectorSource> {
222
  /** Vector source */
223
  source?: VectorSource;
224
  /** Render buffer around visible extent */
225
  renderBuffer?: number;
226
  /** Vector rendering type */
227
  renderMode?: VectorRenderType;
228
  /** Declutter overlapping features */
229
  declutter?: boolean;
230
}
231

232
/**
233
 * Vector layer rendered as image for performance
234
 */
235
class VectorImage extends BaseVector<VectorSource> {
236
  constructor(options?: VectorImageOptions);
237
  
238
  /** Get image ratio for high DPI */
239
  getImageRatio(): number;
240
}
241

242
/**
243
 * Layer for vector tiles
244
 */
245
class VectorTileLayer extends BaseVector<VectorTileSource> {
246
  constructor(options?: VectorTileLayerOptions);
247
  
248
  /** Get render mode */
249
  getRenderMode(): VectorTileRenderType;
250
  /** Set render mode */
251
  setRenderMode(renderMode: VectorTileRenderType): void;
252
}
253

254
type VectorRenderType = 'image' | 'vector';
255
type VectorTileRenderType = 'hybrid' | 'vector';
256
```
257

258
**Usage Examples:**
259

260
```typescript
261
import VectorLayer from 'ol/layer/Vector';
262
import VectorSource from 'ol/source/Vector';
263
import { Style, Stroke, Fill, Circle } from 'ol/style';
264
import Feature from 'ol/Feature';
265
import Point from 'ol/geom/Point';
266

267
// Create a vector layer with styling
268
const vectorLayer = new VectorLayer({
269
  source: new VectorSource(),
270
  style: new Style({
271
    stroke: new Stroke({
272
      color: 'blue',
273
      width: 2
274
    }),
275
    fill: new Fill({
276
      color: 'rgba(0, 0, 255, 0.1)'
277
    }),
278
    image: new Circle({
279
      radius: 7,
280
      fill: new Fill({
281
        color: 'red'
282
      })
283
    })
284
  })
285
});
286

287
// Add a feature to the layer
288
const feature = new Feature({
289
  geometry: new Point([0, 0])
290
});
291
vectorLayer.getSource().addFeature(feature);
292
```
293

294
### Image Layers
295

296
Layers for displaying single images and image services.
297

298
```typescript { .api }
299
/**
300
 * Base class for image layers
301
 */
302
abstract class BaseImage extends Layer<ImageSource> {
303
  constructor(options?: BaseImageOptions);
304
}
305

306
/**
307
 * Layer for single images
308
 */
309
class ImageLayer extends BaseImage {
310
  constructor(options?: ImageLayerOptions);
311
  
312
  /** Get the image source */
313
  getSource(): ImageSource | null;
314
  /** Set the image source */
315
  setSource(source: ImageSource | null): void;
316
}
317

318
interface ImageLayerOptions extends BaseImageOptions {
319
  /** Image source */
320
  source?: ImageSource;
321
}
322
```
323

324
### Specialized Layers
325

326
Additional layer types for specific use cases.
327

328
```typescript { .api }
329
/**
330
 * Layer group for organizing multiple layers
331
 */
332
class Group extends BaseLayer {
333
  constructor(options?: GroupOptions);
334
  
335
  /** Get child layers */
336
  getLayers(): Collection<BaseLayer>;
337
  /** Set child layers */
338
  setLayers(layers: Collection<BaseLayer> | BaseLayer[]): void;
339
}
340

341
interface GroupOptions extends BaseLayerOptions {
342
  /** Child layers */
343
  layers?: BaseLayer[] | Collection<BaseLayer>;
344
}
345

346
/**
347
 * Heatmap layer for point density visualization
348
 */
349
class Heatmap extends VectorLayer {
350
  constructor(options?: HeatmapOptions);
351
  
352
  /** Get heatmap blur size */
353
  getBlur(): number;
354
  /** Set heatmap blur size */
355
  setBlur(blur: number): void;
356
  
357
  /** Get heatmap radius */
358
  getRadius(): number;
359
  /** Set heatmap radius */
360
  setRadius(radius: number): void;
361
}
362

363
interface HeatmapOptions extends VectorLayerOptions {
364
  /** Color gradient for heatmap */
365
  gradient?: string[];
366
  /** Blur size in pixels */
367
  blur?: number;
368
  /** Feature radius in pixels */
369
  radius?: number;
370
  /** Feature weight function */
371
  weight?: string | ((feature: Feature) => number);
372
}
373

374
/**
375
 * Coordinate grid overlay layer
376
 */
377
class Graticule extends Layer<Source> {
378
  constructor(options?: GraticuleOptions);
379
  
380
  /** Get meridian labels */
381
  getMeridians(): LineString[];
382
  /** Get parallel labels */
383
  getParallels(): LineString[];
384
}
385

386
interface GraticuleOptions extends BaseLayerOptions {
387
  /** Stroke style for grid lines */
388
  strokeStyle?: Stroke;
389
  /** Show labels */
390
  showLabels?: boolean;
391
  /** Label formatter */
392
  lonLabelFormatter?: (lon: number) => string;
393
  latLabelFormatter?: (lat: number) => string;
394
}
395
```
396

397
**Usage Examples:**
398

399
```typescript
400
import Group from 'ol/layer/Group';
401
import Heatmap from 'ol/layer/Heatmap';
402
import VectorSource from 'ol/source/Vector';
403

404
// Create a layer group
405
const layerGroup = new Group({
406
  layers: [osmLayer, vectorLayer]
407
});
408

409
// Create a heatmap layer
410
const heatmapLayer = new Heatmap({
411
  source: new VectorSource(),
412
  blur: 15,
413
  radius: 8,
414
  weight: (feature) => feature.get('population') / 1000000
415
});
416
```
417

418
## Types
419

420
```typescript { .api }
421
type StyleLike = Style | Style[] | ((feature: Feature, resolution: number) => Style | Style[] | void);
422
```