OpenLayers实现图层切换控件
更新时间：2020年09月25日 16:32:02 作者：不睡觉的怪叔叔
这篇文章主要为大家详细介绍了OpenLayers实现图层切换控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
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>
实现效果：
代码整体逻辑是很简单的，其中使用了事件委托这一机制来绑定事件，事件委托可以减少事件绑定导致的内存消耗，所以平时开发时推荐多使用事件委托。
另外，map.getLayers()返回一个ol.Collection类的对象，该对象中包含了地图中的三个图层对象（ol.layer.Tile），可以为item()方法传入对应索引来取出对应图层对象。
最后，ol.layer.Tile类的setVisible()方法可以设置图层的显示与隐藏。
怎么样，自己实现一个图层切换控件是不是很简单呢？
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
JS跳出循环的方法区别对比分析(break,continue,return)
面向对象编程语法中我们会碰到break ,continue, return这三个常用的关键字，那么关于这三个关键字的使用具体的操作是什么呢？接下来通过本文给大家讲解JS跳出循环的方法区别对比分析(break,continue,return)，感兴趣的朋友一起看看吧2023-02-02
这篇文章主要为大家介绍了如何利用chatgpt保护您的js代码详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要为大家详细介绍了bootstrap table实现单击单元格可编辑功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
下面小编就为大家带来一篇浅谈js构造函数的方法与原型prototype。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要为大家详细介绍了javaScript日期工具类的汇总，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了JavaScript中var与let的区别，var是JavaScript刚出现时就存在的变量声明关键字，而let作为ES6才出现的变量声明关键字，无疑两者之间存在着很大的区别，下面来看看两者之间到底存在什么2021-12-12
这篇文章主要介绍了微信小程序解析富文本过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值2019-07-07
这篇文章主要介绍了Bootstrap实现可折叠分组侧边导航菜单的相关资料,需要的朋友可以参考下2018-03-03
这篇文章为大家详细主要介绍了js HTML5手机刮刮乐代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
发请求有两种方式，一种是用ajax，另一种是用form提交，默认的form提交如果不做处理的话，会使页面重定向。本篇文章通过实例给大家介绍基于iframe/FormData/FileReader三种无刷新上传文件的方法，感兴趣的朋友一起学习吧2015-12-12
最新评论