Style

style 方法用于配制图层的样式，相同图层拥有不同的 shape 图形，不同 shape 的图层 style 方法接受不同的参数。

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

common

通用 style 参数，所有图形都支持的参数。

样式数据映射

默认样式配置为常量值，某些配置也支持数据映射，映射定义同 color、size参数一致。

• field: 映射字段
• value： 映射区间或者自定义回调函数

如：

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

    }
})

2D shape

shape 为平面图形、如三角形、正方等。

• IFillShape

unit

• pixel 默认值
• meter 单位为米

type IUnit = 'pixel' | 'meter';

点图层支持等面积点，点大小的单位是米，同样通过 size 方法设置大小

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

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

🌟 从 v2.7.9 版本开始支持高德地图、高德地图 2.0、Mapbox 地图

3D column

shape 为 3D 柱图。

• IColumn

3D column linear

柱图支持配置渐变色，在配置渐变效果后会覆盖 layer.color 方法设置的颜色。

color

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

opacityLinear

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

text

shape 为文字。

• text

anchorType

图形/文字对齐锚点，用于控制图形或文字相对于坐标点的对齐方式。

• 在 2D shape（如 circle、square 等）中通过 anchor 属性使用，控制图形相对于坐标点的位置
• 在 text shape 中通过 textAnchor 属性使用，控制文字相对于坐标点的位置

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 使用示例（2D shape）

// 气泡底部对齐到坐标位置，常用于地图标注场景
const bubbleLayer = new PointLayer()
  .source(data, {
    parser: { type: 'json', x: 'lng', y: 'lat' },
  })
  .shape('circle')
  .size(30)
  .color('#5B8FF9')
  .style({
    anchor: 'bottom',
  });

// anchor 支持数据映射
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 fontFamily。

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

simple

shape 为简单点图形（精灵)。

• simple

icon

shape 为图标类型。

• icon

rotation

图标的旋转角度。

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

allowOverlap

控制图标在屏幕上是否允许相互压盖。设置为 false 时，L7 会在每次地图缩放或平移后对所有图标执行碰撞检测，自动隐藏与已放置图标重叠的图标，效果与 textAllowOverlap 一致。

const imageLayer = new PointLayer()
  .source(data, { parser: { type: 'json', x: 'lng', y: 'lat' } })
  .shape('icon')
  .size(15)
  .style({
    allowOverlap: false, // 开启碰撞避让
    padding: [4, 4], // 图标之间保留 4px 间距
  });

radar

shape 为雷达图。

• radar