类：样式

ol/style/Style~样式


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

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

要素样式

若未定义样式，则使用以下默认样式。

 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/Style.js, line 162
Name Type 描述
geometry string | Geometry | GeometryFunction | undefined

要素属性、几何体或函数，返回用于此样式渲染的几何体。
fill Fill | undefined

填充样式。
image ImageStyle | undefined

图像样式。
renderer RenderFunction | undefined

自定义渲染器。配置时，fill, stroke和image将被忽略，并且提供的函数将在每个几何体的每个渲染帧中被调用。
hitDetectionRenderer RenderFunction | undefined

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

描边样式。
text Text | undefined

文本样式。
zIndex number | undefined

Z轴索引。

方法

clone(){Style}

style/Style.js, line 236

克隆样式。

返回：
克隆样式

getFill(){Fill | null}

style/Style.js, line 320

获取填充样式。

返回：
填充样式

getGeometry(){string | Geometry | GeometryFunction | null}

style/Style.js, line 301

获取待渲染的几何。

返回：
返回将使用此样式渲染的几何图形的要素属性、几何图形或函数。

getGeometryFunction(){GeometryFunction}

style/Style.js, line 311

获取用于生成渲染几何的函数。

返回：
一个函数，接收一个要素并返回用于渲染的几何，而非该要素的几何。

getHitDetectionRenderer(){RenderFunction | null}

style/Style.js, line 290

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

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

getImage(){ImageStyle | null}

style/Style.js, line 338

获取图像样式。

返回：
图像样式。

getRenderer(){RenderFunction | null}

style/Style.js, line 260

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

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

getStroke(){Stroke | null}

style/Style.js, line 356

获取笔划样式。

返回：
描边样式。

getText(){Text | null}

style/Style.js, line 374

获取文本样式。

返回：
文本样式。

getZIndex(){number | undefined}

style/Style.js, line 392

获取样式的z-index。

返回：
Z索引。

setFill(fill)

style/Style.js, line 329

设置填充样式。

Name Type 描述
fill Fill | null

填充样式

setGeometry(geometry)

style/Style.js, line 404

指定用于渲染的几何图形，代替要素的几何图形。

Name Type 描述
geometry string | Geometry | GeometryFunction | null

要素属性、几何体或返回几何体的函数，用于为此样式进行渲染。

setHitDetectionRenderer(renderer)

style/Style.js, line 280

为用于命中检测的此样式设置自定义渲染器函数。

Name Type 描述
renderer RenderFunction | null

自定义渲染器函数。

setImage(image)

style/Style.js, line 347

设置图像样式。

Name Type 描述
image ImageStyle

图像样式。

setRenderer(renderer)

style/Style.js, line 270

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

Name Type 描述
renderer RenderFunction | null

自定义渲染器函数。

setStroke(stroke)

style/Style.js, line 365

设置描边样式。

Name Type 描述
stroke Stroke | null

描边样式。

setText(text)

style/Style.js, line 383

设置文本样式。

Name Type 描述
text Text

文本样式。

setZIndex(zIndex)

style/Style.js, line 429

设置 z-index。

Name Type 描述
zIndex number | undefined

Z索引