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

本文链接：https://blog.csdn.net/u012413551/article/details/95742140

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

文章目录

1、ol.control.Control类
2、需求
3、代码实现
4、结果

先来看下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';