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

openlayers图层开关控件相关推荐

openlayer 图层上下_OpenLayers实现图层切换控件
OpenLayers并没有封装图层切换的控件,所以我们需要自己来实现图层控件. 自定义图层切换控件的原理很简单:显示某个图层时,将其他图层隐藏. 完整代码: layerSwitch.html: 图层切 ...
Qt QWidget实现开关控件SwithButton（SlipButton）
前言 Qt做界面的时候常常会用到开关控件,类似于CheckButton有两种状态,只是界面表现形式不一样而已.本文通过QWidget类来实现一个开关控件SwitchBtn(有些平台上又称为SlipBu ...
weui-switch开关控件，表单提交后如何取值
最近在学习weui这个框架,做了一些小的试验,发现weui-switch控件直接提交不能获取到表单信息,在segmentfault上发现也有人提了这个问题,有人说可以设置一个隐含标签来捕获开关的状态, ...
Qt工作笔记-自定义开关控件
1.自定义开关控件: 2.点击有动画效果: 3.在动画效果中,不再响应信号: 运行截图如下: 输出响应信号: 源码如下: myonoff.h #ifndef MYONOFF_H #define MYO ...
ionic Toggle（开关控件）
官网地址: https://www.runoob.com/try/try.php?filename=ionic_toggle <html ng-app="ionicApp"& ...
Android自己写的三款实用开关控件
2019独角兽企业重金招聘Python工程师标准>>> 自定义开关控件,代码简单,比较实用. http://www.see-source.com/androidwidget/list ...
Bootstrap Switch 开关控件
Bootstrap Switch开关控件网址:http://www.bootcss.com/p/bootstrap-switch/ 引入. Bootstrap Switch插件和依赖插件,并初始化开关 ...
Android 开关控件Switch
扣扣技术交流群:460189483 目录: 1.应用场景与概述 2.常用属性 3.简单使用 4.更改默认Switch的样式 5.自定义Switch 1 ...
Android 基础 View 系列之仿IPhone 开关控件
极力推荐Android 开发大总结文章:欢迎收藏程序员Android 力荐 ,Android 开发者需要的必备技能自定义View 是Android中常用的方法之一,本章实现类似于IPhone 开关控 ...

openlayers图层开关控件