# Interface: ICreateArrowAnimateLineLayerOptions

# Hierarchy

IAnimateLineLayerOptions
ICreateAnimateImagesOptions

↳ ICreateArrowAnimateLineLayerOptions

# Table of contents

# Properties

animateImages
arrowFillColor
arrowStrokeColor
arrowStrokeWidth
arrowWidth
canvasHeight
canvasWidth
directionReverse
draw
drawFrame
filter
frameCount
from
fromImage
isHoverFeatureState
isHoverPointer
layerBefore
layerId
lineBlur
lineCap
lineColor
lineDasharray
lineGapWidth
lineGradient
lineJoin
lineMiterMimit
lineOffset
lineOpacity
linePattern
lineRoundLimit
lineSortKey
lineTranslate
lineTranslateAnchor
lineWidth
maxzoom
minzoom
sourceId
sourceLayer
speed
spriteHeight
spriteWidth
startAutoAnimation
to
visibility
yAxis

# Properties

# animateImages

• Optional animateImages: (string | ArrayBufferView | ImageData | HTMLImageElement | { data: Uint8Array | Uint8ClampedArray ; height: number ; width: number } | ImageBitmap)[]

动画图集.

Inherited from: IAnimateLineLayerOptions.animateImages

# arrowFillColor

• Optional arrowFillColor: string | CanvasGradient | CanvasPattern

箭头填充背景颜色.

# arrowStrokeColor

• Optional arrowStrokeColor: string | CanvasGradient | CanvasPattern

箭头颜色.

# arrowStrokeWidth

• Optional arrowStrokeWidth: number

箭头线宽.

# arrowWidth

• Optional arrowWidth: number

箭头宽(默认为画布的一半).

# canvasHeight

• Optional canvasHeight: number

画片高(2的n次幂，如2,4,8, 16, 32....).默认32

Inherited from: ICreateAnimateImagesOptions.canvasHeight

# canvasWidth

• Optional canvasWidth: number

画片宽(2的n次幂，如2,4,8, 16, 32....).默认64

Inherited from: ICreateAnimateImagesOptions.canvasWidth

# directionReverse

• Optional directionReverse: boolean

方向是否反向.

Inherited from: ICreateAnimateImagesOptions.directionReverse

# draw

• Optional draw: (context: CanvasRenderingContext2D, width: number, height: number, opts: ICreateAnimateImagesOptions) => void

绘制内容回调(此函数只需绘制第一帧，其作帧图片会根据移动方向和帧数自动计算出来).

# Type declaration

▸ (context: CanvasRenderingContext2D, width: number, height: number, opts: ICreateAnimateImagesOptions): void

# Parameters

Name	Type
`context`	CanvasRenderingContext2D
`width`	number
`height`	number
`opts`	ICreateAnimateImagesOptions

Returns: void

Inherited from: ICreateAnimateImagesOptions.draw

# drawFrame

• Optional drawFrame: (context: CanvasRenderingContext2D, width: number, height: number, frameCount: number, curFrameIndex: number, opts: ICreateAnimateImagesOptions) => void

每帧内容回调(此函数每帧都会调用，需要根据不同的帧数生成不同的图片，与上面的draw冲突，如果设置了drawFrame，则上面的draw函数无效).

# Type declaration

▸ (context: CanvasRenderingContext2D, width: number, height: number, frameCount: number, curFrameIndex: number, opts: ICreateAnimateImagesOptions): void

# Parameters

Name	Type
`context`	CanvasRenderingContext2D
`width`	number
`height`	number
`frameCount`	number
`curFrameIndex`	number
`opts`	ICreateAnimateImagesOptions

Returns: void

Inherited from: ICreateAnimateImagesOptions.drawFrame

# filter

• Optional filter: any

Inherited from: IAnimateLineLayerOptions.filter

# frameCount

• Optional frameCount: number

要生成的动画图片帧的个数.默认2

Inherited from: ICreateAnimateImagesOptions.frameCount

# from

• Optional from: number

生成的动画图片集中从第几个开始，默认0.

Inherited from: ICreateAnimateImagesOptions.from

# fromImage

• Optional fromImage: HTMLImageElement

来源图片.

Inherited from: ICreateAnimateImagesOptions.fromImage

# isHoverFeatureState

• Optional isHoverFeatureState: boolean

Inherited from: IAnimateLineLayerOptions.isHoverFeatureState

# isHoverPointer

• Optional isHoverPointer: boolean

Inherited from: IAnimateLineLayerOptions.isHoverPointer

# layerBefore

• Optional layerBefore: string

创建的图层位于哪个图层之前.

Inherited from: IAnimateLineLayerOptions.layerBefore

# layerId

• Optional layerId: string

Inherited from: IAnimateLineLayerOptions.layerId

# lineBlur

• Optional lineBlur: number | ExpressionSpecificationEx | { stops: [number, number][] ; type: "exponential" } | { stops: [number, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [number, number][] ; type: "exponential" } | { default?: number ; property: string ; stops: [number, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [string | number | boolean, number][] ; type: "categorical" } | { default?: number ; property: string ; type: "identity" } | { default?: number ; property: string ; stops: [{ value: number ; zoom: number }, number][] ; type: "exponential" } | { default?: number ; property: string ; stops: [{ value: number ; zoom: number }, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [{ value: string | number | boolean ; zoom: number }, number][] ; type: "categorical" }

Inherited from: IAnimateLineLayerOptions.lineBlur

# lineCap

• Optional lineCap: ExpressionSpecificationEx | "butt" | "round" | "square" | { stops: [number, "butt" | "round" | "square"][] ; type: "exponential" } | { stops: [number, "butt" | "round" | "square"][] ; type: "interval" } | { default?: "butt" | "round" | "square" ; property: string ; stops: [number, "butt" | "round" | "square"][] ; type: "exponential" } | { default?: "butt" | "round" | "square" ; property: string ; stops: [number, "butt" | "round" | "square"][] ; type: "interval" } | { default?: "butt" | "round" | "square" ; property: string ; stops: [string | number | boolean, "butt" | "round" | "square"][] ; type: "categorical" } | { default?: "butt" | "round" | "square" ; property: string ; type: "identity" } | { default?: "butt" | "round" | "square" ; property: string ; stops: [{ value: number ; zoom: number }, "butt" | "round" | "square"][] ; type: "exponential" } | { default?: "butt" | "round" | "square" ; property: string ; stops: [{ value: number ; zoom: number }, "butt" | "round" | "square"][] ; type: "interval" } | { default?: "butt" | "round" | "square" ; property: string ; stops: [{ value: string | number | boolean ; zoom: number }, "butt" | "round" | "square"][] ; type: "categorical" }

Inherited from: IAnimateLineLayerOptions.lineCap

# lineColor

• Optional lineColor: string | ExpressionSpecificationEx | { stops: [number, string][] ; type: "exponential" } | { stops: [number, string][] ; type: "interval" } | { default?: string ; property: string ; stops: [number, string][] ; type: "exponential" } | { default?: string ; property: string ; stops: [number, string][] ; type: "interval" } | { default?: string ; property: string ; stops: [string | number | boolean, string][] ; type: "categorical" } | { default?: string ; property: string ; type: "identity" } | { default?: string ; property: string ; stops: [{ value: number ; zoom: number }, string][] ; type: "exponential" } | { default?: string ; property: string ; stops: [{ value: number ; zoom: number }, string][] ; type: "interval" } | { default?: string ; property: string ; stops: [{ value: string | number | boolean ; zoom: number }, string][] ; type: "categorical" }

Inherited from: IAnimateLineLayerOptions.lineColor

# lineDasharray

• Optional lineDasharray: number[] | ExpressionSpecificationEx | { stops: [number, number[]][] ; type: "exponential" } | { stops: [number, number[]][] ; type: "interval" } | { default?: number[] ; property: string ; stops: [number, number[]][] ; type: "exponential" } | { default?: number[] ; property: string ; stops: [number, number[]][] ; type: "interval" } | { default?: number[] ; property: string ; stops: [string | number | boolean, number[]][] ; type: "categorical" } | { default?: number[] ; property: string ; type: "identity" } | { default?: number[] ; property: string ; stops: [{ value: number ; zoom: number }, number[]][] ; type: "exponential" } | { default?: number[] ; property: string ; stops: [{ value: number ; zoom: number }, number[]][] ; type: "interval" } | { default?: number[] ; property: string ; stops: [{ value: string | number | boolean ; zoom: number }, number[]][] ; type: "categorical" }

Inherited from: IAnimateLineLayerOptions.lineDasharray

# lineGapWidth

• Optional lineGapWidth: number | ExpressionSpecificationEx | { stops: [number, number][] ; type: "exponential" } | { stops: [number, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [number, number][] ; type: "exponential" } | { default?: number ; property: string ; stops: [number, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [string | number | boolean, number][] ; type: "categorical" } | { default?: number ; property: string ; type: "identity" } | { default?: number ; property: string ; stops: [{ value: number ; zoom: number }, number][] ; type: "exponential" } | { default?: number ; property: string ; stops: [{ value: number ; zoom: number }, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [{ value: string | number | boolean ; zoom: number }, number][] ; type: "categorical" }

Inherited from: IAnimateLineLayerOptions.lineGapWidth

# lineGradient

• Optional lineGradient: ExpressionSpecificationEx

Inherited from: IAnimateLineLayerOptions.lineGradient

# lineJoin

• Optional lineJoin: ExpressionSpecificationEx | "round" | "bevel" | "miter" | { stops: [number, "round" | "bevel" | "miter"][] ; type: "exponential" } | { stops: [number, "round" | "bevel" | "miter"][] ; type: "interval" } | { default?: "round" | "bevel" | "miter" ; property: string ; stops: [number, "round" | "bevel" | "miter"][] ; type: "exponential" } | { default?: "round" | "bevel" | "miter" ; property: string ; stops: [number, "round" | "bevel" | "miter"][] ; type: "interval" } | { default?: "round" | "bevel" | "miter" ; property: string ; stops: [string | number | boolean, "round" | "bevel" | "miter"][] ; type: "categorical" } | { default?: "round" | "bevel" | "miter" ; property: string ; type: "identity" } | { default?: "round" | "bevel" | "miter" ; property: string ; stops: [{ value: number ; zoom: number }, "round" | "bevel" | "miter"][] ; type: "exponential" } | { default?: "round" | "bevel" | "miter" ; property: string ; stops: [{ value: number ; zoom: number }, "round" | "bevel" | "miter"][] ; type: "interval" } | { default?: "round" | "bevel" | "miter" ; property: string ; stops: [{ value: string | number | boolean ; zoom: number }, "round" | "bevel" | "miter"][] ; type: "categorical" }

Inherited from: IAnimateLineLayerOptions.lineJoin

# lineMiterMimit

• Optional lineMiterMimit: number | ExpressionSpecificationEx | { stops: [number, number][] ; type: "exponential" } | { stops: [number, number][] ; type: "interval" }

Inherited from: IAnimateLineLayerOptions.lineMiterMimit

# lineOffset

• Optional lineOffset: number | ExpressionSpecificationEx | { stops: [number, number][] ; type: "exponential" } | { stops: [number, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [number, number][] ; type: "exponential" } | { default?: number ; property: string ; stops: [number, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [string | number | boolean, number][] ; type: "categorical" } | { default?: number ; property: string ; type: "identity" } | { default?: number ; property: string ; stops: [{ value: number ; zoom: number }, number][] ; type: "exponential" } | { default?: number ; property: string ; stops: [{ value: number ; zoom: number }, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [{ value: string | number | boolean ; zoom: number }, number][] ; type: "categorical" }

Inherited from: IAnimateLineLayerOptions.lineOffset

# lineOpacity

• Optional lineOpacity: number | ExpressionSpecificationEx | { stops: [number, number][] ; type: "exponential" } | { stops: [number, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [number, number][] ; type: "exponential" } | { default?: number ; property: string ; stops: [number, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [string | number | boolean, number][] ; type: "categorical" } | { default?: number ; property: string ; type: "identity" } | { default?: number ; property: string ; stops: [{ value: number ; zoom: number }, number][] ; type: "exponential" } | { default?: number ; property: string ; stops: [{ value: number ; zoom: number }, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [{ value: string | number | boolean ; zoom: number }, number][] ; type: "categorical" }

Inherited from: IAnimateLineLayerOptions.lineOpacity

# linePattern

• Optional linePattern: string | ExpressionSpecificationEx | { stops: [number, string][] ; type: "exponential" } | { stops: [number, string][] ; type: "interval" } | { default?: string ; property: string ; stops: [number, string][] ; type: "exponential" } | { default?: string ; property: string ; stops: [number, string][] ; type: "interval" } | { default?: string ; property: string ; stops: [string | number | boolean, string][] ; type: "categorical" } | { default?: string ; property: string ; type: "identity" } | { default?: string ; property: string ; stops: [{ value: number ; zoom: number }, string][] ; type: "exponential" } | { default?: string ; property: string ; stops: [{ value: number ; zoom: number }, string][] ; type: "interval" } | { default?: string ; property: string ; stops: [{ value: string | number | boolean ; zoom: number }, string][] ; type: "categorical" }

Inherited from: IAnimateLineLayerOptions.linePattern

# lineRoundLimit

• Optional lineRoundLimit: number | ExpressionSpecificationEx | { stops: [number, number][] ; type: "exponential" } | { stops: [number, number][] ; type: "interval" }

Inherited from: IAnimateLineLayerOptions.lineRoundLimit

# lineSortKey

• Optional lineSortKey: number | ExpressionSpecificationEx | { stops: [number, number][] ; type: "exponential" } | { stops: [number, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [number, number][] ; type: "exponential" } | { default?: number ; property: string ; stops: [number, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [string | number | boolean, number][] ; type: "categorical" } | { default?: number ; property: string ; type: "identity" } | { default?: number ; property: string ; stops: [{ value: number ; zoom: number }, number][] ; type: "exponential" } | { default?: number ; property: string ; stops: [{ value: number ; zoom: number }, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [{ value: string | number | boolean ; zoom: number }, number][] ; type: "categorical" }

Inherited from: IAnimateLineLayerOptions.lineSortKey

# lineTranslate

• Optional lineTranslate: [number, number] | ExpressionSpecificationEx | { stops: [number, [number, number]][] ; type: "exponential" } | { stops: [number, [number, number]][] ; type: "interval" }

Inherited from: IAnimateLineLayerOptions.lineTranslate

# lineTranslateAnchor

• Optional lineTranslateAnchor: "map" | ExpressionSpecificationEx | "viewport" | { stops: [number, "map" | "viewport"][] ; type: "exponential" } | { stops: [number, "map" | "viewport"][] ; type: "interval" }

Inherited from: IAnimateLineLayerOptions.lineTranslateAnchor

# lineWidth

• Optional lineWidth: number | ExpressionSpecificationEx | { stops: [number, number][] ; type: "exponential" } | { stops: [number, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [number, number][] ; type: "exponential" } | { default?: number ; property: string ; stops: [number, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [string | number | boolean, number][] ; type: "categorical" } | { default?: number ; property: string ; type: "identity" } | { default?: number ; property: string ; stops: [{ value: number ; zoom: number }, number][] ; type: "exponential" } | { default?: number ; property: string ; stops: [{ value: number ; zoom: number }, number][] ; type: "interval" } | { default?: number ; property: string ; stops: [{ value: string | number | boolean ; zoom: number }, number][] ; type: "categorical" }