OpenLayers实现图层切换控件


Posted in Javascript onSeptember 25, 2020

OpenLayers并没有封装图层切换的控件,所以我们需要自己来实现图层控件。

自定义图层切换控件的原理很简单:显示某个图层时,将其他图层隐藏。

完整代码:

layerSwitch.html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>图层切换控件</title>
 <link rel="stylesheet" href="../v5.3.0/css/ol.css" />
 <script src="../v5.3.0/build/ol.js"></script>
</head>
<body>
 <div id="controls">
 <input type="checkbox" id="osm" checked />OpenStreetMap
 <input type="checkbox" id="bingmap" />Bing Map
 <input type="checkbox" id="stamen" />Stamen Map
 </div>
 <div id="map"></div>
 
 <script>
 let map = new ol.Map({
  target: 'map', // 关联到对应的div容器
  layers: [
  new ol.layer.Tile({ // OpenStreetMap图层
   source: new ol.source.OSM() 
  }),
  new ol.layer.Tile({ // Bing Map图层
   source: new ol.source.BingMaps({
   key: '略', // 可以自行到Bing Map官网申请key
   imagerySet: 'Aerial'
   }),
   visible: false // 先隐藏该图层
  }),
  new ol.layer.Tile({
   source: new ol.source.Stamen({
   layer: 'watercolor'
   }),
   visible: false // 先隐藏该图层
  })
  ],
  view: new ol.View({ // 地图视图
  projection: 'EPSG:3857',
  center: [0, 0],
  zoom: 0
  })
 });
 
 let controls = document.getElementById('controls'); 
 // 事件委托
 controls.addEventListener('click', (event) => {
  if(event.target.checked){ // 如果选中某一复选框
  // 通过DOM元素的id值来判断应该对哪个图层进行显示
  switch(event.target.id){
   case "osm": 
   map.getLayers().item(0).setVisible(true);
   break;
   case "bingmap":
   map.getLayers().item(1).setVisible(true);
   break;
   case "stamen": 
   map.getLayers().item(2).setVisible(true);
   break;
   default: break;
  }
  }else{  // 如果取消某一复选框
  // 通过DOM元素的id值来判断应该对哪个图层进行隐藏
  switch(event.target.id){
   case "osm": 
   map.getLayers().item(0).setVisible(false);
   break;
   case "bingmap":
   map.getLayers().item(1).setVisible(false);
   case "stamen": 
   map.getLayers().item(2).setVisible(false);
   default: break;
  }
  } 
 });
 </script>
</body>
</html>

实现效果:

OpenLayers实现图层切换控件

代码整体逻辑是很简单的,其中使用了事件委托这一机制来绑定事件,事件委托可以减少事件绑定导致的内存消耗,所以平时开发时推荐多使用事件委托。

另外,map.getLayers()返回一个ol.Collection类的对象,该对象中包含了地图中的三个图层对象(ol.layer.Tile),可以为item()方法传入对应索引来取出对应图层对象。

最后,ol.layer.Tile类的setVisible()方法可以设置图层的显示与隐藏。

怎么样,自己实现一个图层切换控件是不是很简单呢?

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

Javascript 相关文章推荐
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 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
OpenLayers3实现地图显示功能
Sep 25 #Javascript
You might like
PHP开发过程中常用函数收藏
2009/12/14 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
python画折线图的程序
2018/07/26 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python中selenium库的基本使用详解
2020/07/31 Python
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
求职简历自荐信
2013/10/20 职场文书
联欢晚会主持词
2014/03/25 职场文书
户外宣传策划方案
2014/05/25 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
身份证丢失证明
2015/06/19 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python