WebGis008-图层控件

最新推荐文章于 2022-01-10 10:02:47 发布

_NorthernFish

最新推荐文章于 2022-01-10 10:02:47 发布

阅读量274

点赞数

文章标签： gis

本文链接：https://blog.csdn.net/weixin_40625332/article/details/118164707

版权

WebGis 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

WebGis008-图层控件

实际应用中，一般来说要把地图容器加载的各个图层以列表形式展现出来，供用户自主选择展示哪些图层。ol5.x版本中没有这样的控件。但是实现起来很方便。ol中layer层有提供getVisible和setVisible两个方法。通过这些，就可以做出相应的单选框或者复选框控件。

首先定义地图
定义若干个图层添加进地图
从地图中拿到layers数组
遍历layers图层数组并存储数据
在dom中新建一个ul列表嵌套input复/单选框组件用以绑定控制图层显示状态
一开始ul列表是没有数据的，需要自主遍历图层状态并根图层状态设置到input中去
然后再给每个input绑定对应的layer事件方法

在mapControls文件夹中创建layerControl.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/ol.css" />
		<script src="../../js/ol.js" type="text/javascript" charset="utf-8"></script>

		<style type="text/css">
			* {
				box-sizing: border-box;
			}

			body {
				margin: 0px;
				padding: 0px;
				height: 100vh;
			}

			#map {
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="map">
			<div class="layerControl">
				<div class="currenlocate"><span>当前位置</span><span id="mouse-position"></span></div>
				<div class="title">图层列表</div>
				<ul id="layerTree"></ul>
			</div>
		</div>

		<script type="text/javascript">
			// 定义图层数组
			let layersArray = new Array();

			// 定义图层名称数组
			let layerNameArray = new Array();

			// 定义图层可见性数组
			let layerVisiblesArray = new Array();

			// 定义方法加载图层列表数据
			function loadLayersControl(map, id) {
				// 获取图层列表容器
				let treeContent = document.querySelector("#" + id)
				// 获取地图中的所有数组
				let layers = map.getLayers()

				console.log(layers);

				for (let i = 0; i < layers.getLength(); i++) {
					// 取出数据并存放置图层数组
					layersArray[i] = layers.item(i);
					layerNameArray[i] = layersArray[i].get("name");
					layerVisiblesArray[i] = layersArray[i].getVisible();

					// 新增一个元素用来保存图层
					let tempLi = document.createElement("li");
					// 将新增元素添加到图层面板
					treeContent.appendChild(tempLi);
					// 创建复选框元素
					var eleInput = document.createElement("input")
					eleInput.type = "checkbox"
					eleInput.name = "layers"
					tempLi.appendChild(eleInput);
					// 创建label元素
					var eleLabel = document.createElement("label")
					eleLabel.className = "layer"

					setInnerText(eleLabel, layerNameArray[i])
					tempLi.appendChild(eleLabel)

					console.log(tempLi);

					if (layerVisiblesArray[i]) {
						eleInput.checked = true
					}

					// 为eheckbox添加变更事件
					addChangeEvent(eleInput, layersArray[i])
				}
			}

			// 绑定复选框状态和涂层的显示效果
			function addChangeEvent(ele, layer) {
				ele.onclick = function() {
					layer.setVisible(ele.checked)
				}
			}

			// 动态设置元素文本内容
			function setInnerText(ele, text) {
				if (typeof ele.textContent == "string") {
					ele.textContent = text
				} else {
					ele.innerText = text
				}
			}


			/**
			 * 创建各种图层
			 */
			// 天地图矢量图层
			var tdtVec = new ol.layer.Tile({
				name: "天地图矢量图层",
				source: new ol.source.XYZ({
					url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9b0042eb1f01265c357f96da559ae11c",
					wrapX: false
				})
			});
			// 天地图矢量注记图层
			var tdtVecCva = new ol.layer.Tile({
				name: "天地图矢量注记图层",
				source: new ol.source.XYZ({
					url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=9b0042eb1f01265c357f96da559ae11c",
					wrapX: false
				})
			});

			// 天地图影像图层
			var tdtImg = new ol.layer.Tile({
				name: "天地图影像图层",
				source: new ol.source.XYZ({
					url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=9b0042eb1f01265c357f96da559ae11c",
					wrapX: false
				})
			});
			// 天地图影像注记图层
			var tdtImgCia = new ol.layer.Tile({
				name: "天地图影像注记图层",
				source: new ol.source.XYZ({
					url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=9b0042eb1f01265c357f96da559ae11c",
					wrapX: false
				})
			});


			// 实例化地图对象，并添加各个图层
			var map = new ol.Map({
				target: "map",
				layers: [tdtVec, tdtVecCva, tdtImg, tdtImgCia],
				view: new ol.View({
					center: [0, 0],
					zoom: 2
				}),
				controls: ol.control.defaults().extend([
					new ol.control.MousePosition({
						target: document.getElementById("mouse-position")
					})
				])
			});

			loadLayersControl(map, "layerTree")
		</script>
	</body>
</html>

效果如图所示

在这里插入图片描述

[注意]：在ol.Map(option)构造函数中，配置了一个基于鼠标的控制器

controls: ol.control.defaults().extend([
					new ol.control.MousePosition({
						target: document.getElementById("mouse-position")
					})
				])

添加该控制器后默认在地图右上角添加了一个class=ol-mouse-position的div块用以显示鼠标悬浮处的经纬度信息；针对其样式，可以直接复写样式类，也可以指定自定义的Dom元素。

_NorthernFish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebGis008-图层控件

WebGis008-图层控件实际应用中，一般来说要把地图容器加载的各个图层以列表形式展现出来，供用户自主选择展示哪些图层。ol5.x版本中没有这样的控件。但是实现起来很方便。ol中layer层有提供getVisible和setVisible两个方法。通过这些，就可以做出相应的单选框或者复选框控件。首先定义地图定义若干个图层添加进地图从地图中拿到layers数组遍历layers图层数组并存储数据在dom中新建一个ul列表嵌套input复/单选框组件用以绑定控制图层显示状态
复制链接

扫一扫