<body>
<div id="map"></div>
<div id="layerControl" class="layerControl">
<ul id="layerTree" class="layerTree"></ul>
</div>
<script>
var layer=new Array();//图层数组
var layerName=new Array();//图层名称数组
var layerVisibility=new Array();//图层可见数组
function loadLayersControl(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');
layerVisibility[i]=layer[i].getVisible();//获取每个图层的名称及是否可见
var elementLi=document.createElement("li");
treeContent.appendChild(elementLi);
var elementInput=document.createElement("input");
elementInput.type="checkbox";
elementInput.name="layers";
elementLi.appendChild(elementInput);
var elementLabel=document.createElement("label");
elementLabel.className="layer";
setInnerText(elementLabel,layerName[i]);
elementLi.appendChild(elementLabel);
//<ul><li><input type="checkbox" name="layers"/><label class="layer"></label></li></ul>
if(layerVisibility[i]){
elementInput.checked=true;
}
addChangeEvent(elementInput,layer[i]);
}
}
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;//FireFox不支持innerText方法,兼容
}
}
var map=new ol.Map({
target:'map',
layer:[],
view:new ol.View({
center:[0,0],
zoom:2
})
})
var OSM=new ol.layer.Tile({
source:new ol.source.OSM(),
name:'世界地图'
});
var BingMap=new ol.layer.Tile({
source: new ol.source.BingMaps({
key: “*************************************”,
imagerySet: 'Aerial'
}),
name:'卫星地图'
});
map.addLayer(OSM);
map.addLayer(BingMap);
loadLayersControl(map,"layerTree");
</script>
</body>
