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 相关文章推荐
javascript编程起步(第六课)
Feb 27 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
详解Vue 项目中的几个实用组件(ts)
Oct 29 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控制网页过期时间的代码
2008/09/28 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
php遍历CSV类实例
2015/04/14 PHP
php注册登录系统简化版
2020/12/28 PHP
php实现三级级联下拉框
2016/04/17 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
JS array 数组详解
2009/03/22 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
python__new__内置静态方法使用解析
2020/01/07 Python
python统计字符的个数代码实例
2020/02/07 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
Pandas的数据过滤实现
2021/01/15 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
仓库管理制度范本
2015/08/04 职场文书
图书借阅制度范本
2015/08/06 职场文书