OpenLayers 3 之 扩展自定义控件--以切换图层控件为例

      openlayers 中的控件，是一个固定在页面某个位置的可见的DOM元素，它们可能包含可操作的按钮，也可能只是单纯的展示信息，它们的位置及其样式是由与其关联的CSS样式决定的。默认情况下，它们都位于一个CSS 类（class）为ol.overlaycontainer-stopevent的元素内，当然也可以使用其他的自定义的DOM容器元素。

      在openlayers 的结构中，控件有很多，比如左上角的缩放控件、右下角的属性控件，这些控件都是继承一个基类 ol.control.Control，基类主要为它的子类提供统一的“阻止事件传播机制”，并且 ol.control.Control继承了 ol.Object，并且控件都放于一个统一的容器 ol.Collection，所以如果继承ol.control.Control基类，自定义的控件不仅可以得益于其“阻止事件传播机制”，也可以使用 ol.Object和ol.Collection的方法和事件。

ol.control.Control 简介

      ol.control.Control是openlayers的控件基类，我们的自定义控件可以继承该基类（在上边我们也讲了继承该基类的好处），在类中使用 javascript 动态创建DOM元素，指定DOM元素对应的CSS样式类（class），并对DOM元素绑定相应的事件，来完成自定义控件。openlayers3 使用了google 的 closure 库来进行开发，要使用 closure 的语法来进行继承，比如我们定义我们的切换图层控件类为 ol. control.LayerSwitcher，那么使用closure实现继承的语句如下：

ol.inherits(ol.control.LayerSwitcher, ol.control.Control)