Class: Icon

ol/style/Icon~Icon 


import Icon from 'ol/style/Icon.js';

Set icon style for vector features.

new Icon(options)

style/Icon.js, line 64
Name Type Description
anchor Array.<number> (defaults to [0.5, 0.5])

Anchor. Default value is the icon center.
anchorOrigin IconOrigin (defaults to 'top-left')

Origin of the anchor: bottom-left, bottom-right, top-left or top-right.
anchorXUnits IconAnchorUnits (defaults to 'fraction')

Units in which the anchor x value is specified. A value of 'fraction' indicates the x value is a fraction of the icon. A value of 'pixels' indicates the x value in pixels.
anchorYUnits IconAnchorUnits (defaults to 'fraction')

Units in which the anchor y value is specified. A value of 'fraction' indicates the y value is a fraction of the icon. A value of 'pixels' indicates the y value in pixels.
color Color | string | undefined

Color to tint the icon. If not specified, the icon will be left as is.
crossOrigin null | string | undefined

The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you want to access pixel data with the Canvas renderer. See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.
img HTMLImageElement | HTMLCanvasElement | undefined

Image object for the icon. If the src option is not provided then the provided image must already be loaded. And in that case, it is required to provide the size of the image, with the imgSize option.
imgSize Size | undefined

Image size in pixels. Only required if img is set and src is not. The provided imgSize needs to match the actual size of the image.
displacement Array.<number> (defaults to [0, 0])

Displacement of the icon in pixels. Positive values will shift the icon right and up.
opacity number (defaults to 1)

Opacity of the icon.
scale number | Size (defaults to 1)

Scale.
rotateWithView boolean (defaults to false)

Whether to rotate the icon with the view.
rotation number (defaults to 0)

Rotation in radians (positive rotation clockwise).
offset Array.<number> (defaults to [0, 0])

Offset which, together with size and offsetOrigin, defines the sub-rectangle to use from the original (sprite) image.
offsetOrigin IconOrigin (defaults to 'top-left')

Origin of the offset: bottom-left, bottom-right, top-left or top-right.
size Size | undefined

Icon size in pixels. Used together with offset to define the sub-rectangle to use from the original (sprite) image.
src string | undefined

Image source URI.
declutterMode "declutter" | "obstacle" | "none" | undefined

Declutter mode.

Extends

Methods

clone(){Icon}

style/Icon.js, line 221

Clones the style. The underlying Image/HTMLCanvasElement is not cloned.

Returns:
The cloned style.

getAnchor(){Array.<number>}

style/Icon.js, line 253

Get the anchor point in pixels. The anchor determines the center point for the symbolizer.

Returns:
Anchor.

getColor(){Color}

style/Icon.js, line 323

Get the icon color.

Returns:
Color.

getDeclutterMode(){"declutter" | "obstacle" | "none" | undefined} inherited

style/Image.js, line 147

Get the declutter mode of the shape

Returns:
Shape's declutter mode

getDisplacement(){Array.<number>} inherited

style/Image.js, line 138

Get the displacement of the shape

Returns:
Shape's center displacement

getImage(pixelRatio){HTMLImageElement | HTMLCanvasElement}

style/Icon.js, line 333

Get the image icon.

Name Type Description
pixelRatio number

Pixel ratio.
Returns:
Image or Canvas element.

getOpacity(){number} inherited

style/Image.js, line 94

Get the symbolizer opacity.

Returns:
Opacity.

getOrigin(){Array.<number>}

style/Icon.js, line 373

Get the origin of the symbolizer.

Returns:
Origin.

getPixelRatio(pixelRatio){number}

style/Icon.js, line 343

Get the pixel ratio.

Name Type Description
pixelRatio number

Pixel ratio.
Returns:
The pixel ratio of the image.

getRotateWithView(){boolean} inherited

style/Image.js, line 103

Determine whether the symbolizer rotates with the map.

Returns:
Rotate with map.

getRotation(){number} inherited

style/Image.js, line 112

Get the symoblizer rotation.

Returns:
Rotation.

getScale(){number | Size} inherited

style/Image.js, line 121

Get the symbolizer scale.

Returns:
Scale.

getSize(){Size}

style/Icon.js, line 417

Get the size of the icon (in pixels).

Returns:
Image size.

getSrc(){string | undefined}

style/Icon.js, line 408

Get the image URL.

Returns:
Image src.

load()

style/Icon.js, line 435

Load not yet loaded URI. When rendering a feature with an icon style, the vector renderer will automatically call this method. However, you might want to call this method yourself for preloading or other purposes.

setAnchor(anchor)

style/Icon.js, line 313

Set the anchor point. The anchor determines the center point for the symbolizer.

Name Type Description
anchor Array.<number>

Anchor.

setDisplacement(displacement) inherited

style/Image.js, line 228

Set the displacement.

Name Type Description
displacement Array.<number>

Displacement.

setOpacity(opacity) inherited

style/Image.js, line 238

Set the opacity.

Name Type Description
opacity number

Opacity.

setRotateWithView(rotateWithView) inherited

style/Image.js, line 248

Set whether to rotate the style with the view.

Name Type Description
rotateWithView boolean

Rotate with map.

setRotation(rotation) inherited

style/Image.js, line 258

Set the rotation.

Name Type Description
rotation number

Rotation.

setScale(scale) inherited

style/Image.js, line 267

Set the scale.

Name Type Description
scale number | Size

Scale.