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>

运行结果如下图所示：

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>

运行结果如下图所示：

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>

运行结果如下图所示：

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>

运行结果如下图所示：

7、结语

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