<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. 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. Node.js:常用工具util

    概要:本篇博客的主要内容是介绍node.js的常用工具util. 1.util.inherits util.inherits(constructor,superConstructor)是一个实现对象间 ...

  2. 对Big O的新的认识

    对Big O的新的认识 一个问题,它有很多种算法都能实现.每种算法它的时间.空间复杂度不一样.比如: 问题1: 求最大连续子序列和的问题,可以有O(n3).O(n2).O(nlogn)和O(n)四种时 ...

  3. 转Delphi中Memo显示行号列号

    http://www.alonely.com.cn/Delphi/20160814/8912.html 实例说明本例是个光标应用的简单技巧,希望通过这个例子的学习后能举一反三.Delphi中像这样简单 ...

  4. MySQL 修改 root 密码命令

    安装好 MySQL 并成功启动 MySQL 服务后,可以通过以下方法修改root密码: ①用 mysqladmin.exe 操作.指令如下: cd C:\Program Files\MySQL Ser ...

  5. ejabberd模块开发

    参考: http://anders.conbere.org/journal/ http://www.process-one.net/en/wiki/ejabberd_module_developmen ...

  6. Python 拆分字符串

    数:split() Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表(list ...

  7. Mac 下office 2013制作组合表

    1.选择所有数据,插入图表→柱状图.2.选中柱状图中得某一数据,如栏目量.这个在柱状图上单击一次橙色柱子就能全部选中.3.更改图表类型,改为饼状图,再单击饼状图改为折线图.

  8. dist-upgrade

    http://www.linuxserve.com/2015/06/how-to-enable-automatic-login-on-debian.html http://www.cyberciti. ...

  9. composer安装自己的包

    composer的出现,使得PHPer可以像Java一样更加方便的管理代码.在composer没有出现之前,人们大多使用pear.pecl管理依赖,但是局限性很多,也很少有人用(接触的大多phper基 ...

  10. Git单独checkout子目录

    http://schacon.github.io/git/git-read-tree.html#_sparse_checkout Existing Repository If you already ...