OpenLayer学习之style样式的学习笔记

前言：

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',
     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',
       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 polygon
      var coordinates = feature.getGeometry().getCoordinates()[0];
      return new ol.geom.MultiPoint(coordinates);
    }
  })

五、styleFunction应用

<div id="map2" style=" 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，并设置自定义属性 type
  var 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的属性可以是速度，可以是大小，可以是时间，可以是权重等等。 由此可见，只要掌握了这个方法，前端按照条件渲染就不再困难。