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; } }