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