OpenLayers

Class: Icon

ol.style.Icon 


import Icon from 'ol/style/icon';

Set icon style for vector features.

new ol.style.Icon(opt_options)

src/ol/style/icon.js, line 24
Name Type Description
options

Options.

Name Type Description
anchor Array.<number> | undefined

Anchor. Default value is [0.5, 0.5] (icon center).
anchorOrigin ol.style.IconOrigin | undefined

Origin of the anchor: bottom-left, bottom-right, top-left or top-right. Default is top-left.
anchorXUnits ol.style.IconAnchorUnits | undefined

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. Default is 'fraction'.
anchorYUnits ol.style.IconAnchorUnits | undefined

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. Default is 'fraction'.
color ol.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 are using the WebGL renderer or 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 Image | 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.
offset Array.<number> | undefined

Offset, which, together with the size and the offset origin, define the sub-rectangle to use from the original icon image. Default value is [0, 0].
offsetOrigin ol.style.IconOrigin | undefined

Origin of the offset: bottom-left, bottom-right, top-left or top-right. Default is top-left.
opacity number | undefined

Opacity of the icon. Default is 1.
scale number | undefined

Scale. Default is 1.
snapToPixel boolean | undefined

If true integral numbers of pixels are used as the X and Y pixel coordinate when drawing the icon in the output canvas. If false fractional numbers may be used. Using true allows for "sharp" rendering (no blur), while using false allows for "accurate" rendering. Note that accuracy is important if the icon's position is animated. Without it, the icon may jitter noticeably. Default value is true.
rotateWithView boolean | undefined

Whether to rotate the icon with the view. Default is false.
rotation number | undefined

Rotation in radians (positive rotation clockwise). Default is 0.
size ol.Size | undefined

Icon size in pixel. Can be used together with offset to define the sub-rectangle to use from the origin (sprite) icon image.
imgSize ol.Size | undefined

Image size in pixels. Only required if img is set and src is not, and for SVG images in Internet Explorer 11. The provided imgSize needs to match the actual size of the image.
src string | undefined

Image source URI.

Extends

Methods

clone(){ol.style.Icon}

src/ol/style/icon.js, line 183

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

Returns:
The cloned style.

getAnchor(){Array.<number>}

src/ol/style/icon.js, line 208

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

Returns:
Anchor.

getColor(){ol.Color}

src/ol/style/icon.js, line 254

Get the icon color.

Returns:
Color.

getImage(pixelRatio){Image|HTMLCanvasElement}

src/ol/style/icon.js, line 266

Get the image icon.

Name Type Description
pixelRatio number

Pixel ratio.
Returns:
Image or Canvas element.

getOpacity(){number} inherited

src/ol/style/image.js, line 55

Get the symbolizer opacity.

Returns:
Opacity.

getOrigin(){Array.<number>}

src/ol/style/icon.js, line 307

Get the origin of the symbolizer.

Returns:
Origin.

getRotateWithView(){boolean} inherited

src/ol/style/image.js, line 65

Determine whether the symbolizer rotates with the map.

Returns:
Rotate with map.

getRotation(){number} inherited

src/ol/style/image.js, line 75

Get the symoblizer rotation.

Returns:
Rotation.

getScale(){number} inherited

src/ol/style/image.js, line 85

Get the symbolizer scale.

Returns:
Scale.

getSize(){ol.Size}

src/ol/style/icon.js, line 348

Get the size of the symbolizer (in pixels).

Returns:
Size.

getSnapToPixel(){boolean} inherited

src/ol/style/image.js, line 95

Determine whether the symbolizer should be snapped to a pixel.

Returns:
The symbolizer should snap to a pixel.

getSrc(){string|undefined}

src/ol/style/icon.js, line 339

Get the image URL.

Returns:
Image src.

load()

src/ol/style/icon.js, line 370

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.

setOpacity(opacity) inherited

src/ol/style/image.js, line 169

Set the opacity.

Name Type Description
opacity number

Opacity.

setRotation(rotation) inherited

src/ol/style/image.js, line 190

Set the rotation.

Name Type Description
rotation number

Rotation.

setScale(scale) inherited

src/ol/style/image.js, line 201

Set the scale.

Name Type Description
scale number

Scale.