Style | 柿子树备忘录

Style作为矢量要素渲染样式的容器，包含渲染要素边界（border）的stroke轮廓样式、内部填充的fill样式、用于标记的text文本样式等。

# 1. 默认样式

当要素Feature没有设置style样式时，会使用一个默认的样式 (opens new window)，对几何对象进行渲染。

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
    })
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

跟样式一起使用的还有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 (opens new window)	填充样式。
image	ol/style/Image~ImageStyle (opens new window)	图像样式
renderer	ol/style/Style~RenderFunction (opens new window)	渲染函数
stroke	ol/style/Stroke~Stroke (opens new window)	轮廓样式。
text	ol/style/Text~Text (opens new window)	文本样式
geometry	ol/geom/Geometry~Geometry (opens new window)\| ol/style/Style~GeometryFunction (opens new window)	要渲染的几何对象
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的实例，不能是单独的轮廓、填充、图像等。

/** 
 *  1、ol/style/Style ：作为矢量要素渲染器的容器。
 *  所有Feature要素的样式都得是Style的实例，不能是单独的轮廓、填充、图像等。
 *      构造器 options 对象属性：
 *          geometry：要渲染的几何对象；
 *          fill：填充样式；
 *          image：图片样式；
 *          stroke：形状的轮廓样式
 *          text：文本样式
 *          renderer：渲染器
 */

1
2
3
4
5
6
7
8
9
10
11

# 3.2 Stroke

/**
 * 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]
    })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 3.3 Fill

/**
 * 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]
    })
})

1
2
3
4
5
6
7
8
9
10
11

# 3.4 Text

/**
 * 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"})
    }),
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

默认样式

placement:"point"

placement:"line"

# 3.5 Image

/**
 * 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
        })
    })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51