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

  1.  

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

  1. WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Dat ...

  2. Android自定义标签列表控件LabelsView解析

    版权声明:本文为博主原创文章,未经博主允许不得转载. 无论是在移动端的App,还是在前端的网页,我们经常会看到下面这种标签的列表效果:   标签从左到右摆放,一行显示不下时自动换行.这样的效果用And ...

  3. 【转】WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: DataGrid自定义样式: ListView自定义样式: 二．Dat ...

  4. （转载）Android自定义标签列表控件LabelsView解析

    Android自定义标签列表控件LabelsView解析 作者 donkingliang 关注 2017.03.15 20:59* 字数 759 阅读 406评论 0喜欢 3 无论是在移动端的App, ...

  5. .NET各大平台数据列表控件绑定原理及比较（WebForm、Winform、WPF）

    说说WebForm: 数据列表控件: WebForm 下的列表绑定控件基本就是GridView.DataList.Repeater:当然还有其它DropDownList.ListBox等. 它们的共同 ...

  6. Jetpack Compose学习(9)——Compose中的列表控件(LazyRow和LazyColumn)

    原文:Jetpack Compose学习(9)--Compose中的列表控件(LazyRow和LazyColumn) - Stars-One的杂货小窝 经过前面的学习,大致上已掌握了compose的基 ...

  7. UWP开发必备：常用数据列表控件汇总比较

    今天是想通过实例将UWP开发常用的数据列表做汇总比较,作为以后项目开发参考.UWP开发必备知识点总结请参照[UWP开发必备以及常用知识点总结]. 本次主要讨论以下控件: GridView:用于显示数据 ...

  8. Flex 列表控件中的操作

    主要操作包括:显示提示,使用图标,编辑列表条目中数据. 1.使用数据提示: 当鼠标停留在条目上时,可以显示该条目的相关数据提示. 当利用滚动条时,可以显示滚动条的相关提示. 在列表控件中使用showD ...

  9. VC++ 列表控件的使用方法

    列表控件可以看作是功能增强的ListBox,它提供了四种风格,而且可以同时显示一列的多中属性值.MFC中使用CListCtrl类来封装列表控件的各种操作. 通过调用BOOL Create( DWORD ...

随机推荐

  1. Lucene基础(1)

    下一篇: Lucene基础(2) 一.Lucene介绍 http://www.kailing.pub/index/columns/colid/16.html Documentation:http:// ...

  2. LeetCode OJ 122. Best Time to Buy and Sell Stock II

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  3. Gentoo安装详解（二）-- 编译内核

    编译内核: 安装内核源码: 选择内核:如gentoo-sources emerge gentoo-sources ls -l /usr/src/linux 手动编译内核: cd /usr/src/li ...

  4. SharePoint 2013 配置InfoPath 列表表单

    转载来源:http://www.cnblogs.com/jianyus/p/3470113.html SharePoint列表,都是通过表单展示,有时候不太符合要求,这时候,我们可以通过定制表单,来是 ...

  5. The server instance Witness rejected configure request; read its error log file for more information. The reason 1427, and state 31, can be of use for

    数据库服务器做了镜像之后,发现有错误信息 The server instance Witness rejected configure request; read its error log file ...

  6. linux nfs开启

    nfs设置: NFS的配置过程很简单.在服务器端中编辑/etc/exports文件,添加如下内容:     /home/cotton/data/cotton/zghy 192.168.2.*(rw,s ...

  7. (转)用JMX监测JVM的运行参数

    翻译自http://java.sun.com/javase/6/docs/technotes/guides/management/agent.html  用JMX管理你的JVMJMX是Java管理扩展 ...

  8. js 总结累计大全

    1选择  select  获取val text   更改其他class值 <script type="text/javascript"> $(function(){ $ ...

  9. c语言结构体指针必须初始化

    先说结论 结构体指针需要初始化 结构体指针的成员指针同样需要初始化 结构体变量定义的时候就已经分配了内存空间,而上面两个确没有 struct test{ int i; struct buf *p;} ...

  10. 自定义UICollectionView

    1.创建一个UICollectionView工程,点击鼠标右侧按钮选择New File->Cocoa Class->点击Next,Class选项填写一个合理的名称,如:MyCollecti ...