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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
js中switch case循环实例代码
Dec 30 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
JavaScript网页定位详解
Jan 13 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
three.js 如何制作魔方
Jul 31 Javascript
Javascript实现打鼓效果
Jan 29 Javascript
javascript函数式编程基础
Sep 15 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
长波有什么东西
2021/03/01 无线电
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python人脸识别初探
2017/12/21 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
python实现在线翻译
2020/06/18 Python
Python 解析简单的XML数据
2020/07/24 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
同学会演讲稿
2019/04/02 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
浅析Python中的随机采样和概率分布
2021/12/06 Python
Javascript的promise,async和await的区别详解
2022/03/24 Javascript