OpenLayer3的图层控件初步实现

来源：互联网发布：科技网络报修电话编辑：程序博客网时间：2024/05/16 02:18

在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属性中添加每个图层的namelayerVisibility[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;}}

0 0