前言：

1. 可以配置的选项

/*** @typedef {{geometry: (undefined|string|ol.geom.Geometry|ol.style.GeometryFunction),*     fill: (ol.style.Fill|undefined),*     image: (ol.style.Image|undefined),*     stroke: (ol.style.Stroke|undefined),*     text: (ol.style.Text|undefined),*     zIndex: (number|undefined)}}* @api*/

2.含义

• geometry，要素的属性，或者要素，或者一个返回一个地理要素的函数，用来渲染成相应的地理要素；

• fill，填充要素的样式；

• iamge，图片样式，类型为 ol.style.Image；

• stroke，要素边界样式，类型为 ol.style.Stroke；

• text，要素文字的样式，类型为 ol.style.Text；

• zIndex，CSS中的zIndex，即叠置的层次，为数字类型。

一、子类

1. ol.style.Circle，针对矢量要素设置圆形的样式，继承 ol.style.Image；
2. ol.style.Icon，针对矢量数据设置图标样式，继承 ol.style.Image；
3. ol.style.Fill，针对矢量要素设置填充样式；
4. ol.style.RegularShape，对矢量要素设置规则的图形样式，如果设置 radius，结果图形是一个规则的多边形，如果设置 radius1 和 radius2，结果图形将是一个星形；
5. ol.style.Stroke，矢量要素的边界样式；
6. ol.style.Text，矢量要素的文字样式。

二、实例化

var style = new ol.style.Style({fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度color: 'rgba(255, 255, 255, 0.6)'}),stroke: new ol.style.Stroke({ //边界样式color: '#319FD3',width: 1}),text: new ol.style.Text({ //文本样式font: '12px Calibri,sans-serif',fill: new ol.style.Fill({color: '#000'}),stroke: new ol.style.Stroke({color: '#fff',width: 3})})
});

三、应用

var vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({url: '../data/geojson/line-samples.geojson', format: new ol.format.GeoJSON()}),// 设置样式，颜色为红色，线条粗细为1个像素style: new ol.style.Style({stroke: new ol.style.Stroke({color: 'red',size: 1})})});

四、geometry - 地理属性

geometry 可以是要素的地理属性，或者 geometry，或者一个返回 geometry 类型的函数。一般与 image 样式配合使用，表示 image 放置的位置，如下面的例子：

new ol.style.Style({image: new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: 'orange'})}),geometry: function(feature) {// return the coordinates of the first ring of the polygonvar coordinates = feature.getGeometry().getCoordinates()[0];return new ol.geom.MultiPoint(coordinates);}})

五、styleFunction应用

<div id="map2" style="width: 100%"></div>
<script type="text/javascript">// 创建layer使用的style function，根据feature的自定义type，返回不同的样式var layerStyleFunction = function(feature, resolution) {var type = feature.get('type');var style = null;// 点if (type === 'point') {style = new ol.style.Style({image: new ol.style.Circle({radius: 1,fill: new ol.style.Fill({color: 'red'})})});} else if ( type === 'circle') { // 圆形style = new ol.style.Style({image: new ol.style.Circle({radius: 10,stroke: new ol.style.Stroke({color: 'red',size: 1})})});} else { // 其他形状style = new ol.style.Style({image: new ol.style.RegularShape({points: 5,radius: 10,fill: new ol.style.Fill({color: 'blue'})})});}// 返回 style 数组return [style];};var layer2 = new ol.layer.Vector({source: new ol.source.Vector(),style: layerStyleFunction // 应用上面创建的 style function});var map2 = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer2],target: 'map2',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});// 添加三个feature，并设置自定义属性 typevar rect = new ol.Feature({geometry: new ol.geom.Point([104, 30])});layer2.getSource().addFeature(rect);var circle = new ol.Feature({geometry: new ol.geom.Point([104, 30])});circle.set('type', 'circle');layer2.getSource().addFeature(circle);var point = new ol.Feature({geometry: new ol.geom.Point([104, 30])});point.set('type', 'point');layer2.getSource().addFeature(point);</script>

这就是一个典型的根据feature的属性进行不同渲染的例子，可以在业务上无限扩展，比如feature的属性可以是速度，可以是大小，可以是时间，可以是权重等等。 由此可见，只要掌握了这个方法，前端按照条件渲染就不再困难。