OpenLayers v10.9.0 API - Module: ol/style/flat

矢量图层可以使用包含 stroke、fill、image 和 text 样式属性的对象字面量来设置样式。以下类型可以组合成单个对象。例如，同时具有 stroke 和 fill 属性的样式可能如下：

const style = {
  'stroke-color': 'yellow',
  'stroke-width': 1.5,
  'fill-color': 'orange',
};

根据要应用的符号化器类型，查看可用属性的详细信息：Stroke - 对线和多边形应用描边的属性 Fill - 填充多边形的属性 文本 - 标注点、线和多边形的属性 Icon - 用图标渲染点的属性 Circle - 用圆形渲染点的属性 Shape - 用正多边形渲染点的属性

要根据过滤器有条件地应用样式，可以使用 rules 列表。例如，如果人口超过 100 万，则用大橙色圆形标注点，否则用较小的蓝色圆形：

const rules = [
  {
    filter: ['>', ['get', 'population'], 1_000_000],
    style: {
      'circle-radius': 10,
      'circle-fill-color': 'red',
    }
  },
  {
    else: true,
    style: {
      'circle-radius': 5,
      'circle-fill-color': 'blue',
    },
  },
];

Type Definitions

BooleanExpression{boolean} {Array}

布尔字面量（如 true）或计算结果为布尔值的表达式（如 ['>', ['get', 'population'], 1_000_000]）。

ColorExpression{Color} {string} {Array}

CSS 命名颜色（如 'blue'）、3 个 RGB 值的数组（如 [0, 255, 0]）、4 个 RGBA 值的数组（如 [0, 255, 0, 0.5]），或计算结果为这些颜色类型之一的表达式（如 ['get', 'color']）。

DefaultStyle{Object}

当没有提供其他样式时，应用这些默认样式属性。

Properties:

Name	Type	Description
`fill-color`	string	`'rgba(255,255,255,0.4)'`
`stroke-color`	string	`'#3399CC'`
`stroke-width`	number	`1.25`
`circle-radius`	number	`5`
`circle-fill-color`	string	`'rgba(255,255,255,0.4)'`
`circle-stroke-width`	number	`1.25`
`circle-stroke-color`	string	`'#3399CC'`

FlatCircle{Object}

用于渲染点要素的圆形样式属性。至少需要提供 circle-radius。

Properties:

Name	Type	Description
`circle-radius`	NumberExpression \| undefined	圆形半径。
`circle-fill-color`	ColorExpression \| undefined	填充颜色。`'none'` 表示无填充且无命中检测。
`circle-stroke-color`	ColorExpression \| undefined	描边颜色。
`circle-stroke-width`	NumberExpression \| undefined	描边像素宽度。
`circle-stroke-line-cap`	StringExpression (defaults to 'round')	线端点样式：butt、round 或 square。（仅 Canvas）
`circle-stroke-line-join`	StringExpression (defaults to 'round')	线连接样式：bevel、round 或 miter。（仅 Canvas）
`circle-stroke-line-dash`	NumberArrayExpression \| undefined	虚线模式。（仅 Canvas）
`circle-stroke-line-dash-offset`	NumberExpression (defaults to 0)	虚线偏移。 (Canvas only)
`circle-stroke-miter-limit`	NumberExpression (defaults to 10)	斜接限制。 (Canvas only)
`circle-偏移量`	NumberArrayExpression (defaults to [0,0])	偏移量
`circle-scale`	SizeExpression (defaults to 1)	比例。二维缩放将产生椭圆。除非需要二维缩放，否则通过适当设置 circle-radius 可能获得更好的结果。
`circle-opacity`	NumberExpression \| undefined	圆形不透明度。（仅 WebGL）
`circle-rotation`	NumberExpression (defaults to 0)	旋转角度（弧度，顺时针为正，仅在与二维缩放配合使用时有意义）。
`circle-rotate-with-view`	BooleanExpression (defaults to false)	形状是否随视图旋转（仅 Canvas 支持表达式，仅在与二维缩放配合使用时有意义）。
`circle-declutter-mode`	DeclutterMode \| undefined	去重模式（仅 Canvas）
`z-index`	NumberExpression \| undefined	样式的 zIndex。（仅 Canvas）

FlatFill{Object}

应用于多边形要素的填充样式属性。

Properties:

Name	Type	Description
`fill-color`	ColorExpression \| undefined	填充颜色。`'none'` 表示无填充且无命中检测（仅适用于 Canvas）。
`fill-pattern-src`	StringExpression \| undefined	填充图案图像源 URI。如果也定义了 `fill-color`，则将用于着色此图像。（仅 Canvas 支持表达式）
`fill-pattern-size`	SizeExpression \| undefined	填充图案图像尺寸（像素）。可与 `fill-pattern-offset` 一起使用，以定义要从填充图案图像精灵表中使用的子矩形。
`fill-pattern-offset`	SizeExpression (defaults to [0, 0])	偏移量，与大小和偏移原点一起定义要从原始填充图案图像中使用的子矩形。
`fill-pattern-offset-origin`	IconOrigin (defaults to 'top-left')	偏移原点：bottom-left、bottom-right、top-left 或 top-right。（仅 WebGL）

FlatIcon{Object}

应用于点要素的图标样式属性。必须提供 icon-src 才能使用图标渲染点。

Properties:

Name	Type	Description
`icon-src`	string \| undefined	图像源 URI。
`icon-anchor`	NumberArrayExpression (defaults to [0.5, 0.5])	锚点。默认值为图标中心。
`icon-anchor-origin`	IconOrigin (defaults to 'top-left')	锚点原点：bottom-left、bottom-right、top-left 或 top-right。
`icon-anchor-x-units`	IconAnchorUnits (defaults to 'fraction')	锚点 x 值的指定单位。`'fraction'` 表示 x 值是图标的比例。`'pixels'` 表示 x 值以像素为单位。
`icon-anchor-y-units`	IconAnchorUnits (defaults to 'fraction')	锚点 y 值的指定单位。`'fraction'` 表示 y 值是图标的比例。`'pixels'` 表示 y 值以像素为单位。
`icon-color`	ColorExpression \| undefined	图标的着色颜色。如果未指定，图标将保持原样。
`icon-cross-origin`	null \| string \| undefined	已加载图像的 `crossOrigin` 属性。注意如果要使用 Canvas 渲染器访问像素数据，必须提供 `icon-cross-origin` 值。详见 https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image。
`icon-offset`	SizeExpression (defaults to [0, 0])	偏移量，与大小和偏移原点一起定义要从原始图标图像中使用的子矩形。
`icon-偏移量`	NumberArrayExpression (defaults to [0,0])	图标的偏移量。
`icon-offset-origin`	IconOrigin (defaults to 'top-left')	偏移原点：bottom-left、bottom-right、top-left 或 top-right。
`icon-opacity`	NumberExpression (defaults to 1)	图标的不透明度。
`icon-scale`	SizeExpression (defaults to 1)	比例。
`icon-width`	NumberExpression \| undefined	图标宽度。如果未指定，将使用实际图像宽度。不能与 `scale` 组合使用。（仅 WebGL 支持表达式）
`icon-height`	NumberExpression \| undefined	图标高度。如果未指定，将使用实际图像高度。不能与 `scale` 组合使用。（仅 WebGL 支持表达式）
`icon-rotation`	NumberExpression (defaults to 0)	旋转角度（弧度，正值为顺时针）。
`icon-rotate-with-view`	BooleanExpression (defaults to false)	图标是否随视图旋转。（仅 Canvas 支持表达式）
`icon-size`	SizeExpression \| undefined	图标尺寸（像素）。可与 `icon-offset` 一起使用，以定义要从原始（精灵）图标图像中使用的子矩形。（仅 WebGL 支持表达式）
`icon-declutter-mode`	DeclutterMode \| undefined	去重模式（仅 Canvas）
`z-index`	NumberExpression \| undefined	样式的 zIndex。（仅 Canvas）

FlatShape{Object}

用于渲染点要素的正多边形样式属性。至少需要提供 shape-points。

Properties:

Name	Type	Description
`shape-points`	NumberExpression \| undefined	星形和正多边形的点数。对于多边形，点数即为边数。（仅 WebGL 支持表达式）
`shape-fill-color`	ColorExpression \| undefined	填充颜色。`'none'` 表示无填充且无命中检测。
`shape-stroke-color`	ColorExpression \| undefined	描边颜色。
`shape-stroke-width`	NumberExpression \| undefined	描边像素宽度。
`shape-stroke-line-cap`	StringExpression (defaults to 'round')	线端点样式：butt、round 或 square。（仅 Canvas）
`shape-stroke-line-join`	StringExpression (defaults to 'round')	线连接样式：bevel、round 或 miter。（仅 Canvas）
`shape-stroke-line-dash`	NumberArrayExpression \| undefined	虚线模式。（仅 Canvas）
`shape-stroke-line-dash-offset`	NumberExpression (defaults to 0)	虚线偏移。 (Canvas only)
`shape-stroke-miter-limit`	NumberExpression (defaults to 10)	斜接限制。 (Canvas only)
`shape-radius`	NumberExpression \| undefined	正多边形的半径。 (Expressions only in WebGL)
`shape-radius2`	NumberExpression \| undefined	用于创建星形而非正多边形的第二半径。 (Expressions only in WebGL)
`shape-angle`	NumberExpression (defaults to 0)	形状的角度（弧度）。值为 0 时，形状的一个点朝上。（仅 WebGL 支持表达式）
`shape-偏移量`	NumberArrayExpression (defaults to [0,0])	形状的偏移量
`shape-opacity`	NumberExpression \| undefined	形状不透明度。（仅 WebGL）
`shape-rotation`	NumberExpression (defaults to 0)	旋转角度（弧度，正值为顺时针）。
`shape-rotate-with-view`	BooleanExpression (defaults to false)	形状是否随视图旋转。（仅 Canvas 支持表达式）
`shape-scale`	SizeExpression (defaults to 1)	比例。除非需要二维缩放，否则通过适当设置 shape-radius 和 shape-radius2 可能获得更好的结果。
`shape-declutter-mode`	DeclutterMode \| undefined	去重模式。（仅 Canvas）
`z-index`	NumberExpression \| undefined	样式的 zIndex。（仅 Canvas）

FlatStroke{Object}

应用于线字符串和多边形边界的描边样式属性。要应用描边，至少需要提供 stroke-color 或 stroke-width 之一。

Properties:

Name	Type	Description
`stroke-color`	ColorExpression \| undefined	描边颜色。
`stroke-width`	NumberExpression \| undefined	描边像素宽度。
`stroke-line-cap`	StringExpression (defaults to 'round')	线端点样式：`butt`、`round` 或 `square`。
`stroke-line-join`	StringExpression (defaults to 'round')	线连接样式：`bevel`、`round` 或 `miter`。
`stroke-line-dash`	NumberArrayExpression \| undefined	虚线图案。
`stroke-line-dash-offset`	NumberExpression (defaults to 0)	虚线偏移。
`stroke-miter-limit`	NumberExpression (defaults to 10)	斜接限制。
`stroke-offset`	NumberExpression \| undefined	沿法线的描边偏移量（像素）。正值相对于线的方向将线向右偏移。
`stroke-pattern-src`	string \| undefined	描边图案图像源 URI。如果也定义了 `stroke-color`，则将用于着色此图像。（仅 WebGL）
`stroke-pattern-offset`	SizeExpression (defaults to [0, 0])	偏移量，与大小和偏移原点一起定义要从原始描边图案图像中使用的子矩形。（仅 WebGL）
`stroke-pattern-offset-origin`	IconOrigin (defaults to 'top-left')	偏移原点：bottom-left、bottom-right、top-left 或 top-right。（仅 WebGL）
`stroke-pattern-size`	SizeExpression \| undefined	描边图案图像尺寸（像素）。可与 `stroke-pattern-offset` 一起使用，以定义要从原始（精灵）填充图案图像中使用的子矩形。（仅 WebGL）
`stroke-pattern-spacing`	NumberExpression \| undefined	每个图案出现之间的间距（像素）；如果未定义则为 0。（仅 WebGL）
`stroke-pattern-start-offset`	NumberExpression \| undefined	线起点处的描边图案偏移量（像素）。（仅 WebGL）
`z-index`	NumberExpression \| undefined	样式的 zIndex。

FlatStyle{FlatFill} {FlatStroke} {Flat文本} {FlatIcon} {FlatShape} {FlatCircle}

对于静态样式，可以使用具有 fill、stroke、text、icon、regular shape 和/或 circle 属性的对象字面量调用 layer.setStyle() 方法。

FlatStyleLike{FlatStyle} {Array<FlatStyle>} {Array<Rule>}

平面样式字面量或其数组。

Flat文本{Object}

应用于所有要素的标签样式属性。至少需要提供 text-value。注意：WebGL 图层目前不支持文本样式

Properties:

Name	Type	Description
`text-value`	StringExpression \| undefined	文本内容（使用 `\n` 换行）。
`text-font`	StringExpression (defaults to '10px sans-serif')	字体样式，作为 CSS `font` 值。
`text-max-angle`	NumberExpression (defaults to Math.PI/4)	当 `text-placement` 设置为 `'line'` 时，允许相邻字符之间的最大角度。预期值以弧度为单位，默认为 45°（`Math.PI / 4`）。
`text-offset-x`	NumberExpression (defaults to 0)	水平文本偏移量（像素）。正值将使文本向右偏移。
`text-offset-y`	NumberExpression (defaults to 0)	垂直文本偏移量（像素）。正值将使文本向下偏移。
`text-overflow`	BooleanExpression (defaults to false)	对于多边形标签或当 `placement` 设置为 `'line'` 时，允许文本超出标签位置处多边形的宽度或其跟随路径的长度。
`text-placement`	StringExpression (defaults to 'point')	文本放置。
`text-repeat`	NumberExpression \| undefined	重复间隔（像素）。设置后，文本将按此间隔重复。仅在 `text-placement` 设置为 `'line'` 时可用。覆盖 `text-align`。
`text-scale`	SizeExpression \| undefined	比例。
`text-rotate-with-view`	BooleanExpression (defaults to false)	文本是否随视图旋转。
`text-rotation`	NumberExpression (defaults to 0)	旋转角度（弧度，正值为顺时针）。
`text-align`	StringExpression \| undefined	文本对齐方式。可能的值：`'left'`、`'right'`、`'center'`、`'end'` 或 `'start'`。`'text-placement': 'point'` 时默认为 `'center'`。`'text-placement': 'line'` 时，默认让渲染器选择不超过 `text-max-angle` 的放置位置。
`text-justify`	StringExpression \| undefined	文本框内的文本对齐。如果未设置，文本向 `textAlign` 锚点对齐。否则，使用 `'left'`、`'center'` 或 `'right'` 选项在文本框内对齐文本。注意：`text-justify` 在即时渲染和 `'text-placement': 'line'` 时被忽略。
`text-baseline`	StringExpression (defaults to 'middle')	文本基线。可能的值：`'bottom'`、`'top'`、`'middle'`、`'alphabetic'`、`'hanging'`、`'ideographic'`。
`text-padding`	NumberArrayExpression (defaults to [0, 0, 0, 0])	文本周围用于去重叠和背景的内边距（像素）。数组中值的顺序为 `[top, right, bottom, left]`。
`text-fill-color`	ColorExpression \| undefined	填充颜色。`'none'` 表示无填充且无命中检测。
`text-background-fill-color`	ColorExpression \| undefined	填充颜色。`'none'` 表示无填充且无命中检测。
`text-stroke-color`	ColorExpression \| undefined	描边颜色。
`text-stroke-line-cap`	StringExpression (defaults to 'round')	线端点样式：`butt`、`round` 或 `square`。
`text-stroke-line-join`	StringExpression (defaults to 'round')	线连接样式：`bevel`、`round` 或 `miter`。
`text-stroke-line-dash`	NumberArrayExpression \| undefined	虚线图案。
`text-stroke-line-dash-offset`	NumberExpression (defaults to 0)	虚线偏移。
`text-stroke-miter-limit`	NumberExpression (defaults to 10)	斜接限制。
`text-stroke-width`	NumberExpression \| undefined	描边像素宽度。
`text-background-stroke-color`	ColorExpression \| undefined	描边颜色。
`text-background-stroke-line-cap`	StringExpression (defaults to 'round')	线端点样式：`butt`、`round` 或 `square`。
`text-background-stroke-line-join`	StringExpression (defaults to 'round')	线连接样式：`bevel`、`round` 或 `miter`。
`text-background-stroke-line-dash`	NumberArrayExpression \| undefined	虚线图案。
`text-background-stroke-line-dash-offset`	NumberExpression (defaults to 0)	虚线偏移。
`text-background-stroke-miter-limit`	NumberExpression (defaults to 10)	斜接限制。
`text-background-stroke-width`	NumberExpression \| undefined	描边像素宽度。
`text-declutter-mode`	DeclutterMode \| undefined	去重模式
`z-index`	NumberExpression \| undefined	样式的 zIndex。

NumberArrayExpression{Array.<number>} {Array}

数字数组（如 [1, 2, 3]）或计算结果为相同类型的表达式（如 ['get', 'values']）。

NumberExpression{number} {Array}

数字字面量（如 42）或计算结果为数字的表达式（如 ['+', 40, 2]）。

Rule{Object}

规则用于有条件地应用样式。如果规则的过滤器求值为 true，则将应用该样式。

Properties:

Name	Type	Description
`style`	FlatStyle \| Array<FlatStyle>	过滤器匹配时要应用的样式。
`filter`	EncodedExpression \| undefined	用于确定样式是否适用的过滤器。如果不包含过滤器，规则始终适用（除非是 else 规则）。
`else`	boolean \| undefined	如果为 true，则仅当没有其他先前的规则适用时，此规则才适用。如果 else 规则也有过滤器，当过滤器不匹配时，规则将不适用。

SizeExpression{number} {Array.<number>} {Array}

两个数字的数组（如 [10, 20]）或计算结果为相同类型的表达式（如 ['get', 'size']）。

StringExpression{string} {Array}

字符串字面量（如 'hello'）或计算结果为字符串的表达式（如 ['get', 'greeting']）。

StyleVariables{对象。<string, (number|Array.<number>|string|boolean)>}

样式变量以对象形式提供。可以在 样式表达式 中使用 ['var', 'varName'] 运算符读取变量。每个变量必须持有字面值（不是表达式）。