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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
微信小程序中button去除默认的边框实例代码
Aug 01 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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
javascript全局变量封装模块实现代码
2012/11/28 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
老生常谈Python进阶之装饰器
2017/05/11 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
python 自动批量打开网页的示例
2019/02/21 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
产品生产计划书
2014/05/07 职场文书
争先创优演讲稿
2014/09/15 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
护士实习自荐信
2015/03/06 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL