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
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|