243：vue+Openlayers 更改鼠标滚轮缩放地图大小，每次缩放小一点

已于 2024-05-08 22:15:32 修改
阅读量1.4k 收藏 2
点赞数 1
分类专栏： # openlayers综合教程300+ 文章标签： openlayers滚轮 大剑师 webgis openlayers自学课程 openlayers入门
于 2023-08-25 17:46:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/132500621
版权
openlayers综合教程300+ 专栏收录该内容
266 篇文章 172 订阅 ¥259.90 ¥99.00
订阅专栏

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

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

文章目录

一、示例效果图

在这里插入图片描述

二、示例简介<

了解本专栏 订阅专栏 解锁全文
还是大剑师兰特
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
openlayers-放大、缩小级别
huifer
05-13 6620
openlayers 放大缩小级别问题 需求 在使用鼠标滚轮放大地图或缩小地图时层次感太强，想要一个缓慢的缩放流程。或者每次放大0.5倍。 需求理解 假设切片地图的提供方并非本人，而是采用第三方（本文天地图），那么就没有办法修改切片，所以从切片角度没有办法进行操作 假设鼠标滚轮滚动一次放大级别增加1（缩放级别减小1），那么我们是不是可以通过修改鼠标滚轮滚动次数来解决放大缩小问题呢？ 本文采用...
openlayers的鼠标滚轮事件
01-15
openlayers如何启用和禁用鼠标滚轮事件。
（解决）在openlayers中，使用滚轮缩放地图，控制台报错Unable to preventDefault inside passive event listener invocation.
weixin_53399156的博客
09-23 957
网上各种稀奇古怪的解法都有： 1、卸载 default-passive-events 插件的，这种我刚卸载完，直接项目崩了，老老实实重新装回去，重启项目恢复了； 2、利用css方法，pointer-events: none; 在你的css里面添加这玩意，好嘛，至少在这里没啥用 3、创建对象的事件监听，关闭事件的默认行为 也就是这样的： window.addEventListener("事件名称", handler, { passive: false});但是前提是这个事件是你自己监听的你才能去...
初识webGIS库—OpenLayers
Shids_的博客
01-19 8835
初识webGIS库—OpenLayers
openlayers3中，鼠标滚轮动画
凡事有果必有因
11-21 2279
以前的web地图，使用鼠标滚轮进行放缩时，通常会显示放缩动画，如下图的效果，虽然现在主流web地图中都已经取消了这个功能，但这里还是备忘一下。
openlayers 入门（12）鼠标拖拽旋转/缩放
最新发布
qq_53079432的博客
10-16 197
这个要扩充一下 交互类
Openlayers 教程 22 - 介绍演示地图监听事件（单击双击、地图平移、地图缩放、鼠标悬浮等）
linzi19900517的博客
04-01 5981
地图中的监听事件，也是经常用的功能，一般用于点击获取坐标点，进而查询数据，还有其他事件，比如双击事件、缩放事件等。
Openlayers：移动，缩放比例控制、加载对应范围数据，异步加载数据更新地图坐标
weixin_47659945的博客
08-30 817
opnlayers 静态地图展示， 在开发过程中处理异步加载数据，控制缩放比例加载数据，对应事件的监听
八、OpenLayer一些常用的方法总结
qq_39330397的博客
08-21 513
9、渲染监听，适用于监听图层绘制，以及实时改变自己定义的一些元素的位置。1、获取地图的视角范围。
vue 图像拖拽、鼠标滚轮放大缩小
qq_42552455的博客
12-28 1170
vue 图像拖拽、鼠标滚轮放大缩小 //页面 <img v-drag @mousewheel.prevent="scaleFun" :style="scaleImg" :src=" dangerImgs[0] ? serverIp + dangerImgs[0] : require('@/assets/images/no-pic.png') "
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 运行单元测试 ...
monitor:vue + echarts 可视化拖拽图表项目
04-12
不用关心设置图表的尺寸，拉伸图表即可控制大小。 能够保存图表在页面上的位置信息，大小信息，下次打开时可还原上次图表状态。 能够通过文字提示的方式控制图表显示的参数信息，而不需要去代码配置它。 支持全屏...
【openlayers】地图【二】
weixin_42910765的博客
07-29 1351
学习不用慌，我们可以看到官网这个界面我们只需要掌握下面几大项就可以操练起来了。当然在学习中要经常查官方文档自然慢慢就会了。
添加地图滚轮放大缩小的动画效果
weixin_30924087的博客
06-08 658
ZommAnimation=OpenLayers.Class(OpenLayers.Control.Navigation,{ size:null, offset:null, uricon:null, ulicon:null, bricon:null, blicon:null, imgPath:APIAdress + "/jsapi/theme/img/gis/navi/", // 拖动的滑动...
Openlayers API整理
ANNENBERG的博客
06-28 913
1、创建地图Map 创建地图底图：需要用new ol.Map({}) 地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI组件的控件control组成的。 （1）、创建基本地图 let map = new ol.Map({ target: 'map',//对象指向 layers: [//图层 new ol.layer.Tile({//这里定义的是平铺图层 source: new ol.sourc
【自学笔记】openlayers加载天地图笔记二
weixin_46074818的博客
10-19 493
openlayers是开源地图包，它支持加载天地图。 html <body> <div id="tabMap"> </div> </body> css *{ padding: 0; margin: 0; box-sizing: border-box; } body, html{ width: 100%; height: 100%; font-family:"微软雅黑"; } #tabMap{ width:100%; heigh
vue+openlayers
06-08
Vue.js 和 OpenLayers 都是非常流行的前端技术，可以很好地结合在一起使用。你可以使用 Vue.js 来构建一个 Web 应用程序，并在其中集成 OpenLayers 地图。 要使用 Vue.js 和 OpenLayers，你需要先安装它们的依赖。对于 Vue.js，你可以使用 npm 来安装它。对于 OpenLayers，你可以下载它的 JavaScript 库并将其引入你的项目中。 一旦安装好依赖，你可以在 Vue.js 中使用 OpenLayers 的 API 来创建地图、添加图层、标记等。你可以使用 Vue.js 的组件化架构来组织你的代码，并且可以使用 Vuex 来管理你的应用程序的状态。 这是一个简单的例子，展示了如何在 Vue.js 中使用 OpenLayers： ``` <template> <div id="map"></div> </template> <script> import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; export default { mounted() { new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: [0, 0], zoom: 2 }) }); } } </script> <style> #map { height: 400px; } </style> ``` 在这个例子中，我们创建了一个 Vue.js 组件，它包含一个 div 元素，用来显示地图。在 mounted 生命周期钩子中，我们创建了一个 OpenLayers 地图，并将其绑定到 div 元素上。我们使用了 OSM 图层，并设置了初始的缩放级别和中心点。 注意，这只是一个简单的例子，你可以根据你的需求使用更多的 OpenLayers 功能和 Vue.js 组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值