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

已于 2024-05-08 22:15:32 修改
阅读量1.7k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： # openlayers综合教程300+ 文章标签： openlayers滚轮 大剑师 webgis openlayers自学课程 openlayers入门
于 2023-08-25 17:46:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/132500621
本文由高级前端工程师分享，讲解在Vue+OpenLayers项目中如何更改鼠标滚轮缩放地图，每次滚动幅度更小。提供详细配置方式和85行源代码示例，帮助开发者快速实现这一功能。

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

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

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

文章目录

一、示例效果图

在这里插入图片描述

二、示例简介

本示例介绍如何在vue+openlayers项目中设置鼠标滚轮缩放地图大小，每次滑动一格滚轮，设定的值非默认值1。具体的设置方法，参考源代码。

直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果

三、配置方式

1）查看基础设置：https://xiaozhuanl

了解本专栏 订阅专栏 解锁全文
274: vue+openlayers 点图标的大小随着zoom的放大缩小而变化
大剑师兰特的GIS世界
07-05 1005
本示例介绍如何在vue+openlayer中实现点图标的大小随着zoom的放大缩小而变化。这里是一个方法的演示，可以多种变换。直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果
275：vue+openlayers 点图标的大小随着分辨率而变化
大剑师兰特的GIS世界
07-08 846
本示例介绍如何在vue+openlayer中实现点图标的大小随着分辨率变化。这里是一个方法的演示，实际项目中，需要个人自己去设定更好的方法。
OpenLayers中的球面墨卡托投影
weixin_30376509的博客
03-11 405
最近看OpenLayers，研究到地图投影时找到官方的文档，就翻译了一下，由于英文能力差，翻译不好的地方，请看原文 原文地址：http://docs.openlayers.org/library/spherical_mercator.html 球面墨卡托投影 该文档说明了什么是球面墨卡托投影以及何时使用该投影。文档中包含一些必要的背景知识、商用图层的代码演示、添加WMS图层以及使用Op...
OpenLayers：侦听缩放级别的变化
m0_52912501的博客
05-04 484
在实际开发中我们常常需要根据不同的缩放级别设置不同的展示效果或者执行不同的操作，因此侦听缩放级别的变化就很重要。想要侦听变化就需要依赖于OpenLayers中的事件系统，下面我将介绍两个相关的事件。
OpenLayers 地图事件探究
最新发布
GIS之路
06-17 1012
注：当前使用的是 ol版本，天地图使用的key请到天地图官网申请，并替换为自己的key地图事件贯穿于WebGIS开发的始终，用于实现地图与用户的交互操作。地图缩放、移动使用MapEvent事件；图层渲染、状态使用事件；要素绘制、选择使用事件。
openlayers的鼠标滚轮事件
01-15
openlayers如何启用和禁用鼠标滚轮事件。
openlayers中监听地图缩放级别事件moveend
热门推荐
u013594477的专栏
10-19 1万+
在实际需求中需要做到刚进入首页加载一个图层，但是在地图扩大或者缩小到某个级别后需要隐藏图层，因此我们需要对地图的缩放级别进行监听，用到的是moveend事件： map.on("moveend",function(e){ var zoom = map.getView().getZoom(); //获取当前地图的缩放级别 console.log(zoom); if(zoom ...
三十、openlayers官网示例解析Double click, Drag and Zoom——第二次点击鼠标拖拽缩放地图效果、取消地图双击放大事件
aaa_div的博客
05-28 882
interactions属性用来设置地图上的交互，DblClickDragZoom就是第二次按下鼠标拖拽缩放的类。这篇展示了如何在地图上添加第二次按下鼠标移动鼠标实现拖拽缩放地图效果。
vue+openlayers中实现图片展示与图片的拖拽和放大缩小（一）
浩星
11-26 6473
前言： openlayers中渲染图片是有多种方法的，Icon ，Image 等等都可以实现将图片放到地图上面，但是操作图片的话，方法比较少了，这里是配合 ol-ext 来实现的。 相关资料: 1、ol-ext官方地址：入口 2、ol-ext 对应的资料地址：入口 3、ol-ext 源码gitee地址：入口 4、openlayers 最新官网：入口 5、openlayers 官网api：入口 6、实际坐标转换视图坐标（getPixelFromCoordinate）：入口 ...
openlayers禁用鼠标滚轮放大、拖拽事件并设置为只有按住Ctrl键才可以执行放大拖拽操作
aaa_div的博客
06-25 923
或者设置只允许按住Ctrl键才可以操作。
083：vue+openlayers 地点搜索定位 （代码示例）
大剑师兰特的GIS世界
08-23 2065
本示例的目的是介绍演示如何在vue+openlayers中使用geocoder插件来查询地址，采用popup的形式来显示定位地点。
OpenLayers加载缩放控件使用方法详解
10-14
主要为大家详细介绍了OpenLayers加载缩放控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openLayers的缩放级别
09-26
openLayers的缩放级别
018：vue+openlayers 禁用原有zoom控件，自定义地图放大缩小
大剑师兰特的GIS世界
08-10 1143
本示例的目的是介绍如何在vue+openlayers项目中禁闭原有zoom控件，实现自定义地图放大缩小。直接复制 vue+openlayers源代码，操作2分钟即可运行实现效果
openlayers学习——2、openlayers放大缩小
记录生活点滴
01-06 4518
openlayers放大缩小 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint/inde
Vue等比例放大或缩小页面，当滚动鼠标滚轮时页面的布局不受影响
hunantai的博客
06-06 1421
【代码】Vue等比例放大或缩小页面，当滚动鼠标滚轮时页面的布局不受影响。
OpenLayers教程三：地图控件之缩放控件
不睡觉的怪叔叔的博客
06-04 1万+
目录 一、地图控件简介 二、普通缩放控件 三、滑块缩放控件 四、缩放至特定位置控件 五、修改控件样式 一、地图控件简介 OpenLayers封装了很多控件用于对地图进行操作、显示地图信息等。 具体来说，控件是一个地图上可见的小部件，其DOM元素位于屏幕上的固定位置。它们可以包含用户输入（以按钮的形式），也可以只提供信息。控件的位置是使用CSS来确定，当然也可以使用C...
openlayers中设置地图缩放级别
weixin_33671935的博客
10-09 1096
在实际项目中，好多地图不需要从第0级开始缩放，因为第0级地图太小了，没有实际意义。那么就需要设置从中间某个级别开始缩放。该如何做呢。由于openlayrs2中没有直接属性进行控制，也因此需要自己注册事件通过监听事件来控制地图的最小缩放级别。对于openlayers3来说，直接通过view的属性进行控制即可。 openlayers中需要注册缩放事...
openlayers5之view缩放定位
weixin_34246551的博客
08-21 741
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/gisdoer/article/details/81902386 openlayers5之view缩放定位 控制当前地图窗口缩放到指定位...
vue+Openlayers，在地图缩放大于18级，默认显示18级的地图
11-07
Vue.js 和 OpenLayers 的结合可以创建交互式地图应用，尤其是当你需要动态控制地图缩放级别时。在默认情况下，OpenLayers 提供了一种灵活的方式来设置初始地图视图。要在 Vue 组件中实现地图缩放到第 18 级并且在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值