246 lines
8.3 KiB
Markdown
246 lines
8.3 KiB
Markdown
---
|
||
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)\|<br>[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"})
|
||
}),
|
||
});
|
||
```
|
||
|
||
|
||
|
||
<div style='text-align:center'>默认样式</div>
|
||
|
||
|
||
|
||
<div style='text-align:center'>placement:"point"</div>
|
||
|
||
|
||
|
||
<div style='text-align:center'>placement:"line"</div>
|
||
|
||
### 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
|
||
})
|
||
})
|
||
})
|
||
```
|
||
|
||
|
||
|
||
|
||
|