欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 家装 > openlayers禁用鼠标滚轮放大、拖拽事件并设置为只有按住Ctrl键才可以执行放大拖拽操作

openlayers禁用鼠标滚轮放大、拖拽事件并设置为只有按住Ctrl键才可以执行放大拖拽操作

2025/3/17 23:11:55 来源:https://blog.csdn.net/aaa_div/article/details/139960772  浏览:    关键词:openlayers禁用鼠标滚轮放大、拖拽事件并设置为只有按住Ctrl键才可以执行放大拖拽操作

 禁用openlayers鼠标滚轮放大、拖拽移动地图设置这两行代码即可:

new Map({interactions: defaults({ dragPan: false, mouseWheelZoom: false }),
})

或者设置只允许按住Ctrl键才可以操作 

import { DragPan, MouseWheelZoom, defaults } from "ol/interaction.js";
import { platformModifierKeyOnly } from "ol/events/condition.js";const map = new Map({interactions: defaults({ dragPan: false, mouseWheelZoom: false }).extend([new DragPan({condition: function (event) {return (// 检查是否有两个触点,或者按下了ctrl键this.getPointerCount() === 2 || platformModifierKeyOnly(event));},}),new MouseWheelZoom({condition: platformModifierKeyOnly,}),]),layers: [new TileLayer({source: new OSM(),}),],target: "map",view: new View({center: [0, 0],zoom: 2,}),});
  •  new MouseWheelZoom({ condition: platformModifierKeyOnly }) 用于创建一个鼠标滚轮缩放交互
  • condition是一个配置项,用于指定触发缩放的条件。
  • platformModifierKeyOnly是一个条件函数,仅在按住平台修饰键(如 Ctrl 键)时返回 true

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词