tessl/npm-ol
OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web.
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
layer-management.mddocs/
Layer Management
Layer system supporting tiles, vectors, images, and WebGL rendering with hierarchical organization and dynamic styling.
Capabilities
Base Layer Classes
Foundation classes providing common layer functionality.
/**
* Base class for all layers
*/
abstract class BaseLayer {
constructor(options: BaseLayerOptions);
/** Set layer opacity (0-1) */
setOpacity(opacity: number): void;
/** Get layer opacity */
getOpacity(): number;
/** Set layer visibility */
setVisible(visible: boolean): void;
/** Get layer visibility */
getVisible(): boolean;
/** Set layer z-index for rendering order */
setZIndex(zindex: number): void;
/** Get layer z-index */
getZIndex(): number;
/** Set layer extent */
setExtent(extent: Extent | undefined): void;
/** Get layer extent */
getExtent(): Extent | undefined;
/** Set minimum resolution for layer visibility */
setMinResolution(minResolution: number): void;
/** Get minimum resolution */
getMinResolution(): number;
/** Set maximum resolution for layer visibility */
setMaxResolution(maxResolution: number): void;
/** Get maximum resolution */
getMaxResolution(): number;
/** Get layer properties */
getProperties(): {[key: string]: any};
/** Set a property value */
set(key: string, value: any): void;
/** Get a property value */
get(key: string): any;
}
interface BaseLayerOptions {
/** Layer opacity (0-1) */
opacity?: number;
/** Layer visibility */
visible?: boolean;
/** Layer extent */
extent?: Extent;
/** Z-index for rendering order */
zIndex?: number;
/** Minimum resolution for visibility */
minResolution?: number;
/** Maximum resolution for visibility */
maxResolution?: number;
/** Minimum zoom for visibility */
minZoom?: number;
/** Maximum zoom for visibility */
maxZoom?: number;
/** Custom properties */
properties?: {[key: string]: any};
/** Class name for CSS styling */
className?: string;
}
/**
* Base class for layers with sources
*/
abstract class Layer<SourceType extends Source> extends BaseLayer {
constructor(options: LayerOptions<SourceType>);
/** Get the layer source */
getSource(): SourceType | null;
/** Set the layer source */
setSource(source: SourceType | null): void;
}
interface LayerOptions<SourceType extends Source> extends BaseLayerOptions {
/** Data source for the layer */
source?: SourceType;
}Tile Layers
Layers for displaying tiled data from various sources.
/**
* Base class for tile layers
*/
abstract class BaseTile extends Layer<TileSource> {
constructor(options?: BaseTileOptions);
/** Get tile loading strategy */
getPreload(): number;
/** Set number of low resolution tiles to preload */
setPreload(preload: number): void;
/** Use interim tiles while loading */
getUseInterimTilesOnError(): boolean;
setUseInterimTilesOnError(useInterimTilesOnError: boolean): void;
}
/**
* Standard tile layer for raster tiles
*/
class TileLayer extends BaseTile {
constructor(options?: TileLayerOptions);
/** Get the tile source */
getSource(): TileSource | null;
/** Set the tile source */
setSource(source: TileSource | null): void;
}
interface TileLayerOptions extends BaseTileOptions {
/** Tile source */
source?: TileSource;
}
/**
* Layer for displaying WebGL-accelerated tiles
*/
class WebGLTile extends BaseTile {
constructor(options?: WebGLTileOptions);
/** Update WebGL shaders */
updateStyleVariables(styleVariables: {[key: string]: number}): void;
}
interface WebGLTileOptions extends BaseTileOptions {
/** WebGL style configuration */
style?: Object;
/** Style variables for dynamic styling */
styleVariables?: {[key: string]: number};
/** Sources for multi-source rendering */
sources?: {[key: string]: Source};
}Usage Examples:
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';
// Create an OpenStreetMap tile layer
const osmLayer = new TileLayer({
source: new OSM(),
opacity: 0.8,
visible: true
});
// Create a custom XYZ tile layer
const customLayer = new TileLayer({
source: new XYZ({
url: 'https://tile.stamen.com/toner/{z}/{x}/{y}.png'
}),
minZoom: 5,
maxZoom: 15
});Vector Layers
Layers for displaying vector features with customizable styling.
/**
* Base class for vector layers
*/
abstract class BaseVector<SourceType extends VectorSource> extends Layer<SourceType> {
constructor(options?: BaseVectorOptions<SourceType>);
/** Set feature style */
setStyle(style: StyleLike): void;
/** Get feature style */
getStyle(): StyleLike | undefined;
/** Get features at pixel coordinate */
getFeaturesAtPixel(pixel: Pixel): Feature[];
/** Get layer rendering mode */
getRenderMode(): VectorRenderType;
/** Update while animating */
getUpdateWhileAnimating(): boolean;
setUpdateWhileAnimating(updateWhileAnimating: boolean): void;
/** Update while interacting */
getUpdateWhileInteracting(): boolean;
setUpdateWhileInteracting(updateWhileInteracting: boolean): void;
}
/**
* Standard vector layer for rendering features
*/
class VectorLayer extends BaseVector<VectorSource> {
constructor(options?: VectorLayerOptions);
/** Get the vector source */
getSource(): VectorSource | null;
/** Set the vector source */
setSource(source: VectorSource | null): void;
}
interface VectorLayerOptions extends BaseVectorOptions<VectorSource> {
/** Vector source */
source?: VectorSource;
/** Render buffer around visible extent */
renderBuffer?: number;
/** Vector rendering type */
renderMode?: VectorRenderType;
/** Declutter overlapping features */
declutter?: boolean;
}
/**
* Vector layer rendered as image for performance
*/
class VectorImage extends BaseVector<VectorSource> {
constructor(options?: VectorImageOptions);
/** Get image ratio for high DPI */
getImageRatio(): number;
}
/**
* Layer for vector tiles
*/
class VectorTileLayer extends BaseVector<VectorTileSource> {
constructor(options?: VectorTileLayerOptions);
/** Get render mode */
getRenderMode(): VectorTileRenderType;
/** Set render mode */
setRenderMode(renderMode: VectorTileRenderType): void;
}
type VectorRenderType = 'image' | 'vector';
type VectorTileRenderType = 'hybrid' | 'vector';Usage Examples:
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Style, Stroke, Fill, Circle } from 'ol/style';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
// Create a vector layer with styling
const vectorLayer = new VectorLayer({
source: new VectorSource(),
style: new Style({
stroke: new Stroke({
color: 'blue',
width: 2
}),
fill: new Fill({
color: 'rgba(0, 0, 255, 0.1)'
}),
image: new Circle({
radius: 7,
fill: new Fill({
color: 'red'
})
})
})
});
// Add a feature to the layer
const feature = new Feature({
geometry: new Point([0, 0])
});
vectorLayer.getSource().addFeature(feature);Image Layers
Layers for displaying single images and image services.
/**
* Base class for image layers
*/
abstract class BaseImage extends Layer<ImageSource> {
constructor(options?: BaseImageOptions);
}
/**
* Layer for single images
*/
class ImageLayer extends BaseImage {
constructor(options?: ImageLayerOptions);
/** Get the image source */
getSource(): ImageSource | null;
/** Set the image source */
setSource(source: ImageSource | null): void;
}
interface ImageLayerOptions extends BaseImageOptions {
/** Image source */
source?: ImageSource;
}Specialized Layers
Additional layer types for specific use cases.
/**
* Layer group for organizing multiple layers
*/
class Group extends BaseLayer {
constructor(options?: GroupOptions);
/** Get child layers */
getLayers(): Collection<BaseLayer>;
/** Set child layers */
setLayers(layers: Collection<BaseLayer> | BaseLayer[]): void;
}
interface GroupOptions extends BaseLayerOptions {
/** Child layers */
layers?: BaseLayer[] | Collection<BaseLayer>;
}
/**
* Heatmap layer for point density visualization
*/
class Heatmap extends VectorLayer {
constructor(options?: HeatmapOptions);
/** Get heatmap blur size */
getBlur(): number;
/** Set heatmap blur size */
setBlur(blur: number): void;
/** Get heatmap radius */
getRadius(): number;
/** Set heatmap radius */
setRadius(radius: number): void;
}
interface HeatmapOptions extends VectorLayerOptions {
/** Color gradient for heatmap */
gradient?: string[];
/** Blur size in pixels */
blur?: number;
/** Feature radius in pixels */
radius?: number;
/** Feature weight function */
weight?: string | ((feature: Feature) => number);
}
/**
* Coordinate grid overlay layer
*/
class Graticule extends Layer<Source> {
constructor(options?: GraticuleOptions);
/** Get meridian labels */
getMeridians(): LineString[];
/** Get parallel labels */
getParallels(): LineString[];
}
interface GraticuleOptions extends BaseLayerOptions {
/** Stroke style for grid lines */
strokeStyle?: Stroke;
/** Show labels */
showLabels?: boolean;
/** Label formatter */
lonLabelFormatter?: (lon: number) => string;
latLabelFormatter?: (lat: number) => string;
}Usage Examples:
import Group from 'ol/layer/Group';
import Heatmap from 'ol/layer/Heatmap';
import VectorSource from 'ol/source/Vector';
// Create a layer group
const layerGroup = new Group({
layers: [osmLayer, vectorLayer]
});
// Create a heatmap layer
const heatmapLayer = new Heatmap({
source: new VectorSource(),
blur: 15,
radius: 8,
weight: (feature) => feature.get('population') / 1000000
});Types
type StyleLike = Style | Style[] | ((feature: Feature, resolution: number) => Style | Style[] | void);