openlayers实现图层列表功能

本是古典何须时尚 2023-10-05 17:24 24阅读 0赞

动态在div的ul标签内添加li标签，并且显示不同样式的地图数据

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>加载图层控件</title>
    		<link rel="stylesheet" href="../css/ol.css" />
    		<script type="text/javascript" src="../libs/ol5/ol.js" ></script>
    		<style>
    			body,html,div,ul,li,iframe,p,img{
         
    				border:none;
    				padding: 0;
    				margin: 0;
    				font-size: 14px;
    				font-family: "微软雅黑";
    			}
    			#map{
         
    				height: 100%;
    				width: 100%;
    				position: absolute;
    			}
    			/*图层控件的样式设置*/
    			.layerControl{
         
    				position: absolute;
    				bottom: 5px;
    				min-width: 150px;
    				max-height: 120px;
    				right: 0px;
    				top: 30px;
    				z-index: 2001;
    				color: #FFFFFF;
    				background-color: #7B98BC;
    				border-width: 10px;
    				border-radius: 10px;
    				border-color: #000#000#000#000;
    			}
    			.layerControl.title{
         
    				font-weight: bold;
    				font-size: 15px;
    				margin:10px;
    				
    			}
    			.layerTree li{
         
    				list-style: none;
    				margin: 5px 10px;
    			}
    			label{
         
    				display: block;
    				left: 15px;
    				text-align:center;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="map">
    			<div class="layerControl" id="layerControl">
    				<div class="title">
    					<label>图层列表</label>
    				</div>
    				<ul id="layerTree" class="layerTree"></ul>
    			</div>
    		</div>
    		<script>
    			//Map中的图层数组
    			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();
    					//新增li元素，用来保存图层
    					var elementLi=document.createElement('li');
    					//添加子节点
    					treeContent.appendChild(elementLi);
    					//创建复选框元素
    					var elementInput=document.createElement('input');
    					elementInput.type="checkbox";
    					elementInput.name="layers";
    					elementLi.appendChild(elementInput);
    					//创建lable元素
    					var elementLable=document.createElement('lable');
    					elementLi.appendChild(elementLable);
    					//创建图层名称
    					setInnerText(elementLable,layerName[i]);
    					elementLi.appendChild(elementLable);
    					//设置图层默认显示状态
    					if(layerVisibility[i]){
         
    						elementInput.checked=true;
    					}
    					//为checkbox添加变更事件
    					addChangeEvent(elementInput,layer[i]);
    				}
    			}
    			/*
    			 为checkbox绑定变更事件
    			 * */
    			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;
    				}
    			}
    			var GaoDeMap1=new ol.layer.Tile({
         
    				name:"高德矢量地图",
    				source:new ol.source.XYZ({
         
    					url:'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
    					wrapX:true
    				})
    			});
    			var GaoDeMap2=new ol.layer.Tile({
         
    				name:"高德影像地图",
    				source:new ol.source.XYZ({
         
    					url:'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
    					wrapX:true
    				})
    			});
    			var GaoDeMap3=new ol.layer.Tile({
         
    				name:"高德地图注记",
    				source:new ol.source.XYZ({
         
    					url:'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=8&x={x}&y={y}&z={z}',
    					wrapX:true
    				})
    			});
    //			var GaoDeMap4=new ol.layer.Tile({
         
    //				name:"高德地图",
    //				source:new ol.source.XYZ({
         
    //					url:'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=9&x={x}&y={y}&z={z}',
    //					wrapX:true,
    //				})
    //			});
    			//实例化map对象
    			var map=new ol.Map({
         
    				//地图容器div的ID
    				target:'map',
    				//在地图中加载的图层
    				layers:[GaoDeMap1,GaoDeMap2,GaoDeMap3],
    				//地图视图设置
    				view:new ol.View({
         
    					//地图中心点
    					center:[13576194,4788260],
    					//地图初始显示级别
    					zoom:5,
    					minZoom:3
    				}),
    				controls:ol.control.defaults().extend([
    					new ol.control.MousePosition({
         
    						target:document.getElementById('mouse-position')
    					})
    				])
    			});
    			//加载图层列表的数据
    			loadLayersControl(map,"layerTree");     
    		</script>
    	</body>
    </html>

展示结果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210108204130329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQyOTI5MA==,size_16,color_FFFFFF,t_70