232：vue+openlayers选择左右两部分的地图，不重复，横向卷帘

最新推荐文章于 2024-03-07 19:12:28 发布
最新推荐文章于 2024-03-07 19:12:28 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： # openlayers综合教程200+ 文章标签： vue.js javascript 前端 openlayers卷帘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/130090601
版权
openlayers综合教程200+ 专栏收录该内容
265 篇文章 162 订阅 ¥239.90 ¥99.00
订阅专栏

在这里插入图片描述

第232个

点击查看专栏目录


本示例的目的是介绍演示如何在vue+openlayers项目中自定义js实现横向卷帘。这个示例中从左右两个选择框中来选择不同的地图，做了不重复的处理，即同一个数组，两部分根据选择后的状态做disabled处理，避免重复选择。

直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果； 注意如果OpenStreetMap无法加载，请加载其他来练习

文章目录

了解本专栏 订阅专栏 解锁全文
还是大剑师兰特
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
JavaScript卷帘菜单
05-28
JavaScript卷帘菜单,通过JavaScript实现客户端动态菜单.
openlayers实现卷帘功能
weixin_44614518的博客
09-08 1030
openlayers实现卷帘功能。
openlayers 卷帘
最新发布
weixin_60592115的博客
03-07 834
注意 卷帘元素为map子集"></div></div>
自己服务器发电子地图切片服务，不能重复显示
cwr888的专栏
09-27 287
自己服务器发电子地图切片服务，不能重复显示问题解决 不能重复显示： 代码如下： //切片调用 var world_tms = new ol.layer.Tile({ name:"切片", visible: true, source: new ol.source.XYZ({ matrixSet:"EPSG:4326", projection: "EPSG:4326"
vue+openlayers简单示例
10-19
一个Vue与Openlayers结合的应用示例，以组件的方式在Vue中使用openlayers地图，以及可以进行简单的地图配置
vue3+vite+openlayers6实现绘制扇形及环形组件代码
08-05
在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑，简化代码实现过程，保留核心功能，例如：vue3接入openlayers openlayers绘制环形 openlayers绘制扇形 适合人群：具备一定编程基础，...
Vue+Openlayers自定义轨迹动画
01-18
本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码，供大家参考，具体内容如下 <a>OpenlayersTrack <div class=bar :s
h5-my-like:vue + vue-router + vuex + axios + mock + vant + openlayers + echarts
03-28
123qwe 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行测试 npm run test 整理和修复文件 npm run lint 运行端到端测试 npm run test:e2e 运行单元测试 ...
Openlayers4地图重复出现的问题
做GIS梦的人
06-14 4372
在做Openlayers里做地图开发的时候，会出现地图重复出现的问题。如下图这种问题尝试了很多方式，给你Map/View设置Extent，都没有什么作用。最终解决方案：给地图的每一个layer设置extent；Openlayers下的每一个图层基类都继承了这个接口，设置setExtent[-180,-90,180,90]，之后有效的解决了地图图层重复出现的问题...
227：vue+openlayers自定义js横向卷帘，图层名称跟着分割线移动
大剑师兰特的GIS世界
03-20 321
);/***/var i;var l;for (i = 0;return -1;*/if (!*/
vue+openlayers 开发一个卷帘图层控件
qq_34447899的博客
01-13 1121
vue+openlayers实现一个卷帘图层控件。
OpenLayers: 创建两个地图联动展示
qq_40206575的博客
06-25 533
Openlayers：地图联动实现
openlayers center_【OpenLayers】图层卷帘（Layer Swipe）
weixin_39943000的博客
11-22 473
一、示例简介 在地图视口中构建一个卷帘，鼠标拉动这个卷帘，能够同时改变两个图层显示的大小。 图层卷帘效果：二、代码详解 <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
【WebGIS初学到入职】（八）用OpenLayers实现图层卷帘效果
ReBeX
10-16 896
一、前言 图层卷帘可以做到一种地图视觉效果。能够轻易得做到展示、对比两份地图。 官网实例：Layer Swipe 参考博客：Openlayers官方示例详解五之图层卷帘（Layer Swipe） 二、开始 <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
Openlayers2卷帘功能的实现
a18826265589的博客
07-18 396
概述： 在WebGIS开发中，经常会有用户提需求，要实现卷帘功能，卷帘功能主要是实现两张图之间的对比。在前文中，讲到了openlayers3以及Arcgis for js中卷帘的实现，在本文讲述如何在openlayers2中实现卷帘功能。 结果展示： 实现代码： 在此，扩展了一个名为Swipe的Control，Swipe的代码如下： [javascrip...
Openlayers 卷帘功能
weixin_38670190的博客
12-25 1558
卷帘 “卷帘”功能可以分为两部分： 控件元素的拖动。这里控件仿照ArcGIS for JS上的样式。 地图图层渲染流程的控制，对上层图层进行裁剪。 首先我们需要一个DOM组件作为拖动的“卷帘”，将其放在map容器内部，避免影响页面其他要素。 <div id="map" class="map"> <div id="swipeContainer"> <div id="swipeDiv"> <div class="ha
Openlayers+vue实现卷帘功能
fungis
08-25 1674
地图卷帘功能主要是通过控件元素的拖动 ，对地图图层渲染流程的控制。这里附上两种实现方法供大家参考。
049:vue+openlayers鼠标pointermove显示城市名片(示例代码)
06-06
Vue OpenLayers 是一种基于 Vue.js 的开源地图库，结合了 OpenLayers 的强大功能和 Vue.js 的易用性。其中，鼠标 pointermove 显示城市名片是 Vue OpenLayers 中非常有用的功能之一。下面我们来看一下示例代码。 在 Vue OpenLayers 中，我们可以使用 PointerMove() 方法来实现鼠标移动时的功能。我们可以在 mounted() 中添加以下代码： ```JavaScript mounted() { this.map.on('pointermove', this.displayCityCard); } ``` 这里，我们为指针移动事件添加了一个监听器，该监听器会调用 displayCityCard 方法。 接下来，我们需要实现 displayCityCard 方法，该方法会在指针移动时显示城市名片。代码如下： ```JavaScript methods: { displayCityCard(evt) { let features = this.map.getFeaturesAtPixel(evt.pixel); if (features.length) { let feature = features[0]; let city = feature.get('name'); this.city = city; this.showCityCard = true; } else { this.showCityCard = false; } } } ``` 这里，我们首先通过 getFeaturesAtPixel() 方法获取与指针所在位置对应的要素。如果有要素，则从中取出城市名，并将其赋值给 city。同时，我们将 showCityCard 属性设置为 true，以显示城市名片。如果没有要素，则将 showCityCard 设置为 false，以隐藏城市名片。 最后，我们需要在模板中添加一个 div 元素，用于显示城市名片： ```HTML <div v-if="showCityCard" class="city-card"> {{ city }} </div> ``` 这里，我们使用了 v-if 指令来控制 div 元素的显示与隐藏。如果 showCityCard 为 true，则显示该元素，并将城市名字显示在其中。 以上就是在 Vue OpenLayers 中实现鼠标 pointermove 显示城市名片的示例代码。通过这个函数，我们可以更加便捷地在地图上查看城市信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值