Options
All
  • Public
  • Public/Protected
  • All
Menu

A LineStyle describes how the outline of an object should be rendered.

A LineStyle is typically embedded into a ShapeStyle.

Example of how to use a simple line style for painting:

var shapeStyle = {
           stroke: {
            color: "rgb(100, 170, 220)",
            width: 4 // pixels
           }
          };
geoCanvas.drawShape(shape, shapeStyle);

Hierarchy

  • LineStyle

Overview

Properties

Optional beginMarker

beginMarker: LineMarker

Adds a marker at the beginning of a line. This property is optional.

Lines with a begin marker use complex stroking under the hood. Because complex strokes are always draped on 3D maps, that means a line with this option will always be draped as well.

Optional bloom

bloom: BloomStyle

Adds a BloomEffect to the line.

Bloom is only supported on WebGL maps.

since

2022.1

Optional color

color: string

The stroke color as a CSS color string. For example "rgb(125, 125, 125)" or "rgba(125, 125, 125, 0.5)".

Optional dash

dash: number[]

The dashing pattern of the stroke. A dashing pattern is an array that defines the dash lengths and gap lengths of the dashing pattern. Elements at even positions in the array are dash lengths, elements at odd positions are gap lengths. A length is a positive number. The array should contain an even number of elements. if not, the configured dashing pattern will be concatenated twice to obtain an array with an even number of elements.

For example, a dashing pattern of [10,5,6,5] will result of a dash of 10 units, followed by a gap of five units followed by a dash of 6 units, followed by a gap of 5 units. This pattern will be repeated over the length of the line. The unit of measure is identified by the uom property.

Dashed lines use complex stroking under the hood. Because complex strokes are always draped on 3D maps, that means a line with this option will always be draped as well.

Optional dashOffset

dashOffset: number

The dash offset defines at what point in the dashing pattern to start the stroke. The dash offset is a number that points to a location in the dashing pattern, expressed in a particular unit of measure (see uom), 0 being the beginning of the pattern. That location defines the point in the dashing pattern that will correspond to the beginning of the line being rendered.

For example, with a dashing pattern of [10, 5] and a dash offset of 7, a line will start with a dash of 3 units, a gap of 5 units, followed by a dash of 10 units, and so on. The unit of measure is identified by the uom property.

Dashed lines use complex stroking under the hood. Because complex strokes are always draped on 3D maps, that means a line with this option will always be draped as well.

Optional endMarker

endMarker: LineMarker

Adds a marker at the end of a line. This property is optional.

Lines with an end marker use complex stroking under the hood. Because complex strokes are always draped on 3D maps, that means a line with this option will always be draped as well.

Optional uom

Determines the interpretation of units for style properties that express sizes. Supported UnitOfMeasures are:

  • UnitOfMeasureRegistry.getUnitOfMeasure("Pixels")
  • UnitOfMeasure of type QuantityKindRegistry.getQuantityKind("Length"), for example UnitOfMeasureRegistry.getUnitOfMeasure("Meter")

The unit of measure applies to the width, dash, dashoffset and line markers' size properties. The uom determines the interpretation of the values as pixels or as a ground unit that represents the actual size of real-world objects, like for example meter or foot.

The uom property is only supported on geographically referenced maps. Maps configured with cartesian reference do not support LineStyles with a uom set.

The property is optional and the default value is the Pixel unit.

Example of a line style with a width in meters and an arrow at the start:
var shapeStyle = {
         stroke: {
          color: "rgb(100, 170, 220)",
          width: 40,
          uom: UnitOfMeasureRegistry.getUnitOfMeasure("Meter"),
          beginMarker: {
           size: 100,
           type: LineMarkerType.ARROW
          }
         }
       };
geoCanvas.drawShape(shape, shapeStyle);
since

2019.0

Optional width

width: number

The width of the stroke determines how thick the line will be drawn.

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method