OpenLayer 图层一键隐藏和显示

最新推荐文章于 2024-03-10 12:36:11 发布
最新推荐文章于 2024-03-10 12:36:11 发布
阅读量589 收藏 1
点赞数
分类专栏： openlayer 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33138785/article/details/121117866
版权 
this.labelLayer=this.map.layer.createVectorLayer('labelLayer');

我们使用for循环创建了这一图层之后，我们再使用

this.labelLayer.setVisible(false)

发现只隐藏了一个，这时候我们就需要，在第一行代码后面加上一句

this.labelLayerData.push(this.labelLayer)

再使用forEach 循环隐藏图层

item.setVisible(false)

白马？定叫他有来无回！
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OpenLayers6入门，OpenLayers多图层切换显示隐藏，支持多个Layer同时显示和隐藏，以百度地图和高德地图为例实现vue的Layer图层管理组件
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-20 2342
OpenLayers默认并没有提供图层管理组件，本章就讲一下在vue中如何使用ElementUI的下拉框做一个简单的图层管理组件。话不多说，直接开始。
OpenLayers入门，OpenLayers如何监听加载事件和加载完成事件来实现加载瓦片时显示动图转圈加载进度条（loading spinner），加载完成后隐藏
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-29 1032
本章使用OpenLayers的加载事件和加载完成事件来简单实现转圈动图，加载进度条来显示OpenLayers瓦片的加载情况。
openlayer3隐藏地图右下角logo
study_7forever的博客
11-04 1622
第一次接触openlayer3绘制地图，遇到很多问题。虽然有api.但是小白表示看的不在状态。整理记录一下openlayer3绘制地图过程的小问题及解决方法，希望能帮助更多的朋友马上解决问题。 首先，分享大家一位大神的学习链接：http://anzhihun.coding.me/ol3-primer/ch03/03-06.html对于小白来说很实用。 切入正题：隐藏一个地图上右下角的logo图...
openlayer中控制图层的显示和隐藏
热门推荐
09-14 1万+
一种是通过Layer.setVisible(true)的方式让图层显示或隐藏，这种方式只是让图层中CSS的visible属性改为了false，其dom依然存在于页面中； 另一种方式是让map移除图层，即map.removeLayer(Layer)，这种方式会消除图层dom 代码实现： <el-checkbox-group v-model="checkList_baseMap"> <div> <el-checkbox label="lay
iclient for openLayers 子图层显隐控制
qq_35208785的博客
12-29 888
1、获取子图层名称 //获取子图层信息 new ol.supermap.LayerInfoService(url).getLayersInfo(function (serviceResult) { var layers = serviceResult.result.subLayers.layers; console.log(layers) }) 2、设置子图层的显隐状态 var layersArray = map.getLayers(); let coordsysLabel; new ol
openlayers设置图层显示隐藏
weixin_46074818的博客
05-21 2965
layer.setVisible(true) //显示图层 layer.setVisible(false) //隐藏图层
iclient for openlayer 控制子图层显隐
java coder https://github.com/pmsyn/ https://gitee.com/pmsyn
07-21 500
获取子图层列表 控制子图层显隐 <div> <div id="map"></div> <div class="layer-control ol-control" id="layers"> <button type="button" onclick="toggleLayerList(this);">«</button> <div id ="layerList"> <div class="titl.
OpenLayers入门，OpenLayers使用瓦片加载事件实现瓦片加载进度条，进度条根据瓦片加载数量自动更新进度，加载完毕后隐藏进度条
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-29 595
本章主要讲解OpenLayers如何使用瓦片加载事件（tileloadstart）、瓦片加载完成事件（tileloadend）以及瓦片加载错误事件（tileloadend）。并通过OpenLayers使用瓦片加载事件通过实现瓦片加载进度条的案例，实现进度条根据瓦片加载数量自动更新进度，加载完毕后隐藏进度条的控制，从而帮助大家快速上手和应用瓦片加载事件。
Vue+OpenLayers7入门到实战：OpenLayers7如何监听加载事件和加载完成事件来实现加载瓦片时显示动图转圈加载进度条（loading spinner），加载完成后隐藏
最新发布
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-10 134
本章介绍如何在地图上使用OpenLayers7的加载事件和加载完成事件来简单实现转圈动图，加载进度条来显示OpenLayers瓦片的加载情况。
OpenLayers6入门，OpenLayers的Popup弹出框如何内嵌Vue组件内容和内嵌iframe网页，根据所点击要素动态切换弹框内容
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
12-04 905
本章主要讲解OpenLayers弹出框如何与VUE组件联动，在Popup弹出框内容中嵌入vue的组件，以及iframe第三方网页和html元素等内容。
OpenLayers图层组控制
07-19
iClient for OpenLayers控制图层组显隐方式的实现步骤。 下载后直接运行目录下：example\示例\图层组控制.html(需要修改里面的服务地址url为自己发布的服务信息)
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件，图层切换，显示隐藏，图层排序
球球不吃虾WHR2349博客
05-17 4703
介绍openlayers中地图图层控制的组件制作方法，图层切换，显示隐藏，图层排序，在vue3中使用element，tree等组件。
OpenLayers实战，OpenLayers实现地图鼠标经过点要素时显示名称标注提示框，移出后隐藏
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
08-19 866
本章讲解OpenLayers实现地图鼠标经过点要素时显示名称标注提示框，移出后隐藏的功能。
Openlayers实战：LayerGroup添加删除显示隐藏
大剑师兰特的GIS世界
07-20 501
不论是word，ppt等都存在分组的操作，Openlayers也同样可以图层分组LayerGroup，构造出一个图层组，往里面添加图层。LayerGroup可以设置透明度，显示隐藏状态等一些列合力属性，方便控制图层，展示一些内容。
OpenLayer设置图层的可见性
weixin_52856526的博客
12-19 1672
使用openlayer时若图素众多繁杂，则用多个图层分类管理比较好，但多个图层的叠加显示有时候会很凌乱。 这时候可以按需查看，对想看的图层进行可见，不想看的图层进行隐藏。 关于控制图层可见性，有以下官方API： 方法一： removeLayer(layer); Removes the given layer from the map.（从地图中删除给定的图层。） 这种方法会彻底将图层从DOM移除。再次查看时则需要重新向map中添加。 方法二： setVisible(visible); Set the v
openlayers小案例（输入地名查询、拖动图层切换、图层透明度、鹰眼、图层显示与隐藏、定位、放大缩小）新手必备
qq_45549336的博客
03-20 1922
界面 左侧和右侧为功能区 上下为信息区 中间显示地图 左右可收起展开 功能 左侧地图查询 右侧可以调整图层透明度 显示和隐藏图层 拖动图层切换图层上下级关系 鹰眼、放大缩小、全屏、定位 额外说明 查询功能请自己在index文件中308行出贴上自己的key（去高德的网址申请，不懂请私聊） 代码就随手写的，写的很烂，勿喷。。。。。。 请在资源出下载代码 ...
记录---app中 使用openlayers 地图添加图标不显示问题
冰雪为融的博客
08-30 1644
app中 使用openlayers 地图添加图标不显示问题
openlayers：实现选定矢量要素突出显示（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 42
openlayers：实现选定矢量要素突出显示（附完整源码）
layui弹出层只保留最大化按钮去除最小化
RYL_yu的博客
05-26 2898
layui弹出层最大化和最小化 var index = layer.open({ type: 2, title: ‘标题’, id:'TID', maxmin: true, //最大化和最小化 area: ['800px', '600px'],//宽高不影响最大化 content: url,//地址
openlayer控制图层显示
10-14
可以使用OpenLayers中的setVisible()方法来控制图层的显示和隐藏。该方法接受一个布尔值参数，true表示显示图层，false表示隐藏图层。 示例代码： ``` // 获取图层对象 var layer = map.getLayers().get(0); // ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值