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

矢量图层可以使用包含描边、填充、图像和文本样式属性的对象字面量来设置样式。以下样式类型可以组合成一个单一对象。例如，一个同时包含描边和填充属性的样式示例如下：

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

根据要应用的符号化器类型，查看可用属性的详细信息： Stroke - 用于设置线和多边形描边的属性 Fill - 用于填充多边形的属性 Text - 用于标注点、线和多边形的属性 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',
    },
  },
];

类型定义

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}

若未指定其他样式，则应用这些默认样式属性。

属性:

Name	Type	描述
`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。

属性:

Name	Type	描述
`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`。（仅限画布渲染）
`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）
`circle-stroke-miter-limit`	NumberExpression (defaults to 10)	斜接限制（仅限画布）
`circle-displacement`	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	样式的 z-index（仅限 Canvas）

FlatFill{Object}

应用于面要素的填充样式属性。

属性:

Name	Type	描述
`fill-color`	ColorExpression \| undefined	填充颜色`'none'`指无填充且无命中检测（仅适用于Canvas）。
`fill-pattern-src`	StringExpression \| undefined	填充图案图像源 URI。如果`fill-color`当它也被定义时，将用于为该图像着色。（仅限画布表达式）
`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 才能渲染带图标的点。

属性:

Name	Type	描述
`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`：已加载图像的属性。请注意：您必须提供 `icon-cross-origin`。若需使用 Canvas 渲染器访问像素数据，请使用该值。参见地图（https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image）以获取更多详细信息。
`icon-offset`	SizeExpression (defaults to [0, 0])	偏移量、大小和偏移原点共同定义了从原始图标图像中提取的子矩形。
`icon-displacement`	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	避让模式（仅限画布）
`z-index`	NumberExpression \| undefined	样式的 zIndex 属性。（仅适用于画布）

FlatShape{Object}

用于渲染点要素的常规形状样式属性。至少必须提供 shape-points。

属性:

Name	Type	描述
`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`（仅限画布）
`shape-stroke-line-join`	StringExpression (defaults to 'round')	线连接样式：`bevel`, `round`或者`miter`。（仅限画布）
`shape-stroke-line-dash`	NumberArrayExpression \| undefined	线条虚线模式（仅Canvas支持）
`shape-stroke-line-dash-offset`	NumberExpression (defaults to 0)	虚线偏移（仅限Canvas）
`shape-stroke-miter-limit`	NumberExpression (defaults to 10)	斜接限制（仅适用于Canvas）。
`shape-radius`	NumberExpression \| undefined	正多边形半径（表达式仅在 WebGL 中）
`shape-radius2`	NumberExpression \| undefined	用于生成星形而非正多边形的第二个半径。 (表达式仅支持WebGL)
`shape-angle`	NumberExpression (defaults to 0)	形状的弧度角。值为0时，形状的一个顶点朝上。（仅适用于WebGL表达式）
`shape-displacement`	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	整理模式（仅限画布）
`z-index`	NumberExpression \| undefined	样式的z-index（仅限画布）

FlatStroke{Object}

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

属性:

Name	Type	描述
`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	沿法线方向的描边偏移（以像素为单位）。正值会使线沿其方向向右偏移。（仅限WebGL）
`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	样式的z-index属性。

FlatStyle{FlatFill} {FlatStroke} {FlatText} {FlatIcon} {FlatShape} {FlatCircle}

对于静态样式，可通过具有填充、描边、文本、图标、常规形状和/或圆形属性的对象字面量来调用 layer.setStyle() 方法。

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

扁平样式字面量或相同数组。

FlatText{Object}

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

属性:

Name	Type	描述
`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'`默认为`'center'`为了`'text-placement': 'point'`为了`'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	样式的z轴索引。

NumberArrayExpression{Array.<number>} {Array}

数字数组（例如 [1, 2, 3]）或求值结果相同的表达式（例如 ['get', 'values']）。

NumberExpression{number} {Array}

数字字面量（例如 42）或求值为数字的表达式（例如 ['+', 40, 2]）。

Rule{Object}

规则用于条件式应用样式。若规则的过滤器求值为 true，则应用该样式。

属性:

Name	Type	描述
`style`	FlatStyle \| Array<FlatStyle>	过滤器匹配时应应用的样式。
`filter`	EncodedExpression \| undefined	用于判断样式是否适用的过滤器。若未指定过滤器，则规则始终生效（除非为 else 规则）。
`else`	boolean \| undefined	如果为真，则仅当先前无其他规则适用时，此规则才生效。若else规则也包含过滤器，且过滤器不匹配，则该规则不生效。

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

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

StringExpression{string} {Array}

字符串字面量（例如 'hello'）或求值为字符串的表达式（例如 ['get', 'greeting']）。

StyleVariables{Object.<string, (number|Array.<number>|string|boolean)>}

样式变量以对象形式提供。变量可在 style expression 中通过 ['var', 'varName'] 运算符读取。每个变量必须持有一个字面值（而非表达式）。

模块：ol/style/flat

类型定义

BooleanExpression{boolean} {Array}

ColorExpression{Color} {string} {Array}

DefaultStyle{Object}

属性:

FlatCircle{Object}

属性:

FlatFill{Object}

属性:

FlatIcon{Object}

属性:

FlatShape{Object}

属性:

FlatStroke{Object}

属性:

FlatStyle{FlatFill} {FlatStroke} {FlatText} {FlatIcon} {FlatShape} {FlatCircle}

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

FlatText{Object}

属性:

NumberArrayExpression{Array.<number>} {Array}

NumberExpression{number} {Array}

Rule{Object}

属性:

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

StringExpression{string} {Array}

StyleVariables{Object.<string, (number|Array.<number>|string|boolean)>}