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