OpenLayer3的图层控件初步实现

在html中

创建图层控件，以及新建该控件的样式

<div id="layerControl" class="layerControl">
<span style="white-space:pre">			</span><div class="title">
<span style="white-space:pre">				</span><label>图层</label>
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><ul id="layerTree" class="layerTree"></ul><span style="white-space:pre">	</span>
</div>

<style type="text/css">
	#layerControl{自己定义}
</style>

在script中

var layer = new Array(); //记录图层
var layerName = new Array(); //记录图层名
var layerVisibility = new Array(); //记录可视性
	
	function loadLayerControl(map,id){
		var treeContent = document.getElementById(id); //读取图层表
		var layers = map.getLayers(); //读取所有图层
		for(var i=0;i<layers.getLength();i++){
			layer[i] = layers.item(i);
			layerName[i] = layer[i].get('name'); //关键：你要在你的实例map对象下的layer属性中添加每个图层的name
			layerVisibility[i] = layer[i].getVisible();
			
			//创建空图层项
			var li = document.createElement('li');
			treeContent.appendChild(li);
			
			//添加复选框，用于进行可视性的选择
			var input = document.createElement('input');
			input.type = "checkbox";
			input.name = "layers";
			li.appendChild(input); //进行添加
			
			//添加图层的名称（记得关键的name）
			var label = document.createElement('label');
			label.className = "layer";
			setInnerText(label,layerName[i]);//调用字段显示
			li.appendChild(label); //进行图层的添加
			
			if(layerVisibility[i]){input.checked = true;} //默认全可视
			
			addChangeEvent(input,layer[i]);//进行事件的添加
		}
	}
	//用于添加click事件
	function addChangeEvent(element,layer){
		element.onclick = function(){
			if(element.checked){
				layer.setVisible(true);
			}
			else{
				layer.setVisible(false);
			}
		};
	}
	//用于显示字段
	function setInnerText(element,text){
		if(typeof element.textContent == "string"){
			element.textContent = text;
		}
		else{
			element.innerText = text;
		}
	}