openlayer 图层上下_OpenLayers实现图层切换控件
OpenLayers并没有封装图层切换的控件,所以我们需要自己来实现图层控件。
自定义图层切换控件的原理很简单:显示某个图层时,将其他图层隐藏。
完整代码:
layerSwitch.html:
图层切换控件
OpenStreetMap
Bing Map
Stamen Map
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;
}
}
});
实现效果:
代码整体逻辑是很简单的,其中使用了事件委托这一机制来绑定事件,事件委托可以减少事件绑定导致的内存消耗,所以平时开发时推荐多使用事件委托。
另外,map.getLayers()返回一个ol.Collection类的对象,该对象中包含了地图中的三个图层对象(ol.layer.Tile),可以为item()方法传入对应索引来取出对应图层对象。
最后,ol.layer.Tile类的setVisible()方法可以设置图层的显示与隐藏。
怎么样,自己实现一个图层切换控件是不是很简单呢?
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
openlayer 图层上下_OpenLayers实现图层切换控件相关推荐
- Android学习笔记26:图片切换控件ImageSwitcher的使用
在Windows操作系统中,要查看多张图片,可以通过使用"Windows照片查看器"在"上一张"和"下一张"之间切换,进行多张图片的浏览. ...
- 英语阅读推荐:主题切换控件 ExpressionBuilder
这里是Cat in dotNET的Random Clippings系列,专门向大家推荐.NET相关的英文技术文章,每期推荐两篇文章,第一篇适合于英语技术文章阅读的入门者练习阅读能力,而第二篇则适合于进 ...
- Xamarin自定义布局系列——PivotPage(多页面切换控件)
原文:Xamarin自定义布局系列--PivotPage(多页面切换控件) PivotPage ---- 多页面切换控件 PivotPage是一个多页面切换控件,类似安卓中的ViewPager和UWP ...
- 05 地图添加底图切换控件
本文讲述如何在地图上添加地图切换控件.通过底图切换控件,我们可以实现当前地图和的地图之间的一个切换,效果如下: 如上所示,通过右上角的底图切换控件可以实现两地图之间的切换显示,具体操作如下: 添加底图 ...
- Qt / 动态的切换控件样式的方法
1.通过 setStyleSheet 设置不同的样式.缺点是不同的样式分散在不同的代码中,无法集中管理. 2.通过切换属性的方法设置不同的样式. 可以将样式集中写在 qss 文件中,当然了,不同的属性 ...
- vscode-tab按键失效变为切换控件解决
前段时间使用vscode的时候tab按键不知道为什么变成控件切换,卸载了也没用,一度无法使用vscode,转为Atom.其实出现这种情况有三可能,一种情况是按到了vscode的ctrl+M命令,变为v ...
- 子窗口与父窗口按TAB键切换控件焦点
在子窗口的OnInitDialog() 中写入: ModifyStyleEx( 0, WS_EX_CONTROLPARENT, 0 ); 另外这也会导致程序出现无响应卡死的状况,于是就必须要确定好窗口 ...
- C#中实现回车就切换控件的功能居然是它,真的让人好懵圈
protected override bool ProcessDialogKey(Keys keyData){if (keyData == Keys.Enter && !(this.A ...
- PIE SDK图层树伙伴控件示例
1. 功能简介 TocControl控件的主要作用是显示当前加载的图层有哪些.采用什么样的符号等,目的是使用户对当前加载的数据和结构有一个总体的把握.与之相关联的伙伴控件有MapControl,Pa ...
最新文章
- SAP IQ02 将A序列号改成B序列号后,无修改记录?
- 网站关键词优化首先要学会分类!
- Stereo Matching 立体匹配学习资料
- 在ASP.NET中为GridView添加删除提示框
- 优达学城数据分析笔记1--------数据分析过程(python篇)
- dom对象常用的属性和方法有哪些?
- js的prototype属性
- 在Android中使用RecyclerView
- ORACLE 两个表或两个结果集的数据对比常用的函数
- java转码工具_java转码工具native2ascii
- java中类加载器ClassLoader,双亲加载机制,启动类加载器,应用类加载器,线程上下文类加载器
- 卫星定轨理论、GPS信号与卫星星历
- mac如何设置默认输入法
- 【工具类】TimeLine功能的使用(一)
- js如何获取非行间样式
- 计算关联系数matlab,matlab相关系数计算公式
- 不同安卓模拟器连接appium的端口
- 用正点原子的精英版与onenet云平台连接
- 百度地图地图及定位实现
- 如何通过容器搭建稳定可靠的私有网盘(NextCloud)
热门文章
- Maven resource artifact download url population logic naming convention
- 处理SSL certificate problem self signed certificate
- 为什么S/4HANA的销售订单创建会触发生产订单的创建 1
- 在浏览器里使用 SAP GUI
- python requests库api_Python+requests库发送接口入参为xml格式的接口请求
- 【疑难杂症】vmware虚拟机提示“该虚拟机似乎正在使用中”,并且无法获取所有权解决办法(三步解决虚拟机vmware提示正在使用中的问题)
- python开发工具与pycharm_python开发工具pycharm快速入门
- Windows和VMware虚拟机相互间无法复制的解决方案
- ios mysql 创建不同的用户表_iOS中数据库-创建表-增删改查数据-基础语法
- 三星 P600 android,顶级硬件S pen笔手写—三星P600_三星 Galaxy Note 10.1 2014 Edition P600_平板电脑市场-中关村在线...