绘图

除了内置了用于选取feature的类之外，OpenLayers 3还提供了用户绘图的类ol.interaction.Draw，支持绘制点，线，多边形，圆等绘制。 我们可以先看一下下面这个可以绘制一条线的例子，用鼠标左键单击地图，地图上就会出现待绘制线的起点，随后移动鼠标，就看到了线，再单击地图，就在这个线上添加了点，依次可以添加多个点，如果要完成线的绘制，在最后一个点处，再点击一下鼠标左键即可。

代码如下：

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

    // 添加绘图的交互类
    map.addInteraction(new ol.interaction.Draw({
        type: 'LineString' // 设置绘制线
    }));
</script>

看起来非常的简单。 但貌似还不可用，因为不知道怎么保存起来，下面我们把绘制完的线保存起来：

比上一个地图写的代码稍微多一点，关键的代码还是在最后：

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

    // 添加一个绘制的线使用的layer
    var lineLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                size: 1
            })
        })
    })
    map2.addLayer(lineLayer);

    map2.addInteraction(new ol.interaction.Draw({
        type: 'LineString',
        source: lineLayer.getSource()    // 注意设置source，这样绘制好的线，就会添加到这个source里
    }));
</script>

这样，在地图上绘制一条线的工作基本上算是完成了。 按照这个流程，修改ol.interaction.Draw的构造参数type的值为'Point'，'Polygon',，'MultiPoint'，'MultiLineString'，'MultiPolygon' 或者 'Circle'就可以添加点，多边形，多个点，多条线，多个多边形，及圆。 可以自行修改验证。