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()方法可以设置图层的显示与隐藏。
怎么样，自己实现一个图层切换控件是不是很简单呢？
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
OpenLayers3实现图层控件功能
本文实例为大家分享了OpenLayers3实现图层控件的具体代码,供大家参考,具体内容如下 1. 前言 在实际应用中,我们将加载到地图容器中的图层通过图层显示的控件功能,来显示加载的图层,便于用户查看与操作,OpenLayers 3 中并没有提供类似的图层控件,但是他的 API 却提供了该功能的相关接口,我们可以通过调用相关的接口,实现该功能. 2. 实现思路 (1)新建一个网页,参考前面的文章加载OSM瓦片图层的方法,加载OSM瓦片.MapQuest 影像.JSON 与KML 格式的矢量图.
-
OpenLayers实现图层切换控件
OpenLayers并没有封装图层切换的控件,所以我们需要自己来实现图层控件. 自定义图层切换控件的原理很简单:显示某个图层时,将其他图层隐藏. 完整代码: layerSwitch.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi
-
OpenLayers加载缩放控件使用方法详解
本文实例为大家分享了OpenLayers加载缩放控件使用的具体代码,供大家参考,具体内容如下 1.一般的地图打开都有放大.缩小和全图的导航条,以便于用户对地图的查看,下面我们将在OpenLayers中实现这一功能: 2.在之前创建的空白站点下面新建一个html的页面,引入ol.js和ol.css文件,然后在body标签中创建一个div,作为地图加载的容器: 3.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh
-
Openlayers学习之地图比例尺控件
本文实例为大家分享了Openlayers地图比例尺控件的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建两个div标签,分别用来作为地图和比例尺控件的容器: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&q
-
Android UI控件之ImageSwitcher实现图片切换效果
本文实例为大家分享了geSwitcher实现图片切换效果的具体代码,供大家参考,具体内容如下 从该名字就可以看出来,ImageSwitcher是一个图片切换控件,可以在一系列的图片中,逐张的显示特定的图片,利用该控件可以实现图片浏览器中的上一张,下一张的功能.其使用方法也较 为简单,不过需要注意的是ImageSwitcher在使用的时候需要一个ViewFactory,用来区分显示图片的容器和他的父窗口. 具体的用法直接看实例,照例,先上效果图 看看下一张的效果: 布局文件就不多谈了直接看Main
-
android控件实现多张图片渐变切换
本来项目是用的viewpager实现的轮播滚动,但是客户觉得轮播的效果太大众化了,于是就要我们改成渐变切换的效果.听到这需求,我最先想到是给viewpager设置切换动画,但是无论怎么设置动画,都要手动切换的时候才有效果.于是我就自定义了一个控件,利用淡入淡出动画实现了这效果,还是先上效果图,没效果图说再多也没用. public class Gradient extends RelativeLayout { private List<ImageView> imageViews; private
-
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
PyQt5切换按钮控件QPushButton简介 QAbstractButton类为抽象类,不能实例化,必须由其他的按钮类继承QAbstractButton类,来实现不同的功能和表现形式,常见的按钮QPushButton,QToolButton,QRadioButton和QCheckBox这些按钮均继承自QAbstractButton类,根据各自的使用场景通过图形显示出来 QAbstractButton提供的状态如下表 状态 含义 isDown() 提示按钮是否已按下 isChecked() 提
-
layui中的tab控件点击切换触发事件
目录 tab控件点击切换触发事件 方法一 方法二 layui选项卡无法切换 解决 tab控件点击切换触发事件 在layui中使用到tab控件,如果不想在页面加载时就加载所有tab的界面,而是点击某个tab再加载对应的数据,可以使用tab 的点击事件. 方法一 这个方法是我最初在网上找的使用方法. 非IE浏览器 //切换tab 调用不同的方法 layui.use('element', function(){ var $ = jQuery = layui.jquery; var element =
-
Vue openLayers实现图层数据切换与加载流程详解
目录 openlayers介绍 一.实现效果预览 二.代码实现 openlayers介绍 OpenLayers是一个用于开发WebGIS客户端的JavaScript包.OpenLayers 支持的地图来源包括Google Maps.Yahoo. Map.微软Virtual Earth 等,用户还可以用简单的图片地图作为背景图,与其他的图层在OpenLayers 中进行叠加,在这一方面OpenLayers提供了非常多的选择.OpenLayers采用面向对象方式开发. OpenLayers 是一个专
-
ASP.NET 控件开发系列之图片切换web控件
贴出来控件页面的代码. PicList.ascx 复制代码 代码如下: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="PicList.ascx.cs" Inherits="WebParts_PicList" %> <style type="text/css"> /* Reset style */ * { marg