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

												


											
Openlayer 3 图层列表控件(自定义)的更多相关文章
	

    
								
  1. WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式
		
    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Dat ...
    
		
    2. 
						
  2. Android自定义标签列表控件LabelsView解析
		
    版权声明:本文为博主原创文章,未经博主允许不得转载. 无论是在移动端的App,还是在前端的网页,我们经常会看到下面这种标签的列表效果:   标签从左到右摆放,一行显示不下时自动换行.这样的效果用And ...
    
		
    3. 
						
  3. 【转】WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式
		
    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: DataGrid自定义样式: ListView自定义样式: 二．Dat ...
    
		
    4. 
						
  4. （转载）Android自定义标签列表控件LabelsView解析
		
    Android自定义标签列表控件LabelsView解析 作者 donkingliang 关注 2017.03.15 20:59* 字数 759 阅读 406评论 0喜欢 3 无论是在移动端的App, ...
    
		
    5. 
						
  5. .NET各大平台数据列表控件绑定原理及比较（WebForm、Winform、WPF）
		
    说说WebForm: 数据列表控件: WebForm 下的列表绑定控件基本就是GridView.DataList.Repeater:当然还有其它DropDownList.ListBox等. 它们的共同 ...
    
		
    6. 
						
  6. Jetpack Compose学习(9)——Compose中的列表控件(LazyRow和LazyColumn)
		
    原文:Jetpack Compose学习(9)--Compose中的列表控件(LazyRow和LazyColumn) - Stars-One的杂货小窝 经过前面的学习,大致上已掌握了compose的基 ...
    
		
    7. 
						
  7. UWP开发必备：常用数据列表控件汇总比较
		
    今天是想通过实例将UWP开发常用的数据列表做汇总比较,作为以后项目开发参考.UWP开发必备知识点总结请参照[UWP开发必备以及常用知识点总结]. 本次主要讨论以下控件: GridView:用于显示数据 ...
    
		
    8. 
						
  8. Flex 列表控件中的操作
		
    主要操作包括:显示提示,使用图标,编辑列表条目中数据. 1.使用数据提示: 当鼠标停留在条目上时,可以显示该条目的相关数据提示. 当利用滚动条时,可以显示滚动条的相关提示. 在列表控件中使用showD ...
    
		
    9. 
						
  9. VC++ 列表控件的使用方法
		
    列表控件可以看作是功能增强的ListBox,它提供了四种风格,而且可以同时显示一列的多中属性值.MFC中使用CListCtrl类来封装列表控件的各种操作. 通过调用BOOL Create( DWORD ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 浙江大学 pat 题解---58
			
    1058. A+B in Hogwarts (20) 时间限制 50 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue If you ...
    
			
    2. 
						
  2. JS计算字符串长度（中文算2个）
			
    /** * @return {number} */ getRealLength = function(str) { var realLength = 0, len = str.length, char ...
    
			
    3. 
						
  3. The message filter indicated that the application is busy. (Exception from HRESULT: 0x8001010A (RPC_E_SERVERCALL_RETRYLATER))
			
    消息筛选器显示应用程序正在使用中. ((错误来自 HRESULT:0x8001010A (RPC_E_SERVERCALL_RETRYLATER)) 在对Word文档进行合并或者其他操作的时候,如果数 ...
    
			
    4. 
						
  4. NOIP2010-普及组复赛-第二题-接水问题
			
    题目描述 Description 学校里有一个水房,水房里一共装有 m 个龙头可供同学们打开水,每个龙头每秒钟的供水量相等,均为 1.  现在有 n 名同学准备接水,他们的初始接水顺序已经确定.将这些 ...
    
			
    5. 
						
  5. Openjudge-计算概论（A）-奇数单增序列
			
    描述: 给定一个长度为N(不大于500)的正整数序列,请将其中的所有奇数取出,并按升序输出. 输入共2行:第1行为 N:第2行为 N 个正整数,其间用空格间隔.输出增序输出的奇数序列,数据之间以逗号间 ...
    
			
    6. 
						
  6. 第1章 初识java----Java简介
			
    1.Java最初的名字是OAK,是咖啡的意思,在1995年被重命名为Java. ●Java编程语言,即语法. ●Java文件格式,即各种文件夹.文件的后缀. ●Java虚拟机(JVM),即处理*.cl ...
    
			
    7. 
						
  7. 基于 twemproxy 搭建 redis 集群
			
    概述 由于单台redis服务器的内存管理能力有限,使用过大内存redis服务器的性能急剧下降,且服务器发生故障将直接影响大面积业务.为了获取更好的缓存性能及扩展型,我们将需要搭建redis集群来满足需 ...
    
			
    8. 
						
  8. Jquery EasyUI datagrid后台数据表格生成及分页详解
			
    由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而 ...
    
			
    9. 
						
  9. 《JavaScript高级程序设计》读书笔记 ---基本类型和引用类型的值
			
    变量.作用域和内存问题 基本类型和引用类型的值ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象.在 ...
    
			
    10. 
						
  10. 初探OpenGL(一)
			
    OPenGL ES 1.X 面向功能固定的硬件所涉及并提供加速支持,图形质量以及性能标准. OpenGL ES2.X则提供包括着色器技术在内的全编程3D图形算法.----硬件要求比较高. OpenGL ...
    
			
    11.