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

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

1、ol.interaction.Draw类

ol.interaction.Draw是openlayers交互式操作中的绘图操作类,支持绘制常见的一些几何图形,如点、折线、多边形、圆、矩形等等。先来看下实例化一个Draw类的参数。
openlayers绘图功能实现画点、折线、圆、多边形、矩形_第1张图片
这里重点需要关注的的几个参数:
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方法即可。

你可能感兴趣的:(Openlayers4笔记,前端,openlayers开发)