openlayers实现自定义绘图控件实现类似ArcGIS绘图工具条

接前一篇《》，绘图功能虽然实现了，但是仅仅开发到这里，做Demo还行，如果要应用到项目中，
显然是不太灵活，因此，将绘图功能封装到控件中，作为工具，将更有利于我们来使用。

先来看下openlayers自带的控件。

1、ol.control.Control类

openlayers中所有控件的基类，因此，我们自定义绘图控件，以继承该类。

2、需求

1）、一个工具条，包含指针、绘点、绘线、绘面、绘圆、绘矩形、清空绘制等按钮；
2）、单击各个绘图按钮将切换至对应的绘图状态；
2）、单击指针按钮切换为非绘图状态；
3）、单击清空绘制清理掉所有已绘制的图形。

3、代码实现

1）、继承

ol.control.DrawControl = function(opt_options){
    var opt_options = opt_options || {};

    //定义按钮
    this.drawType = ['None', 'Point', 'LineString', 'Polygon', 'Circle', 'Box', 'Clear'];
    var defaultControlClassName = 'ol-unselectable ol-control';
    this.element = document.createElement('div');
    this.element.className = defaultControlClassName + ' ' + 'drawtools';

    var createchildElement = function(options){
        var btn = document.createElement('button');
        btn.className = options.class;
        btn.id = options.id;
        var tipLable = 'Draw ' + options.value;
        btn.title = tipLable;
        btn.type = options.type;
        btn.value = options.value;
        return btn;
    };

    this.drawType.forEach(element => {
        var btn = createchildElement({
            type: 'button',
            class: 'drawBtn',
            value: element,
            id: 'ol-draw-' + element.toLocaleLowerCase()
        })
        btn.onclick = function(evt){
            evt.preventDefault();
            this.btnFouceChanged(evt);
            var value = evt.target.getAttribute('value');
            this.addInteraction(value);
        }.bind(this);
        this.element.appendChild(btn);
    });

    this.source_ = undefined;
    this.overLay_ = undefined;
    this.drawing_ = undefined;

    ol.control.Control.call(this, {
        element: this.element,
        target: opt_options.target
    })
}

2）属性方法

主要这个方法，用于实现绘图命令切换

ol.control.DrawControl.prototype.addInteraction = function(shapeType){
    if(shapeType !== 'None'){
        var geomFunc = undefined;
        if(shapeType === 'Clear'){
            this.source_.clear();
            return;
        }
        if(shapeType === 'Box') {
            shapeType = 'Circle';
            geomFunc = ol.interaction.Draw.createBox();
        }
        this.drawing_ = new ol.interaction.Draw({
            source: this.source_,
            type: shapeType,
            freehand: false,    //按住shift可以跟踪鼠标绘制
            geometryFunction: geomFunc
        });
        this.getMap().addInteraction(this.drawing_);
    }
}

3）按钮样式

接下来就是按钮样式了，单独用一个css文件。

4、结果

点击按钮即可以进行绘图操作。

控件及完整Demo下载：
openlayers绘图控件

本文基于openlayers4进行开发测试，但同样适应于openlayers5。