Class: Style

ol/style/Style~Style 


import Style from 'ol/style/Style.js';

矢量要素渲染样式的容器。通过 set*() 方法对样式或其子项所做的任何更改，在使用该样式的要素或图层重新渲染之前不会生效。

要素 styles

如果未定义样式，则使用以下默认样式：

 import {Circle, Fill, Stroke, Style} from 'ol/style.js';

 const fill = new Fill({
   color: 'rgba(255,255,255,0.4)',
 });
 const stroke = new Stroke({
   color: '#3399CC',
   width: 1.25,
 });
 const styles = [
   new Style({
     image: new Circle({
       fill: fill,
       stroke: stroke,
       radius: 5,
     }),
     fill: fill,
     stroke: stroke,
   }),
 ];

单独的编辑样式有以下默认值：

 import {Circle, Fill, Stroke, Style} from 'ol/style.js';

 const styles = {};
 const white = [255, 255, 255, 1];
 const blue = [0, 153, 255, 1];
 const width = 3;
 styles['Polygon'] = [
   new Style({
     fill: new Fill({
       color: [255, 255, 255, 0.5],
     }),
   }),
 ];
 styles['MultiPolygon'] =
     styles['Polygon'];
 styles['LineString'] = [
   new Style({
     stroke: new Stroke({
       color: white,
       width: width + 2,
     }),
   }),
   new Style({
     stroke: new Stroke({
       color: blue,
       width: width,
     }),
   }),
 ];
 styles['MultiLineString'] = styles['LineString'];

 styles['Circle'] = styles['Polygon'].concat(
   styles['LineString']
 );

 styles['Point'] = [
   new Style({
     image: new Circle({
       radius: width * 2,
       fill: new Fill({
         color: blue,
       }),
       stroke: new Stroke({
         color: white,
         width: width / 2,
       }),
     }),
     zIndex: Infinity,
   }),
 ];
 styles['MultiPoint'] =
     styles['Point'];
 styles['GeometryCollection'] =
     styles['Polygon'].concat(
         styles['LineString'],
         styles['Point']
     );

new Style(options)

style/样式。js, line 162
Name Type Description
geometry string | Geometry | Geometry函数 | undefined

要素属性或几何图形，或返回此样式要渲染的几何图形的函数。
fill Fill | undefined

填充样式。
image ImageStyle | undefined

图像样式。
renderer Render函数 | undefined

自定义渲染器。配置后，fill、stroke 和 image 将被忽略，提供的函数将在每个渲染帧为每个几何图形调用。
hitDetectionRenderer Render函数 | undefined

命中检测的自定义渲染器。如果提供，将用于命中检测渲染。
stroke Stroke | undefined

描边样式。
text 文本 | undefined

文本样式。
zIndex number | undefined

Z 索引。

Methods

clone(){Style}

style/样式。js, line 236

克隆样式。

返回值：
The cloned style.

getFill(){Fill | null}

style/样式。js, line 320

获取fill style.

返回值：
填充样式。

getGeometry(){string | Geometry | Geometry函数 | null}

style/样式。js, line 301

获取geometry to be rendered.

返回值：
要素 property or geometry or function that returns the geometry that will be rendered with this style.

getGeometry函数(){Geometry函数}

style/样式。js, line 311

获取function used to generate a geometry for rendering.

返回值：
函数 that is called with a feature and returns the geometry to render instead of the feature's geometry.

getHitDetectionRenderer(){Render函数 | null}

style/样式。js, line 290

获取通过 #setHitDetectionRenderer 或 hitDetectionRenderer 构造函数选项配置的自定义渲染器函数。

返回值：
自定义渲染函数。

getImage(){ImageStyle | null}

style/样式。js, line 338

获取image style.

返回值：
Image style.

getRenderer(){Render函数 | null}

style/样式。js, line 260

获取通过 #setRenderer 或 renderer 构造函数选项配置的自定义渲染器函数。

返回值：
自定义渲染函数。

getStroke(){Stroke | null}

style/样式。js, line 356

获取stroke style.

返回值：
描边样式。

get文本(){文本 | null}

style/样式。js, line 374

获取text style.

返回值：
文本样式。

getZIndex(){number | undefined}

style/样式。js, line 392

获取z-index for the style.

返回值：
Z索引。

setFill(fill)

style/样式。js, line 329

设置fill style.

Name Type Description
fill Fill | null

填充样式。

setGeometry(geometry)

style/样式。js, line 404

设置用于渲染的几何图形，代替要素自身的几何图形。

Name Type Description
geometry string | Geometry | Geometry函数 | null

要素属性或几何图形，或返回此样式要渲染的几何图形的函数。

setHitDetectionRenderer(renderer)

style/样式。js, line 280

设置此样式在命中检测中使用的自定义渲染函数。

Name Type Description
renderer Render函数 | null

自定义渲染函数。

setImage(image)

style/样式。js, line 347

设置image style.

Name Type Description
image ImageStyle

图像样式。

setRenderer(renderer)

style/样式。js, line 270

设置此样式的自定义渲染函数。设置后，样式的 fill、stroke 和 image 选项将被忽略。

Name Type Description
renderer Render函数 | null

自定义渲染函数。

setStroke(stroke)

style/样式。js, line 365

设置stroke style.

Name Type Description
stroke Stroke | null

描边样式。

set文本(text)

style/样式。js, line 383

设置text style.

Name Type Description
text 文本

文本样式。

setZIndex(zIndex)

style/样式。js, line 429

设置 z-index。

Name Type Description
zIndex number | undefined

Z索引。