openlayers图层开关控件

openlayers2自带图层开关控件，但是自openlayers3后，不再有这个控件。但是，当了解了openlayers控件开发后，我们可以自己实现这个控件，实现起来也非常之简单。不多说，先看下结果：

1、目标

1）图层开关： 在控件上选中图层，对应的图层显示；取消选中，对应的图层关闭；
2）图层增删联动： 当map中的图层有增删时，控件随之改动。

2、控件开发

1）继承

图层开关控件类:ol.control.LayerSwitch
父类：ol.control.Control

ol.control.LayerSwitch = function(opt_options){
    var options = opt_options ? opt_options : {};
    this.element = document.createElement('div');
    var defaultControlClassName = 'ol-unselectable ol-control';
    var className = 'ol-control-layerswitch';
    this.element.className = defaultControlClassName + ' ' + className;
    ol.control.Control.call(this, {
        element: this.element,
        target: options.target
    })
}
ol.inherits(ol.control.LayerSwitch, ol.control.Control);

2）控件属性

主要有三给属性
1、初始化控件：用来实现控件初始化时的UI设置；
2、增加图层选项：添加图层时自动触发
3、移除图层选项：移除图层时自动触发

初始化：

ol.control.LayerSwitch.prototype.init = function(){
    var layers = this.getMap().getLayers();
    layers.forEach(element => {
        this.addLayerItem(element);
    });
}

增加图层选项：

/**
 * 添加选项
 * @param {ol.layer.Layer} layer
 */
ol.control.LayerSwitch.prototype.addLayerItem = function(layer){
    var div = document.createElement('div');
    div.className = 'ol-control-layerswitch-opt';
    div.setAttribute('layerid', ol.getUid(layer).toString());

    var child = document.createElement('input');
    child.setAttribute('type', 'checkbox');
    child.onclick = function(evt){
        layer.setVisible(evt.target.checked);
    };
    child.checked = true;
    div.appendChild(child);

    var label = document.createElement('span');
    label.innerText = layer.get('title');//以图层的title属性作为显示内容
    
    div.appendChild(label);

    this.element.appendChild(div);
}

移除图层选项：

/**
 * 移除选项
 * @param {ol.layer.Layer} layer
 */
ol.control.LayerSwitch.prototype.removeLayerItem = function(layer){
    var childs = this.element.getElementsByClassName('ol-control-layerswitch-opt')
    for (let index = 0; index < childs.length; index++) {
        const divChild = childs[index];
        if(divChild.getAttribute('layerid') === ol.getUid(layer).toString()){
            this.element.removeChild(divChild);
        }
    }
}

3、示例

4、存在的问题

ol.getUid(layer)报错
添加或者增删图层时，用ol.getUid(layer)来获取到图层的ID，作为唯一标识，但是发现引用ttps://openlayers.org/en/v4.6.5/build/ol.js这个js时，ol没有这个方法，在官网API中也没找到。但是引用下载到本地的openlayers的v.4.6.5版本中的ol-debug.js，是可以的。
openlayers5中ol已经增加了gitUid方法。

完整代码就示例见：《openlayers图层开关控件》