openlayers 入门教程（十）：style 篇_openlayer style

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

---

OpenLayers 提供了一种强大且灵活的方式来自定义地图上的矢量要素（如点、线、面）的样式，这些样式是通过 ol/style 模块中的 ol.style.Style 类和其他相关子类（如 ol.style.Icon、ol.style.Stroke、ol.style.Fill、ol.style.Text 等）来实现的。

一、建基本样式

1. 为点（Marker）创建样式

import { Style, Circle, Fill, Stroke } from 'ol/style';

// 创建一个简单的红色实心圆形标记样式
var pointStyle = new Style({
    image: new Circle({
        radius: 5,
        fill: new Fill({ color: 'red' }),
        stroke: new Stroke({ color: 'black', width: 1 })
    })
});

// 为矢量点图层设置样式
var vectorSource = new VectorSource({ ... });
var vectorLayer = new VectorLayer({
    source: vectorSource,
    style: pointStyle
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2. 为线（LineString 或 Polygon 边界）创建样式

var lineStyle = new Style({
    stroke: new Stroke({
        color: 'blue',
        width: 2
    })
});

// 为矢量线图层设置样式
var vectorLayer = new VectorLayer({
    source: vectorSource,
    style: lineStyle
});
1
2
3
4
5
6
7
8
9
10
11
12

3. 为面（Polygon）填充样式

var polygonStyle = new Style({
    fill: new Fill({
        color: 'rgba(255, 255, 0, 0.5)' // 半透明黄色填充
    }),
    stroke: new Stroke({
        color: 'black',
        width: 1
    })
});

// 为矢量面图层设置样式
var vectorLayer = new VectorLayer({
    source: vectorSource,
    style: polygonStyle
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4. 为要素添加文字标注

var textStyle = new Style({
    text: new Text({
        font: '14px Arial',
        text: 'Label Text',
        fill: new Fill({ color: '#000' }),
        stroke: new Stroke({ color: '#fff', width: 2 }),
        offsetX: 10, // 文字相对于几何中心的水平偏移
        offsetY: 20  // 文字相对于几何中心的垂直偏移
    })
});

// 组合多个样式
var featureStyle = [polygonStyle, lineStyle, pointStyle, textStyle];

// 设置复合样式
var vectorLayer = new VectorLayer({
    source: vectorSource,
    style: function(feature) {
        return featureStyle; // 或者根据 feature 的属性动态返回样式
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

二、动态样式（基于特征属性的样式）

有时我们需要根据要素的属性动态决定其样式，可以使用函数式样式：

var vectorLayer = new VectorLayer({
    source: vectorSource,
    style: function(feature, resolution) {
        var fillColor;
        if (feature.get('type') === 'important') {
            fillColor = 'red';
        } else {
            fillColor = 'green';
        }

        return [
            new Style({
                fill: new Fill({ color: fillColor }),
                stroke: new Stroke({ color: 'black', width: 1 })
            })
        ];
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这个例子中，根据特征的 'type' 属性，填充颜色会动态变化。

三、使用Icon图标样式

import { Icon } from 'ol/style';

var iconStyle = new Style({
    image: new Icon({
        src: 'path/to/icon.png',
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        scale: 0.5
    })
});

// 设置带有图标的矢量点样式
var vectorLayer = new VectorLayer({
    source: vectorSource,
    style: iconStyle
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

以上就是 OpenLayers 中样式的基本使用方法，你可以组合使用这些样式以创建复杂的视觉效果，并根据具体需求调整样式属性。

四、实战示例

示例一：Openlayers实战：fill，stroke，icon，text应用范例

示例二：解决setText不能立即更新文字的问题

示例三：设置线段样式：粗细、渐变颜色、箭头及线头样式

示例四：多边形拐点用不同形状表示（圆形、三角形、矩形、正方形、星形…）

示例五： 给feature填充线性渐变色

五、Openlayers 入门教程 -系列文章列表

• openlayers 入门教程（一）：应该如何学习openlayers
• openlayers 入门教程（二）：Map 篇
• openlayers 入门教程（三）：View 篇
• openlayers 入门教程（四）：Layers 篇
• openlayers 入门教程（五）：Sources 篇
• openlayers 入门教程（六）：Controls篇
• openlayers 入门教程（七）：Interactions篇
• openlayers 入门教程（八）：Geom 篇
• openlayers 入门教程（九）：Overlay 篇
• openlayers 入门教程（十）：Style 篇
• openlayers 入门教程（十一）：Formats篇
• openlayers 入门教程（十二）：定位与轨迹
• openlayers 入门教程（十三）：动画
• openlayers 入门教程（十四）：第三方插件
• openlayers 入门教程（十五）：与 canvas、echart，turf 等交互