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

文章目录

• 1、目标
• 2、控件开发
• • 1）继承
  • 2）控件属性
• 3、示例
• 4、存在的问题

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图层开关控件》

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！