openlayers绘图功能实现画点、折线、圆、多边形、矩形

绘图是webgis前端开发中很多见的一个需求，在openlayers中，包含一个ol.interaction.Draw类，提供交互式绘图功能，用起来较为方便。

1、ol.interaction.Draw类

ol.interaction.Draw是openlayers交互式操作中的绘图操作类，支持绘制常见的一些几何图形，如点、折线、多边形、圆、矩形等等。先来看下实例化一个Draw类的参数。

这里重点需要关注的的几个参数：
type: 绘图的几何类型
source: 源，必须是矢量源，用于承载你绘制的图形要素
freehand: 徒手模式，值为真时可以鼠标跟随绘制，不用点击地图。

2、实例化及用法

1）画点

//创建源及图层
var source = new ol.source.Vector();
var layer = new ol.layer.Vector({
    source: source
})

map.addLayer(layer);

//画点功能
var draw = new ol.interaction.Draw({
    type: 'Point',
    source: source,
    free: false
})

map.addInteraction(draw);

这段代码即可实现绘制点操作，图层加载完后，在地图是单击一次即画下一个点。

2）画其它几何

如果要绘制其它几何，修改draw中的type参数即可。几何类型对应的字符串如下：
折现： LineString，
多边形： Polygon，
圆： Circle,
矩形：Circle
这里需要注意矩形： 对应的字符串为Circle，另外，绘制矩形需要用的ol.interaction.Draw中的一个方法：createBox。上面的draw需要改为：

draw = new ol.interaction.Draw({
            source: source,
            type: 'Circle',
            freehand: false,  
            geometryFunction: ol.interaction.Draw.createBox();
        });

geometryFunction参数可用于绘制更复杂的几何。

3、绘图类型切换

对上面的代码稍微进行加工，用来实现在不同绘图类型见的切换。

var drawing = function(type){
    return new ol.interaction.Draw({
        type: type,
        source: source,
        free: false
    })
}
draw = drawing('Point');
var addInteraction = function(type){
    map.removeInteraction(draw);
    draw = drawing(type);
    map.addInteraction(draw);
}

每次切换调用addInteraction方法即可。