OpenLayers基础教程——要素样式的创建_openlayers点样式

作者：笔触狂放9 | 2024-04-18 10:39:09

踩

openlayers点样式

1、前言

在前面的博客中，ol.style这个类的出镜率很高，但限于篇幅的原因，所以一直没有进行详细介绍，下面就来介绍一下openlayers中的样式——ol.style。

2、样式的基本组成

一个ol.style.Style对象一般包含如下属性：

geometry——地理实体
image——常用于设置点要素的样式
stroke——常用于设置线要素的样式
fill——常用于设置面要素的样式
text——常用于设置文字标注的样式

同时，ol.style.Style类也派生出很多子类，如下所示：

ol.style.Circle——用于设置点样式，以圆形显示
ol.style.Icon——用于设置点样式，以图片的形式显示
ol.style.Stroke——用于设置线样式
ol.style.Fill——用于设置面样式
ol.style.RegularShape——用于设置星形样式
ol.style.Text——用于设置文字样式

3、样式的创建

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <link href="ol/ol.css" rel="stylesheet" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:500px;height:500px;"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        });

        createPoint();
        createIconPoint();
        createPolyline();
        createPolygon();

        // 创建点
        function createPoint() {
            // 创建样式
            var style = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 20,                             // 半径
                    stroke: new ol.style.Stroke({           // 边界样式
                        color: 'yellow',                    // 边界颜色
                        width: 2                            // 边界宽度
                    }),
                    fill: new ol.style.Fill({               // 填充样式
                        color: 'red'                        // 填充颜色
                    })
                })
            });

            // 创建要素
            var feature = new ol.Feature({
                geometry: new ol.geom.Point([120.0, 30.0])
            });
            feature.setStyle(style);

            // 创建数据源
            var source = new ol.source.Vector();
            source.addFeature(feature);

            // 创建图层
            var layer = new ol.layer.Vector({
                source: source
            });

            // 添加图层
            map.addLayer(layer)
        }

        // 创建图片点
        function createIconPoint() {
            // 创建样式
            var style = new ol.style.Style({
                image: new ol.style.Icon({
                    src: 'img/location.png'
                })
            });

            // 创建要素
            var feature = new ol.Feature({
                geometry: new ol.geom.Point([119.8, 30.2])
            });
            feature.setStyle(style);

            // 创建数据源
            var source = new ol.source.Vector();
            source.addFeature(feature);

            // 创建图层
            var layer = new ol.layer.Vector({
                source: source
            });

            // 添加图层
            map.addLayer(layer)
        }

        // 创建线
        function createPolyline() {
            // 创建样式
            var style = new ol.style.Style({
                stroke: new ol.style.Stroke({           // 边界样式
                    color: '#0000FF',                   // 边界颜色
                    width: 2                            // 边界宽度
                }),
            });

            // 创建要素
            var feature = new ol.Feature({
                geometry: new ol.geom.LineString([
                    [120.10, 30.10],
                    [120.14, 30.30],
                    [120.25, 30.22]
                ])
            });
            feature.setStyle(style);

            // 创建数据源
            var source = new ol.source.Vector();
            source.addFeature(feature);

            // 创建图层
            var layer = new ol.layer.Vector({
                source: source
            });

            // 添加图层
            map.addLayer(layer)
        }

        // 创建面
        function createPolygon() {
            // 创建样式
            var style = new ol.style.Style({
                stroke: new ol.style.Stroke({           // 边界样式
                    color: 'rgba(136,136,136,0.8)',     // 边界颜色
                    width: 2                            // 边界宽度
                }),
                fill: new ol.style.Fill({               // 填充样式
                    color: 'rgba(136,136,136,0.5)'      // 填充颜色
                })
            });

            // 创建要素
            var feature = new ol.Feature({
                geometry: new ol.geom.Polygon([[
                    [119.80, 29.80],
                    [119.95, 29.80],
                    [119.85, 29.98],
                    [119.80, 29.80],
                ]])
            });
            feature.setStyle(style);

            // 创建数据源
            var source = new ol.source.Vector();
            source.addFeature(feature);

            // 创建图层
            var layer = new ol.layer.Vector({
                source: source
            });

            // 添加图层
            map.addLayer(layer)
        }
    </script>
</body>
</html>
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

运行结果如下图所示：
在这里插入图片描述

4、在要素图层中定义样式

在上面的代码中，我们创建样式的流程一般是：先定义样式，然后创建要素，最后设置要素的样式。其实我们同样可以在layer中定义样式，这样就不需要频繁使用setStyle(style)了。在layer中声明样式的方法就是定义一个回调函数：style: function(feature, resolution)，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <link href="ol/ol.css" rel="stylesheet" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:500px;height:500px;"></div>

    <script>
        // 创建要素
        var source = new ol.source.Vector();
        source.addFeature(new ol.Feature({
            geometry: new ol.geom.Point([120.0, 30.0])
        }));
        source.addFeature(new ol.Feature({
            geometry: new ol.geom.Point([120.4, 30.4])
        }));

        // 创建图层
        var layer = new ol.layer.Vector({
            source: source,
            style: function (feature, resolution) {
                var style = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 20,
                        fill: new ol.style.Fill({
                            color: 'red'
                        }),
                        stroke: new ol.style.Stroke({
                            color: 'red',
                            width: 1
                        })
                    })
                })
                return style;
            }
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 7
            })
        });
    </script>
</body>
</html>
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
52
53
54
55
56
57
58
59

运行结果如下图所示：
在这里插入图片描述

5、样式的组合使用

下面我们利用ol.style.RegularShape来实现一个组合样式，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <link href="ol/ol.css" rel="stylesheet" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:500px;height:500px;"></div>

    <script>
        // 创建要素
        var source = new ol.source.Vector();
        source.addFeature(new ol.Feature({
            geometry: new ol.geom.Point([120.0, 30.0])
        }));
        source.addFeature(new ol.Feature({
            geometry: new ol.geom.Point([120.4, 30.4])
        }));

        // 创建图层
        var layer = new ol.layer.Vector({
            source: source,
            style: function (feature, resolution) {
                var styles = [];
                styles.push(
                    new ol.style.Style({
                        image: new ol.style.Circle({
                            radius: 20,
                            fill: new ol.style.Fill({
                                color: 'red'
                            }),
                            stroke: new ol.style.Stroke({
                                color: 'red',
                                width: 1
                            })
                        })
                    })
                );
                styles.push(
                    new ol.style.Style({
                        geometry: feature.getGeometry(),
                        image: new ol.style.RegularShape({
                            radius1: 15,
                            radius2: 10,
                            points: 8,
                            fill: new ol.style.Fill({
                                color: 'white'
                            })
                        })
                    })
                );
                return styles;
            }
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 7
            })
        });
    </script>
</body>
</html>
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

运行结果如下图所示：
在这里插入图片描述

6、一个小实例

现有一份浙江省的GeoJSON格式的数据，我们现在需要把它加载到地图中，然后进行相应配色和文字标注，初始的数据如下图所示：
在这里插入图片描述
配色和文字标注代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link href="ol/ol.css" rel="stylesheet" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>

    <script>
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector({
                projection: 'EPSG:4326',
                url: 'data/zhejiang.json',
                format: new ol.format.GeoJSON()
            }),
            style: function (feature, resolution) {
                var name = feature.get('name');
                var color = getColor(name);
                var style = getStyle(name, color);
                return style;
            }
        });

        var map = new ol.Map({
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([120, 30]),
                zoom: 7
            })
        });

        // 获取颜色
        function getColor(name) {
            var color = 'Red';
            switch (name) {
                case '丽水市':
                    color = 'Red';
                    break;
                case '杭州市':
                    color = 'Green';
                    break;
                case '温州市':
                    color = 'Yellow';
                    break;
                case '宁波市':
                    color = 'Blue';
                    break;
                case '舟山市':
                    color = 'Orange';
                    break;
                case '台州市':
                    color = 'Pink';
                    break;
                case '金华市':
                    color = 'DodgerBlue';
                    break;
                case '衢州市':
                    color = 'DarkGoldenRod';
                    break;
                case '绍兴市':
                    color = 'Plum';
                    break;
                case '嘉兴市':
                    color = 'Khaki';
                    break;
                case '湖州市':
                    color = 'Magenta';
                    break;
                default:
                    color = 'Red';
                    break;
            }
            return color;
        }

        // 获取样式
        function getStyle(name, color) {
            var style = new ol.style.Style({
                stroke: new ol.style.Stroke({           // 边界样式
                    color: color,                       // 边界颜色
                    width: 1                            // 边界宽度
                }),
                fill: new ol.style.Fill({               // 填充样式
                    color: color                        // 填充颜色
                }),
                text: new ol.style.Text({               // 文字样式
                    text: name,                         // 文字内容
                    font: '15px Calibri,sans-serif',    // 字体大小
                    stroke: new ol.style.Stroke({       // 文字边界样式
                        color: 'white',                 // 文字边界颜色
                        width: 1                        // 文字边界宽度
                    }),
                    fill: new ol.style.Fill({           // 文字填充样式
                        color: 'black'                  // 文字填充颜色
                    })
                })
            });
            return style;
        }
    </script>
</body>
</html>
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

运行结果如下图所示：
在这里插入图片描述

7、结语

在openlayers中，合理使用样式或样式的组合可以让地图的视觉效果更加突出。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/445527