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 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
node.js实现快速截图
Aug 27 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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函数
2006/10/09 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
python生成词云的实现方法(推荐)
2017/06/13 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python os模块简单应用示例
2019/05/23 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
十八届三中全会宣传方案
2014/02/21 职场文书
个人委托书范本
2014/04/02 职场文书
新员工入职欢迎词
2015/01/23 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技