Styling System

/**
 * Complete style definition for vector features
 * @param options - Style configuration options
 */
class Style {
  constructor(options?: StyleOptions);
  
  /** Get the fill style */
  getFill(): Fill | null;
  /** Set the fill style */
  setFill(fill: Fill): void;
  
  /** Get the stroke style */
  getStroke(): Stroke | null;
  /** Set the stroke style */
  setStroke(stroke: Stroke): void;
  
  /** Get the image style */
  getImage(): Image | null;
  /** Set the image style */
  setImage(image: Image): void;
  
  /** Get the text style */
  getText(): Text | null;
  /** Set the text style */
  setText(text: Text): void;
  
  /** Get the z-index */
  getZIndex(): number | undefined;
  /** Set the z-index */
  setZIndex(zIndex: number): void;
  
  /** Get the renderer function */
  getRenderer(): RenderFunction | null;
  /** Set a custom renderer function */
  setRenderer(renderer: RenderFunction): void;
  
  /** Clone the style */
  clone(): Style;
}

interface StyleOptions {
  /** Geometry to style (overrides feature geometry) */
  geometry?: Geometry | GeometryFunction;
  /** Fill style for polygons */
  fill?: Fill;
  /** Stroke style for lines and polygon outlines */
  stroke?: Stroke;
  /** Image style for points */
  image?: Image;
  /** Text style for labels */
  text?: Text;
  /** Z-index for rendering order */
  zIndex?: number;
  /** Custom renderer function */
  renderer?: RenderFunction;
}

/**
 * Fill style for polygon areas
 * @param options - Fill configuration options
 */
class Fill {
  constructor(options?: FillOptions);
  
  /** Get the fill color */
  getColor(): Color | ColorLike | null;
  /** Set the fill color */
  setColor(color: Color | ColorLike): void;
  
  /** Clone the fill style */
  clone(): Fill;
}

interface FillOptions {
  /** Fill color as CSS color, color array, or pattern */
  color?: Color | ColorLike;
}

/**
 * Stroke style for lines and outlines
 * @param options - Stroke configuration options
 */
class Stroke {
  constructor(options?: StrokeOptions);
  
  /** Get the stroke color */
  getColor(): Color | ColorLike | null;
  /** Set the stroke color */
  setColor(color: Color | ColorLike): void;
  
  /** Get the line dash pattern */
  getLineDash(): number[] | null;
  /** Set the line dash pattern */
  setLineDash(lineDash: number[]): void;
  
  /** Get the line dash offset */
  getLineDashOffset(): number | undefined;
  /** Set the line dash offset */
  setLineDashOffset(lineDashOffset: number): void;
  
  /** Get the line cap style */
  getLineCap(): CanvasLineCap | undefined;
  /** Set the line cap style */
  setLineCap(lineCap: CanvasLineCap): void;
  
  /** Get the line join style */
  getLineJoin(): CanvasLineJoin | undefined;
  /** Set the line join style */
  setLineJoin(lineJoin: CanvasLineJoin): void;
  
  /** Get the miter limit */
  getMiterLimit(): number | undefined;
  /** Set the miter limit */
  setMiterLimit(miterLimit: number): void;
  
  /** Get the stroke width */
  getWidth(): number | undefined;
  /** Set the stroke width */
  setWidth(width: number): void;
  
  /** Clone the stroke style */
  clone(): Stroke;
}

interface StrokeOptions {
  /** Stroke color */
  color?: Color | ColorLike;
  /** Line cap style */
  lineCap?: CanvasLineCap;
  /** Line join style */
  lineJoin?: CanvasLineJoin;
  /** Line dash pattern */
  lineDash?: number[];
  /** Line dash offset */
  lineDashOffset?: number;
  /** Miter limit */
  miterLimit?: number;
  /** Stroke width in pixels */
  width?: number;
}

/**
 * Base image style class
 */
abstract class Image {
  constructor();
  
  /** Get the image opacity */
  getOpacity(): number;
  /** Set the image opacity */
  setOpacity(opacity: number): void;
  
  /** Get whether rotation follows view rotation */
  getRotateWithView(): boolean;
  /** Set whether rotation follows view rotation */
  setRotateWithView(rotateWithView: boolean): void;
  
  /** Get the rotation angle */
  getRotation(): number;
  /** Set the rotation angle */
  setRotation(rotation: number): void;
  
  /** Get the scale factor */
  getScale(): number | Size;
  /** Set the scale factor */
  setScale(scale: number | Size): void;
  
  /** Get the displacement offset */
  getDisplacement(): number[];
  /** Set the displacement offset */
  setDisplacement(displacement: number[]): void;
}

/**
 * Icon image style for displaying images as point symbols
 * @param options - Icon configuration options
 */
class Icon extends Image {
  constructor(options?: IconOptions);
  
  /** Get the icon anchor */
  getAnchor(): number[];
  /** Get the icon image */
  getImage(): HTMLImageElement | HTMLCanvasElement;
  /** Get the icon origin */
  getOrigin(): number[];
  /** Get the icon size */
  getSize(): Size;
  /** Get the icon source URL */
  getSrc(): string | undefined;
  
  /** Set the icon anchor */
  setAnchor(anchor: number[]): void;
  /** Load the icon */
  load(): void;
  
  /** Clone the icon style */
  clone(): Icon;
}

interface IconOptions extends ImageOptions {
  /** Anchor point for positioning */
  anchor?: number[];
  /** Anchor origin (bottom-left, bottom-right, top-left, top-right) */
  anchorOrigin?: IconOrigin;
  /** Anchor units (fraction or pixels) */
  anchorXUnits?: IconAnchorUnits;
  /** Anchor Y units (fraction or pixels) */
  anchorYUnits?: IconAnchorUnits;
  /** Color to tint the icon */
  color?: Color | string;
  /** Cross origin attribute for image loading */
  crossOrigin?: string | null;
  /** Image object or canvas */
  img?: HTMLImageElement | HTMLCanvasElement;
  /** Image size for sprite icons */
  imgSize?: Size;
  /** Image source URL */
  src?: string;
  /** Offset for sprite icons */
  offset?: number[];
  /** Offset origin for sprite icons */
  offsetOrigin?: IconOrigin;
  /** Icon size */
  size?: Size;
}

/**
 * Circle image style for simple circular point symbols
 * @param options - Circle configuration options
 */
class Circle extends RegularShape {
  constructor(options: CircleOptions);
}

interface CircleOptions extends RegularShapeOptions {
  /** Circle radius in pixels */
  radius: number;
}

/**
 * Regular shape style for geometric point symbols
 * @param options - Regular shape configuration options
 */
class RegularShape extends Image {
  constructor(options: RegularShapeOptions);
  
  /** Get the shape angle */
  getAngle(): number;
  /** Get the fill style */
  getFill(): Fill | null;
  /** Get the number of points */
  getPoints(): number;
  /** Get the radius */
  getRadius(): number;
  /** Get the second radius (for stars) */
  getRadius2(): number | undefined;
  /** Get the stroke style */
  getStroke(): Stroke | null;
  
  /** Clone the regular shape style */
  clone(): RegularShape;
}

interface RegularShapeOptions extends ImageOptions {
  /** Fill style for the shape interior */
  fill?: Fill;
  /** Number of points for the shape */
  points: number;
  /** Outer radius of the shape */
  radius?: number;
  /** Inner radius for star shapes */
  radius2?: number;
  /** Angle offset in radians */
  angle?: number;
  /** Stroke style for the shape outline */
  stroke?: Stroke;
}

import { Style, Fill, Stroke, Circle, Icon } from 'ol/style';

// Simple circle style
const circleStyle = new Style({
  image: new Circle({
    radius: 8,
    fill: new Fill({
      color: 'rgba(255, 0, 0, 0.8)'
    }),
    stroke: new Stroke({
      color: 'white',
      width: 2
    })
  })
});

// Icon style
const iconStyle = new Style({
  image: new Icon({
    src: 'path/to/icon.png',
    scale: 0.5,
    anchor: [0.5, 1],
    anchorXUnits: 'fraction',
    anchorYUnits: 'fraction'
  })
});

// Polygon style with fill and stroke
const polygonStyle = new Style({
  fill: new Fill({
    color: 'rgba(0, 255, 0, 0.3)'
  }),
  stroke: new Stroke({
    color: 'green',
    width: 2,
    lineDash: [5, 5]
  })
});

/**
 * Text style for feature labels
 * @param options - Text configuration options
 */
class Text {
  constructor(options?: TextOptions);
  
  /** Get the font specification */
  getFont(): string | undefined;
  /** Set the font specification */
  setFont(font: string): void;
  
  /** Get the maximum angle for text on line */
  getMaxAngle(): number;
  /** Set the maximum angle for text on line */
  setMaxAngle(maxAngle: number): void;
  
  /** Get the text offset */
  getOffsetX(): number;
  /** Set the X offset */
  setOffsetX(offsetX: number): void;
  
  /** Get the Y offset */
  getOffsetY(): number;
  /** Set the Y offset */
  setOffsetY(offsetY: number): void;
  
  /** Get overflow behavior */
  getOverflow(): boolean;
  /** Set overflow behavior */
  setOverflow(overflow: boolean): void;
  
  /** Get text placement */
  getPlacement(): TextPlacement;
  /** Set text placement */
  setPlacement(placement: TextPlacement): void;
  
  /** Get repeat interval for line text */
  getRepeat(): number | undefined;
  /** Set repeat interval for line text */
  setRepeat(repeat: number): void;
  
  /** Get the scale factor */
  getScale(): number | Size | undefined;
  /** Set the scale factor */
  setScale(scale: number | Size): void;
  
  /** Get whether rotation follows view rotation */
  getRotateWithView(): boolean;
  /** Set whether rotation follows view rotation */
  setRotateWithView(rotateWithView: boolean): void;
  
  /** Get the rotation angle */
  getRotation(): number;
  /** Set the rotation angle */
  setRotation(rotation: number): void;
  
  /** Get the text content */
  getText(): string | undefined;
  /** Set the text content */
  setText(text: string): void;
  
  /** Get the text alignment */
  getTextAlign(): CanvasTextAlign | undefined;
  /** Set the text alignment */
  setTextAlign(textAlign: CanvasTextAlign): void;
  
  /** Get the text baseline */
  getTextBaseline(): CanvasTextBaseline | undefined;
  /** Set the text baseline */
  setTextBaseline(textBaseline: CanvasTextBaseline): void;
  
  /** Get the fill style */
  getFill(): Fill | null;
  /** Set the fill style */
  setFill(fill: Fill): void;
  
  /** Get the stroke style */
  getStroke(): Stroke | null;
  /** Set the stroke style */
  setStroke(stroke: Stroke): void;
  
  /** Get the background fill */
  getBackgroundFill(): Fill | null;
  /** Set the background fill */
  setBackgroundFill(backgroundFill: Fill): void;
  
  /** Get the background stroke */
  getBackgroundStroke(): Stroke | null;
  /** Set the background stroke */
  setBackgroundStroke(backgroundStroke: Stroke): void;
  
  /** Get the padding */
  getPadding(): number[] | null;
  /** Set the padding */
  setPadding(padding: number[]): void;
  
  /** Clone the text style */
  clone(): Text;
}

interface TextOptions {
  /** Font specification (CSS font property) */
  font?: string;
  /** Maximum angle between characters for line placement */
  maxAngle?: number;
  /** X offset in pixels */
  offsetX?: number;
  /** Y offset in pixels */
  offsetY?: number;
  /** Allow overflow outside feature geometry */
  overflow?: boolean;
  /** Text placement strategy */
  placement?: TextPlacement;
  /** Repeat interval for line text */
  repeat?: number;
  /** Scale factor */
  scale?: number | Size;
  /** Rotate with view */
  rotateWithView?: boolean;
  /** Rotation angle in radians */
  rotation?: number;
  /** Text content */
  text?: string;
  /** Text alignment */
  textAlign?: CanvasTextAlign;
  /** Text baseline */
  textBaseline?: CanvasTextBaseline;
  /** Text fill style */
  fill?: Fill;
  /** Text stroke/outline style */
  stroke?: Stroke;
  /** Background fill */
  backgroundFill?: Fill;
  /** Background stroke */
  backgroundStroke?: Stroke;
  /** Background padding */
  padding?: number[];
}

import { Style, Text, Fill, Stroke } from 'ol/style';

// Basic text style
const textStyle = new Style({
  text: new Text({
    text: 'Label Text',
    font: '12px Arial, sans-serif',
    fill: new Fill({
      color: 'black'
    }),
    stroke: new Stroke({
      color: 'white',
      width: 2
    }),
    offsetY: -15
  })
});

// Text with background
const backgroundTextStyle = new Style({
  text: new Text({
    text: 'Background Label',
    font: 'bold 14px Arial',
    fill: new Fill({
      color: 'white'
    }),
    backgroundFill: new Fill({
      color: 'rgba(0, 0, 0, 0.7)'
    }),
    padding: [2, 4, 2, 4]
  })
});

/**
 * Style function for dynamic styling based on feature properties
 */
type StyleFunction = (feature: FeatureLike, resolution: number) => Style | Style[] | void;

/**
 * Style-like type that can be a Style, Style array, or function
 */
type StyleLike = Style | Style[] | StyleFunction;

/**
 * Geometry function for dynamic geometry selection
 */
type GeometryFunction = (feature: FeatureLike) => Geometry | null;

/**
 * Render function for custom rendering
 */
type RenderFunction = (coordinates: Coordinate | Coordinate[] | Coordinate[][], state: State) => void;

import { Style, Fill, Circle } from 'ol/style';

// Dynamic styling based on feature properties
const styleFunction = (feature, resolution) => {
  const population = feature.get('population');
  let radius = 5;
  let color = 'blue';
  
  if (population > 100000) {
    radius = 15;
    color = 'red';
  } else if (population > 50000) {
    radius = 10;
    color = 'orange';
  }
  
  return new Style({
    image: new Circle({
      radius: radius,
      fill: new Fill({
        color: color
      })
    })
  });
};

// Apply to layer
vectorLayer.setStyle(styleFunction);

// Conditional styling
const conditionalStyle = (feature, resolution) => {
  const type = feature.get('type');
  
  switch (type) {
    case 'city':
      return cityStyle;
    case 'town':
      return townStyle;
    default:
      return defaultStyle;
  }
};

/** RGBA color array [red, green, blue, alpha] */
type Color = [number, number, number, number];

/** Color-like values: Color array, CSS string, or CanvasGradient/CanvasPattern */
type ColorLike = Color | string | CanvasGradient | CanvasPattern;

/** Convert color-like value to Color array */
function asArray(color: ColorLike): Color;

/** Convert Color array to CSS color string */
function asString(color: Color): string;

/** Parse CSS color string to Color array */
function fromString(color: string): Color;

/** Normalize color values to [0-1] range */
function normalize(color: Color): Color;

/** Check if value is a CSS color string */
function isStringColor(s: any): boolean;

type IconOrigin = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
type IconAnchorUnits = 'fraction' | 'pixels';
type TextPlacement = 'point' | 'line';
type Size = [number, number];