用Canvas自绘图标

除了规则的几何体之外，往往需要定义一些不规则的几何体，可以使用svg来实现，但也可以用canvas自己来绘制，比如像下面这个图标：

代码如下：

<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
    })
  });

  // 使用canvas绘制一个不规则几何图形
    var canvas =document.createElement('canvas');
    canvas.width = 20;
  canvas.height = 20;
    var context = canvas.getContext("2d");
    context.strokeStyle = "red";  
  context.lineWidth = 1;  
  context.beginPath();   
  context.moveTo(0, 0);
  context.lineTo(20, 10);
  context.lineTo(0, 20);
  context.lineTo(10, 10);
  context.lineTo(0, 0);  
  context.stroke();

  // 把绘制了的canvas设置到style里面
    var style = new ol.style.Style({
        image: new ol.style.Icon({
          img: canvas,
          imgSize: [canvas.width, canvas.height],
          rotation: 90 * Math.PI / 180
        })
    });

    // 创建一个Feature
  var shape = new ol.Feature({
    geometry: new ol.geom.Point([104, 30])
  });

  // 应用具有不规则几何图形的样式到Feature
  shape.setStyle(style);
  layer.getSource().addFeature(shape);
</script>

和svg的那个例子一样，使用了ol.style.Icon样式的img属性来设置，需要注意的是，必须设置imgSize属性，因为仅仅通过img设置的图像对象，没有办法自动获取宽高。 同时，官网也提供了一个类似的例子earthquake-custom-symbol，只是使用OpenLayers3 内部提供的封装库来绘制图像到canvas上，原理一样。

有了这种方式之后，相信做任何图标都不会遇到难题了。