---
title: Style
date: 2020-10-10
author: ac
tags:
- OpenLayers
- Style
categories:
- GIS
---
> Style作为矢量要素渲染样式的容器，包含渲染要素边界（border）的`stroke`轮廓样式、内部填充的`fill`样式、用于标记的`text`文本样式等。
## 1. 默认样式
当要素`Feature`没有设置`style`样式时，会使用一个[默认的样式](https://openlayers.org/en/latest/apidoc/module-ol_style_Style-Style.html)，对几何对象进行渲染。
```javascript
import {Fill, Stroke, Circle, Style} from 'ol/style';
var fill = new Fill({
color: 'rgba(255,255,255,0.4)'
});
var stroke = new Stroke({
color: '#3399CC',
width: 1.25
});
var styles = [
new Style({
image: new Circle({
fill: fill,
stroke: stroke,
radius: 5
}),
fill: fill,
stroke: stroke
})
];
```
跟样式一起使用的还有`ol.color`，用于设置样式的颜色，可以通过数组`[r,g,b,a]`的形式创建`color`实例。
## 2. 构造函数
在创建`style`实例的时候，可以在构造参数opt_options中添加`stroke`、`fill`、`text`、`image`样式等或是配置渲染函数`renderer`。但当其renderer属性被指定时，其fill、image、stroke属性将无效。
opt_options
| name | type | Description |
| -------- | ------------------------------------------------------------ | ---------------- |
| fill | [ol/style/Fill~Fill](https://openlayers.org/en/latest/apidoc/module-ol_style_Fill-Fill.html) | 填充样式。 |
| image | [ol/style/Image~ImageStyle](https://openlayers.org/en/latest/apidoc/module-ol_style_Image-ImageStyle.html) | 图像样式 |
| renderer | [ol/style/Style~RenderFunction](https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html#~RenderFunction) | 渲染函数 |
| stroke | [ol/style/Stroke~Stroke](https://openlayers.org/en/latest/apidoc/module-ol_style_Stroke-Stroke.html) | 轮廓样式。 |
| text | [ol/style/Text~Text](https://openlayers.org/en/latest/apidoc/module-ol_style_Text-Text.html) | 文本样式 |
| geometry | [ol/geom/Geometry~Geometry](https://openlayers.org/en/latest/apidoc/module-ol_geom_Geometry-Geometry.html)\|
[ol/style/Style~GeometryFunction](https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html#~GeometryFunction) | 要渲染的几何对象 |
| zIndex | number | Z方向上的索引 |
注意：
- 对于点、线要素，如果style中只设置了fill填充样式是显示不出来的
- 对于点要素，如果style中只设置了stroke轮廓样式是显现不出来的。
- 对于点对象，使用text文本样式，如果placement设置为'point'则text文本正常显示，但为‘line’则会报错
- image图片样式，作为抽象类接受子类实例（`ol/style/Icon`，`ol/style/Circle`，`ol/style/RegularShape`)
- Icon图标样式和Circle圆形样式只作用于点要素上，线、面要素是没有效果的。
## 3. 示例
### 3.1 Style
> 所有Feature要素的样式都得是Style的实例，不能是单独的轮廓、填充、图像等。
```javascript
/**
* 1、ol/style/Style ：作为矢量要素渲染器的容器。
* 所有Feature要素的样式都得是Style的实例，不能是单独的轮廓、填充、图像等。
* 构造器 options 对象属性：
* geometry：要渲染的几何对象；
* fill：填充样式；
* image：图片样式；
* stroke：形状的轮廓样式
* text：文本样式
* renderer：渲染器
*/
```
### 3.2 Stroke
```javascript
/**
* 2.'ol/style/Stroke ：轮廓样式
* 构造器 options 对象属性：
* color：轮廓颜色；
* width：轮廓厚度；
* lineCap：轮廓端点的样式，butt, round, or square.
* lineJoin：节点连接的样式，butt, round, or square.
* lineDash：用于创建虚线
* lineDashOffset：
* miterLimit：
* 注意，对于点要素，如果style中只设置了stroke轮廓样式是显现不出来的。
*/
var strokeStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color:[0,225,0,0.8],
width:1.25,
lineDash:[5]
})
})
```
### 3.3 Fill
```javascript
/**
* 3、'ol/style/Fill'：填充样式
* 构造器 options 对象属性：
* color：轮廓颜色；
* 注意：对于点、线要素，如果style中只设置了fill填充样式是显示不出来的
*/
var fillStyle = new ol.style.Style({
fill: new ol.style.Fill({
color:[255,0,0,0.6]
})
})
```
### 3.4 Text
```javascript
/**
* 4、'ol/style/Text'：文本样式
* 构造器 options 对象属性：
* font：指定文本字体样式，specify a custom font weight, size, and family.如：'bold 48px serif'；
* maxAngle：最大旋转角
* offsetX，offsetY：水平方向和垂直方向的偏移量
* overflow：当几何对象是面或文本位置为'line'时，是否允许文本内容溢出
* placement：文本位置，'point'|'line'
* text：文本内容
* textAlign：文本对齐方式
* rotateWithView：是否随View旋转
* fill：填充样式，字体颜色
* stroke：轮廓样式
* backgroundFill：文本背景填充样式，当placement为point有效
* padding：文本内边距[top, right, bottom, left].
*
* 注意：对于点对象，使用text文本样式，如果placement设置为'point'则text文本正常显示，但为‘line’则会报错
*/
var textStyle = new ol.style.Style({
text: new ol.style.Text({
text:"文本注记",
font:'bold 16px serif',
padding:[5,15,15,15],
placement:"line",
stroke:new ol.style.Stroke({
color:"#939393",
width:1
}),
overflow:true,
fill:new ol.style.Fill({color:"#FF6B75"}),
backgroundFill:new ol.style.Fill({color:"#FF6B75"})
}),
});
```
默认样式
placement:"point"
placement:"line"
### 3.5 Image
```javascript
/**
* 5、'ol/style/Image'：图片样式，作为抽象类接受子类实例（多态），
* 其子类有'ol/style/Icon'，'ol/style/Circle'，'ol/style/RegularShape'
* 构造器 options 对象常用属性：
* opacity：不透明度；
* rotateWithView：是否随View旋转
* rotation：旋转角度，Math.PI/4
* scale
* displacement
*
* 6、'ol/style/Icon' ：图标样式
* 构造器 options 对象常用属性：
* img ：HTMLImageElement对象
* imgSize ：图片大小[width, height],只有当img设置而src没有设置时才需要，并且在Internet
* Explorer 11中用于SVG图像。提供的imgSize需要匹配图像的实际大小。
* src ：图片的uri地址
* size: Icon的大小（单位：px），可以配合offset设置图标的显示区域
*
*
* 7、ol/style/Circle ：圆形样式
* 构造器 options 对象常用属性：
* radius：半径；
* fill：填充样式；
* stroke：形状的轮廓样式
* displacement：默认[0,0]
*
* 注意：Icon图标样式和Circle圆形样式只作用于点要素上，线、面要素是没有效果的
*/
var IconStyle = new ol.style.Style({
image:new ol.style.Icon({
// anchor:[0,0],
// anchorOrigin:'top-right',
// anchorXUnits:'fraction',
// anchorYUnits:'pixels',
// offsetOrigin:"top-right",
src:"./img/26.jpg",
opacity:0.8,
scale:0.25,
// size:[32,32],
// offset:[30,20]
})
})
var CircleStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color:[0,255,0,0.5],
width:2
})
})
})
```
