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

奋斗吧
奋斗吧
擅长邻域:未填写

标签: OpenLayers基础教程——要素样式的创建 JavaScript博客 51CTO博客

2023-07-18 18:24:26 147浏览

OpenLayers基础教程——要素样式的创建,1、前言在前面的博客中,ol.style这个类的出镜率很高,但限于篇幅的原因,所以一直没有进行详细介绍,下面


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>

运行结果如下图所示:

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

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>

运行结果如下图所示:

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

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>

运行结果如下图所示:

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

6、一个小实例

现有一份浙江省的GeoJSON格式的数据,我们现在需要把它加载到地图中,然后进行相应配色和文字标注,初始的数据如下图所示:

OpenLayers基础教程——要素样式的创建_图层_04


配色和文字标注代码如下:

<!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>

运行结果如下图所示:

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

7、结语

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


好博客就要一起分享哦!分享海报

此处可发布评论

评论(0展开评论

暂无评论,快来写一下吧

展开评论

您可能感兴趣的博客

客服QQ 1913284695