规则几何体图标

相对于png而言，svg这样的矢量图在放大缩小方面更清晰，但对于规则几何体而言，如果也使用svg，未免复杂了一点，OpenLayers 3为了简化这样的操作，提供了一个规则几何体的样式类ol.style.RegularShape，使用它可以轻松绘制正方形，三角形等,也支持星形规则几何图形，比如下面这样：

图上有一个三角形，一个5星，代码如下：

<div id="map" style="width: 100%"></div>
<script type="text/javascript">
  var layer = new ol.layer.Vector({
    source: new ol.source.Vector()
  })
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }), 
      layer
    ],
    target: 'map',
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [104, 30],
      zoom: 10
    })
  });

  // 添加一个三角形
  var shape = new ol.Feature({
    geometry: new ol.geom.Point([104, 30])
  });
  shape.setStyle(new ol.style.Style({
    image: new ol.style.RegularShape({
      points: 3,    // 顶点数
      radius: 10,    // 图形大小，单位为像素
      stroke: new ol.style.Stroke({ // 设置边的样式
          color: 'red',
          size: 2
      })
    })
  }));

  layer.getSource().addFeature(shape);

  // 添加一个五星
    var star = new ol.Feature({
    geometry: new ol.geom.Point([104.1, 30.1])
  });
  star.setStyle(new ol.style.Style({
    image: new ol.style.RegularShape({
      points: 5,    // 顶点个数
      radius1: 20, // 外圈大小
      radius2: 10, // 内圈大小
      stroke: new ol.style.Stroke({ // 设置边的样式
          color: 'red',
          size: 2
      }),
      fill: new ol.style.Fill({ // 设置五星填充样式
          color: 'blue'
      })
    })
  }));

  layer.getSource().addFeature(star);

</script>

除了基本的设置之外，还支持图形旋转，以及跟随地图旋转而旋转，这些设置在其他的应用中也多有涉及，此处不再用实例来介绍，可自行验证。