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.

style data mapping

The default style configuration is a constant value. Some configurations also support data mapping. The mapping definition is the same as the color and size parameters.

• field: mapping field
• value: mapping interval or custom callback function

like:

layer.style({
    opacity:{
        field:'name'
        value:[0.1,0.5,1],

    }
})

2D shape

shapeFor plane figures, such as triangles, squares, etc.

• IFillShape

unit

• pixel default value
• meter unit is meter

type IUnit = 'pixel' | 'meter';

The point layer supports equal-area points. The unit of point size is meters. The size is also set through the size method.

import { PointLayer } from '@antv/l7';

const layer = PointLayer().source(data).shape('circle').size(100).color('#f00').style({
  unit: 'meter',
});

🌟 Starting from version v2.7.9, AMap, AMap 2.0, and Mapbox maps are supported

3D column

shapeis a 3D column chart.

• IColumn

3D column linear

The column chart supports configuring gradient colors, which will be overwritten after configuring the gradient effect.layer.colorMethod to set the color.

color

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

opacityLinear

type IDir = 'up' | 'down';
interface IOpcityLinear = {
  enable: boolean;
  dir: IDir;
}

text

shapefor text.

• text

anchorType

Anchor point for shape/text alignment, controls the alignment of the shape or text relative to the coordinate point.

• For 2D shapes (e.g. circle, square), use the anchor property to control the shape’s position relative to the coordinate point
• For text shapes, use the textAnchor property to control the text’s position relative to the coordinate point

export enum anchorType {
  'CENTER' = 'center',
  'TOP' = 'top',
  'TOP-LEFT' = 'top-left',
  'TOP-RIGHT' = 'top-right',
  'BOTTOM' = 'bottom',
  'BOTTOM-CENTER' = 'bottom-center',
  'BOTTOM-LEFT' = 'bottom-left',
  'BOTTOM-RIGHT' = 'bottom-right',
  'LEFT' = 'left',
  'RIGHT' = 'right',
}

anchor usage example (2D shape)

// Align the bottom of the bubble to the coordinate position, commonly used for map annotation
const bubbleLayer = new PointLayer()
  .source(data, {
    parser: { type: 'json', x: 'lng', y: 'lat' },
  })
  .shape('circle')
  .size(30)
  .color('#5B8FF9')
  .style({
    anchor: 'bottom',
  });

// anchor supports data mapping
const layer = new PointLayer()
  .source(data, {
    parser: { type: 'json', x: 'lng', y: 'lat' },
  })
  .shape('circle')
  .size(20)
  .color('#5B8FF9')
  .style({
    anchor: {
      field: 'type',
      value: ['center', 'bottom', 'top'],
    },
  });

font

css font Family。

const font = 'sans-serif';
const font2 = 'Times New Roman';

simple

shapeFor simple point graphics (elves).

• simple

icon

shapeis the icon type.

• icon

rotation

The rotation angle of the icon.

const imageLayer = new PointLayer({ layerType: 'fillImage' })
  .source(data)
  .shape('wind', (wind) => {
    if (wind === 'up') {
      return 'arrBlue';
    }
    return 'arrRed';
  })
  .size(15)
  .style({
    rotation: 0,
  });

allowOverlap

Controls whether icons on screen are allowed to overlap each other. When set to false, L7 runs collision detection across all icons after every map zoom or pan, and automatically hides any icon that would overlap one already placed. The behavior mirrors textAllowOverlap on text layers.

const imageLayer = new PointLayer()
  .source(data, { parser: { type: 'json', x: 'lng', y: 'lat' } })
  .shape('icon')
  .size(15)
  .style({
    allowOverlap: false, // enable collision avoidance
    padding: [4, 4], // keep a 4px gap between icons
  });

radar

shapeis a radar chart.

• radar