绘图是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方法即可。