OpenLayers3实现图层控件功能


Posted in Javascript onSeptember 25, 2020

本文实例为大家分享了OpenLayers3实现图层控件的具体代码,供大家参考,具体内容如下

1. 前言

在实际应用中,我们将加载到地图容器中的图层通过图层显示的控件功能,来显示加载的图层,便于用户查看与操作,OpenLayers 3 中并没有提供类似的图层控件,但是他的 API 却提供了该功能的相关接口,我们可以通过调用相关的接口,实现该功能。

2. 实现思路

(1)新建一个网页,参考前面的文章加载OSM瓦片图层的方法,加载OSM瓦片、MapQuest 影像、JSON 与KML 格式的矢量图。
(2)在地图容器中新建一个div 层,用于显示图层列表,在图层列表div 中,添加一个列表头部div 、图层列表 ul ,并通过 css 控制他的样式。
(3)编写加载图层列表的功能函数,在地图加载后,调用该方法,实现图层列表的展示。

3. 实现图层列表功能的代码如下:

html:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>加载图层控件</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="css/ol.css" >
 <link rel="stylesheet" href="css/bootstrap.min.css" >
 <link rel="stylesheet" href="css/ZoomSlider.css" >
 <script src="js/ol.js"></script>
 <script src="js/loadLayersControl.js"></script>
 <style>
 body,
 html,
 div,
 ul,
 li,
 iframe,
 p,
 img {
  border: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-family: "微软雅黑";
 }

 #map {
  width: 100%;
  height: 100%;
  position: absolute;
 }
 /* 图层控件层样式设置 */

 .layerControl {
  position: absolute;
  bottom: 5px;
  min-width: 200px;
  max-height: 200px;
  right: 0px;
  top: 5px;
  z-index: 2001;
  /*在地图容器中的层,要设置z-index的值让其显示在地图上层*/
  color: #ffffff;
  background-color: #4c4e5a;
  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;
 }
 /* 鼠标位置控件层样式设置 */

 #mouse-position {
  float: left;
  position: absolute;
  bottom: 5px;
  width: 200px;
  height: 20px;
  z-index: 2000;
  /*在地图容器中的层,要设置z-index的值让其显示在地图上层*/
 }
 </style>
</head>

<body onload="init()">
 <div id="map">
 <div id="layerControl" class="layerControl">
  <div class="title"><label>图层列表</label></div>
  <ul id="layerTree" class="layerTree"></ul>
 </div>
 </div>
</body>

</html>

代码解析:

创建一个id为 layerControl 的 div 作为显示图层列表,通过设置 z-index 让其显示到地图的上方,以及通过图层列表容器中新建一个列表(id为layerTree的ul)来承载地图容器中的图层。列表中的 li 是通过代码动态创建的,在html中只创建ul。

js代码 :

var layer = new Array(); //map中的图层数组
var layerName = new Array(); //图层名称数组
var layerVisibility = new Array(); //图层可见属性数组

/**
 * 加载图层列表数据
 * @param {ol.Map} map 地图对象
 * @param {string} id 图层列表容器ID
 */
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);
 //创建label元素
 var elementLable = document.createElement('label');
 elementLable.className = "layer";
 //设置图层名称
 setInnerText(elementLable, layerName[i]);
 elementLi.appendChild(elementLable);

 //设置图层默认显示状态
 if (layerVisibility[i]) {
  elementInput.checked = true;
 }
 addChangeEvent(elementInput, layer[i]); //为checkbox添加变更事件      
 }
}
/**
 * 为checkbox元素绑定变更事件
 * @param {input} element checkbox元素
 * @param {ol.layer.Layer} layer 图层对象
 */
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;
 }
}

function init() {
 //实例化Map对象加载地图
 var map = new ol.Map({
 target: 'map', //地图容器div的ID
 //地图容器中加载的图层
 layers: [
  //加载瓦片图层数据
  new ol.layer.Tile({
  source: new ol.source.OSM(),
  name: '世界地图(OSM瓦片)'
  }),

  new ol.layer.Vector({
  source: new ol.source.Vector({
   url: 'data/geojson/countries.geojson',
   format: new ol.format.GeoJSON()
  }),
  name: '国界(Json格式矢量图)'
  }),
  new ol.layer.Vector({
  source: new ol.source.Vector({
   url: 'data/kml/2012-02-10.kml',
   format: new ol.format.KML({
   extractStyles: false
   })
  }),
  name: '点(KML格式矢量图)'
  })
 ],
 //地图视图设置
 view: new ol.View({
  center: [0, 0], //地图初始中心点
  zoom: 2 //地图初始显示级别
 })
 });
 //实例化ZoomSlider控件并加载到地图容器中
 var zoomslider = new ol.control.ZoomSlider();
 map.addControl(zoomslider);
 //实例化zoomToExent控件并加载到地图容器中
 var zoomToExent = new ol.control.ZoomToExtent({
 extend: [13100000, 4290000,
  13200000, 5210000
 ]
 });
 map.addControl(zoomToExent);
 //加载图层列表数据
 loadLayersControl(map, "layerTree");
}

代码解析:

(1)首先创建一个地图容器,分别加载 OSM 瓦片图层、JSON 与 KML 格式的矢量图,并在初始化这些图层时,新增一个 name 属性,用于说明当前图层的名称。
(2)封装了一个功能函数 loadLayersControl ,用于加载图层了列表,需要传入两个参数,map 与 id 分别为地图容器对象、图层列表 id ,实现思路:

①调用 Map 对象的 getLayers 方法获取当前地图容器中加载的所有图层,存入图层数组layer中。
②遍历这些图层,通过图层对象调用 get(‘name') 得到图层名,并存入图层名称数组 layerName 中,调用 getVisible() 得到图层的可见属性,并存入到图层可见性数组中(layerVisibility)
③分别新增 li 元素,用来承载图层项,在 li 中创建复选框元素(checkbox)控制图层显示,创建 label 元素显示图层名称。其中,通过 addChangeEvent 方法为checkbox 元素绑定变更事件,在事件中实现通过 Layer 的 setVisible 方法控制图层的显示。
(3)在 head 标签中,通过 script 标签引入 loadLayersControl.js,实现动态加载图层列表。

4. 实现效果如下:

OpenLayers3实现图层控件功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
javascript打开word文档的方法
Apr 16 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
OpenLayers实现图层切换控件
Sep 25 #Javascript
OpenLayers3实现对地图的基本操作
Sep 28 #Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 #Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 #Javascript
在webstorm中配置less的方法详解
Sep 25 #Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 #Javascript
Javascript confirm多种使用方法解析
Sep 25 #Javascript
You might like
PHP实现时间轴函数代码
2011/10/08 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
JS解析XML的实现代码
2009/11/12 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
JS实现购物车特效
2017/02/02 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
python 将字符串转换成字典dict
2013/03/24 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python查看数据类型的方法
2019/10/12 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
人力资源作业细则
2014/03/03 职场文书
开学典礼策划方案
2014/05/28 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
义诊活动通知
2015/04/24 职场文书
高中班主任寄语
2019/06/21 职场文书
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android