Style

styleThe method is used to configure the style of the layer. The same layer has differentshapegraphics, differentshapelayerstyleMethods accept different parameters.

layer.style({
  opacity: 0.5,
});

common

UniversalstyleParameters, parameters supported by all graphics.

line

shapeforlinenormal line layer.

• line
• Support gradient
• Supports textures
• Support dashed lines
• Support arrows

arc

shapeforarcPlane arc.

• arc
• Support gradient
• Supports textures
• Support dashed lines

arc3d

shapeforarc3darc layer.

• arc3d
• Support gradient
• Supports textures
• Support dashed lines

greatcircle

shapeIt is a large arc layer.

• greatcircle
• Support gradient
• Supports textures
• Support dashed lines

flowline

flowline opacity and offsets support data mapping, data-driven setting of data size

opacity

layer.style({
  opacity: {
    field: 'count', // map field
    value: [0.2,0.4,0.6,0.8], // Mapping value, supports callback function, supports setting scale
  }

// field and value are equivalent to layer.color('count',[0.2,0.4,0.6,0.8])

offsets

layer.style({
  offsets:{
     field: 'count',
     values:() => {
      return [10 + Math.random()*20, 10 + Math.random()*20]
     }
})

wall

shapeforwallGeofence arc layer.

• wall
• Support gradient
• Supports textures

simple

shapeforsimpleSimple line layer.

• simple
• Support gradient

arrow

• line

Line layers support configuring arrows, which have additional styles.

layer.style({
  arrow: {
    enable: true,
    arrowWidth: 2,
    arrowHeight: 3,
    tailWidth: 1,
  },
});

linear

• line、arc、arc3d、greatcircle、wall、simple

The line layer supports configuring gradient effects, which will be overwritten after configuring the gradient effect.layer.colorMethod to set the color.

IColor

const color = `rgb(200, 100, 50)`;
const color2 = '#ff0';

ILinearDir

• vertical vertical (along the direction)
• horizontal

type ILinearDir = 'vertical' | 'horizontal';

texture

• line、arc、arc3d、greatcircle

Line layers support textures and texture animations, and texture styles have their own parameters.

ITextureBlend

The texture of the line layer supports two types when blended with the color of the line itself.normalandreplace。

• normal texture and line color blending
• replace Replace line color using texture

type ITextureBlend = 'normal' | 'replace';

texture advance

✨ animate
When the line layer (shape is arc/arc3d) turns on the animation mode, the distribution of the texture on the line layer will also be related to the parameters of animate

The number of textures arranged on a line layer is roughly duration/interval

.animate({
    duration: 1,
    interval: 0.2,
    trailLength: 0.1
});

// At this time, the number of texture maps is duration / interval = 5

✨ textureBlend parameters
By controlling the textureBlend parameter in the style method, we can control the blending of texture layers and line layers.

• normal
• replace

.style({
    lineTexture: true, // Enable line mapping function
    iconStep: 30, // Set the spacing of the texture
    textureBlend: 'replace', //Set the texture blending method. The default value is normal. The optional values ​​are normal/replace.
  });

dash

• line、arc、arc3d、greatcircle

The line layer supports configuring dashed lines, which have their own additional style parameters.

layer.style({
    lineType: 'dash'
    dashArray: [5, 5]
})

ILineType

• solid solid line
• dash dashed line

IDashArray

dashArrayonly atILineTypefordashedwill take effect.

// len1 solid line length len2 interval length
type IDashArray = [len1: number, len2: number]