124：vue+openlayers:清除所有控件，按需添加Control

已于 2024-05-27 15:47:04 修改
阅读量672 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # openlayers综合教程300+ 文章标签： openlayers教程 openlayers示例 openlayers 大剑师 openlayers清除控件
于 2022-09-06 07:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/126702102
本文由大剑师兰特撰写，他是一名GIS领域的高级前端工程师，分享了如何在Vue应用中清除OpenLayers的所有控件，并详细介绍了如何按需添加Control。示例代码提供了一个快速实现的途径，同时也指出原始方法存在限制，并提供了修正方案的链接。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 124个示例

文章目录

一、示例效果图

在这里插入图片描述

二、示例简介

本示例介绍如何在vue+openlayer中清除所有的Control，并根据自己的需要来添加control。这里的方法后来验证不能一次性清除所有control，在新文章中做了修复，请查看：https://dajianshi.blog.csdn.

了解本专栏 订阅专栏 解锁全文
265：vue+openlayers 一次性清除所有控件（亲测好用）
大剑师兰特的GIS世界
05-28 1054
本示例介绍如何在vue+openlayer中清除所有的Control，之前的一篇文章中，清除方法不能一次清除，这里更换了方式，亲测方法好用。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果。
204：vue+openlayers 学习Attribution各种API，示例展示自定义版权信息
大剑师兰特的GIS世界
01-16 785
第204个本示例的目的是介绍如何在vue+openlayers项目中个性化修改版权信息，这里主要涉及到Attribution各种属性的设置，所以这里先列出属性的信息，然后用示例来展示如何使用。
vue中导入openlayer地图控件
KIoIK的博客
05-12 388
1.首先新建controls.js import {defaults} from 'ol/control' import Attributions from 'ol/control/Attribution' import ZoomSlider from 'ol/control/ZoomSlider' export const controls = { //定义控件格式 Attribution: new Attributions({ //控件属性 show_progress: tr
openlayers删除控件Control
weixin_45598400的博客
10-18 577
示例代码可能有点老，但是大体思路没有问题。
OpenLayers添加和删除控件
weixin_30468137的博客
07-12 734
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width...
Vue+OpenLayers地图控件controls【二】
memory_zzz的博客
07-29 1654
1.fullscreen全屏控件 写法一： import { FullScreen } from "ol/control"; this.map.addControl(new FullScreen()); 写法二： import { defaults as defaultControls, FullScreen } from "ol/control"; controls: defaultControls({ zoom: false, rotate: false, a
vue-openlayers系列(1)：Control组件仿arcgis4个角布局
09-13 443
arcgis JavaScript api的组件top-left，top-right，bottom-left，bottom-right布局这种方式比较方便，在openlayers不能指定control的具体位置，需要通过重新css或者element来控制。这里参考arcgis的思路实现组件的在4个方位摆放。 首先定义4个div，与map平级 <div id="top-left" class="top-left"></div> <div id="top-right" cla
267：vue+openlayers 关于OverviewMap出现透明问题的多种测试及临时解决办法
大剑师兰特的GIS世界
06-03 633
本示例介绍如何在vue+openlayer中正确加载OverviewMap，这里出现了鹰眼图透明的问题，具体原因暂未找到，但是上述提出了临时解决方法，仅能作为临时解决的手段，后续再找找更靠谱的方式。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果。
A008：如何在vue+openlayers中实现比例尺控件(Controls篇)
最新发布
jiadsadfasfs的博客
07-28 517
本示例介绍如何在openlayers中使添加比例尺位置控件。 直接复制下面的vue+openlayers源代码，操作2分钟即可运行实现效果； 注意如果OpenStreetMap无法加载，请加载其他数据源来练习
vue+openlayers 开发一个卷帘图层控件
qq_34447899的博客
01-13 1577
vue+openlayers实现一个卷帘图层控件。
openlayers右键菜单
07-01
openlayers右键菜单 不错的demo openlayers右键菜单 不错的demo
Openlayers扩展右键菜单
01-05
扩展openalayers 自定义右键菜单开发，样式可以自行覆盖调整
使用OpenLayers3 添加地图鼠标右键菜单
11-22
添加右键菜单，首先我们要监听鼠标右键点击的操作，我们知道鼠标右键事件名是 contextmenu，当鼠标在 html 元素之上，点击鼠标右键，便会触发 contextmenu 事件，在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可。       那么在 openlayers 中，在地图中添加这个事件，我们从哪里下手呢？首先我们得了解 openlayers 的初始化页面的过程。 openlayers 初始化页面过程       openlayers 也是一个前端库，那么它肯定离不开 html 的运用，比如，我们首先需要在页面放置一个显示地图的 html 元素，一个 div
openlayers [七] 地图控件controls详解
爱玩亚索的程序员
01-18 1854
更多请见官网。
openlayer右键菜单_OpenLayers 3 之 加入地图鼠标右键菜单
weixin_39709194的博客
12-24 527
加入右键菜单，首先我们要监听鼠标右键点击的操作，我们知道鼠标右键事件名是 contextmenu。当鼠标在 html 元素之上，点击鼠标右键，便会触发 contextmenu 事件，在 contextmenu 事件的回调函数中实现对应的显示菜单功能就可以。那么在 openlayers 中。在地图中加入这个事件，我们从哪里下手呢？首先我们得了解 openlayers 的初始化页面的过程。openla...
使用Vue和OpenLayers：动态添加和清除控件
CodeWhizZ的博客
09-18 285
我们创建了一个Vue组件来容纳地图，并提供了添加和删除控件的方法。现在，让我们看一下如何使用我们创建的地图组件来动态添加和删除控件。我们将在另一个Vue组件中使用地图组件，并提供按钮来触发添加和删除控件的方法。至此，我们已经完成了使用Vue和OpenLayers进行动态添加和删除控件的地图应用程序。在本文中，我们将探讨如何使用Vue和OpenLayers来清除所有控件，并根据需要动态添加控件。在组件中，我们将设置地图的初始状态，并添加方法来处理控件的添加和删除。类创建地图实例，并设置了适当的选项。
扩展OpenLayers右键菜单
weixin_33737134的博客
11-10 257
1. 首先修改 OpenLayers Events.js 定位到下面代码段，添加右键菜单事件： View Code OpenLayers.Events = OpenLayers.Class({ /** * Constant: BROWSER_EVENTS * {Array(String)} supported events */ ...
window.open打开窗口时要使窗口去掉菜单栏、工具栏、标题栏，达到窗口最大化
世间的轮回总是悲喜难捉摸
08-28 3550
window.open打开窗口时要使窗口去掉菜单栏、工具栏、标题栏，达到窗口最大化，可以采用下面的方法：           js 代码 ///window.open(document.location, '窗体名称', 'fullscreen');//这句打开并去掉所有栏， //连系统任务栏都盖住 //window.open(document.location, '窗体名称', '');//只
vue+openLayers 实现图层控制控件
06-02
要在 Vue 中使用 OpenLayers 实现图层控制控件，可以按照以下步骤进行操作： 1. 安装 OpenLayers 和 Vue： ``` npm install ol vue ``` 2. 在 Vue 中引入 OpenLayers： ```javascript import ol from 'ol' import 'ol/ol.css' ``` 3. 创建地图容器： ```html <template> <div ref="map" class="map"></div> </template> ``` 4. 在 Vue 的 mounted 钩子函数中创建地图： ```javascript mounted() { // 创建地图容器 const map = new ol.Map({ target: this.$refs.map, layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([116.3975, 39.9085]), zoom: 12 }) }); this.map = map; } ``` 5. 创建图层控制控件： ```html <template> <div ref="map" class="map"> <div class="ol-control ol-custom-control"> <div class="ol-custom-control-header">图层控制</div> <div class="ol-custom-control-body"> <div v-for="(layer, index) in layers" :key="index"> <input type="checkbox" :id="layer.name" v-model="layer.visible"> <label :for="layer.name">{{ layer.name }}</label> </div> </div> </div> </div> </template> ``` 6. 在 Vue 的 data 中定义图层数据和控件的状态： ```javascript data() { return { map: null, layers: [ { name: 'OSM', visible: true, layer: new ol.layer.Tile({ source: new ol.source.OSM() }) }, { name: 'Bing Maps', visible: false, layer: new ol.layer.Tile({ source: new ol.source.BingMaps({ key: 'your-bingmaps-api-key', imagerySet: 'Road' }) }) } ] } } ``` 7. 在 Vue 的 watch 中监听图层状态的变化并更新地图： ```javascript watch: { layers: { deep: true, handler(layers) { const map = this.map; map.getLayers().clear(); layers.forEach(layer => { if (layer.visible) { map.addLayer(layer.layer); } }); } } } ``` 通过以上步骤就可以在 Vue 中实现图层控制控件了。需要注意的是，在实际应用中，可以根据需要自定义控件的样式和布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值